sundlee/README.md

## README.md

      
    Raw
  

              README.md
            
          
데이터 출처 아이디어: http://slownews.kr/43212
데이터 출처 김치찌개: http://m.mangoplate.com/top_lists/kimchistew_top20?utm_source=facebook&utm_medium=top_list_kimchistew_top20
데이터 출처 서울지도: https://github.com/southkorea/seoul-maps/tree/master/kostat/2013/json
License: Apache v2


## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
        svg circle {
          fill: orange;
          opacity: .5;
          stroke: white;
        }
        svg circle:hover {
          fill: red;
          stroke: #333;
        }
        svg text {
          pointer-events: none;
        }
        svg .municipality {
          fill: #efefef;
          stroke: #fff;
        }
        svg .municipality-label {
          fill: #bbb;
          font-size: 12px;
          font-weight: 300;
          text-anchor: middle;
        }
        svg #map text {
          color: #333;
          font-size: 10px;
          text-anchor: middle;
        }
        svg #places text {
          color: #777;
          font: 10px sans-serif;
          text-anchor: start;
        }
        #title {
            font-family: sans-serif;
        }
        #title p {
            font-size: 10pt;
        }
    </style>
  </head>
  <body>
    <div id="chart"></div>
    <div id="title">
      <h2>김치찌개 맛집 TOP 20</h2>
      <p>
        <a href="http://m.mangoplate.com/top_lists/kimchistew_top20?utm_source=facebook&utm_medium=top_list_kimchistew_top20">망고플레이트에서 소개한 김치찌개 맛집</a>을 <a href="http://d3js.org">D3.js</a>, <a href="https://github.com/southkorea/seoul-maps/tree/master/kostat/2013/json">TopoJSON을 이용한 서울 지도</a>를 사용해 시각화 했습니다.
      </p>
      <p>
        지도 만드는 법은 <a href="http://slownews.kr/43212">D3.js 이용한 식신로드: 역대 서울지역 만점 맛집 시각화</a>를 참고해주세요.
      </p>
      <p>

      </p>
    </div>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    var width = 800,
        height = 600;

    var svg = d3.select("#chart").append("svg")
        .attr("width", width)
        .attr("height", height);

    var map = svg.append("g").attr("id", "map"),
        places = svg.append("g").attr("id", "places");

    var projection = d3.geo.mercator()
        .center([126.9895, 37.5651])
        .scale(100000)
        .translate([width/2, height/2]);

    var path = d3.geo.path().projection(projection);

    d3.json("seoul_municipalities_topo_simple.json", function(error, data) {
      var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
      map.selectAll('path')
          .data(features)
        .enter().append('path')
          .attr('class', function(d) { console.log(); return 'municipality c' + d.properties.code })
          .attr('d', path);

      map.selectAll('text')
          .data(features)
        .enter().append("text")
          .attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
          .attr("dy", ".35em")
          .attr("class", "municipality-label")
          .text(function(d) { return d.properties.name; })
    });

    d3.csv("places.csv", function(data) {
        places.selectAll("circle")
            .data(data)
          .enter().append("circle")
            .attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
            .attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
            .attr("r", 10);

        places.selectAll("text")
            .data(data)
          .enter().append("text")
            .attr("x", function(d) { return projection([d.lon, d.lat])[0]; })
            .attr("y", function(d) { return projection([d.lon, d.lat])[1] + 8; })
            .text(function(d) { return d.name });
    });
    </script>
  </body>
</html>

## kimchistew.py
# http://slownews.kr/43212

# -*- coding: utf-8 -*-
from lxml import html
import requests

APIKEY = 'NAVER API KEY' /* 이곳에 Naver API에서 Key를 발급받아 넣으세요. */
MAPAPI = 'http://openapi.map.naver.com/api/geocode.php?key=%s&encoding=utf-8&coord=LatLng&query=%s'

def get_latlon(query):
    root = html.parse(MAPAPI % (APIKEY, query))
    lon, lat = root.xpath('//point/x/text()')[0], root.xpath('//point/y/text()')[0]
    return (lat, lon)


print "Start..."

# get data from article
r = requests.get('http://m.mangoplate.com/top_lists/kimchistew_top20?utm_source=facebook&utm_medium=top_list_kimchistew_top20')
root = html.document_fromstring(r.text)
string = '\n'.join(root.xpath('//*[@id="top_list_wrap"]/section[1]/section[2]/section[1]//text()'))
#print string

items = []
for i in range(1, 21):
	name = '\n'.join(root.xpath('/html/body/main/article/div[1]/div/section[1]/ul/li[%s]/div/figure/figcaption/div/span/a//text()' % i))
	addr = '\n'.join(root.xpath('/html/body/main/article/div[1]/div/section[1]/ul/li[%s]/div/figure/figcaption/div/p//text()' % i))
	print "...", name, " ", addr
	lat, lon = get_latlon(addr)
	print lat, lon
	items.append([name, lat, lon])

# save data to file
with open('places.csv', 'w') as f:
	f.write('name,lat,lon\n')
	for d in items:
		f.write('%s,%s,%s\n' % (d[0].encode('utf-8'), d[1].encode('utf-8'), d[2].encode('utf-8')))
		print d[0], " ", d[1], " ", d[2]

print "End..."


## places.csv

          
            name
            lat
            lon

            
              1. 뚝배기집
              37.5695782
              126.9884870

            
              2. 고냉지
              37.5585196
              126.9422089

            
              3. 낭풍
              37.5582445
              126.9348354

            
              4. 한종호의 죽여주는 김치찜 김치찌개
              37.3855477
              127.1213940

            
              5. 한옥집
              37.5666532
              126.9648460

            
              6. 은주정
              37.5686944
              126.9997438

            
              7. 철이네두루치기
              37.5579411
              126.9361941

            
              8. 굴다리 식당
              37.5421115
              126.9508067

            
              9. 음악국수집
              37.5027899
              127.0349017

            
              10. 오모리찌개
              37.5185446
              126.9806256

            
              11. 장호왕곱창
              37.5624119
              126.9703355

            
              12. 광화문집
              37.5713761
              126.9750021

            
              13. 장꼬방
              37.4868621
              127.0236784

            
              14. 김복순 큰남비집
              37.5207526
              127.0200157

            
              15. 왕십리 장어구이
              37.5594890
              127.0405360

            
              16. 삼군김치찌개
              37.5046097
              127.0467319

            
              17. 김장독
              37.5567950
              126.9247046

            
              18. 다발
              37.5590656
              126.9365543

            
              19. 대독장
              37.5027716
              127.0378143

            
              20. 더김치찌개
              37.5586319
              126.9357686

## seoul_municipalities_topo_simple.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              seoul_municipalities_topo_simple.json
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style>
	svg circle {
	fill: orange;
	opacity: .5;
	stroke: white;
	}
	svg circle:hover {
	fill: red;
	stroke: #333;
	}
	svg text {
	pointer-events: none;
	}
	svg .municipality {
	fill: #efefef;
	stroke: #fff;
	}
	svg .municipality-label {
	fill: #bbb;
	font-size: 12px;
	font-weight: 300;
	text-anchor: middle;
	}
	svg #map text {
	color: #333;
	font-size: 10px;
	text-anchor: middle;
	}
	svg #places text {
	color: #777;
	font: 10px sans-serif;
	text-anchor: start;
	}
	#title {
	font-family: sans-serif;
	}
	#title p {
	font-size: 10pt;
	}
	</style>
	</head>
	<body>
	<div id="chart"></div>
	<div id="title">
	<h2>김치찌개 맛집 TOP 20</h2>
	<p>
	<a href="http://m.mangoplate.com/top_lists/kimchistew_top20?utm_source=facebook&utm_medium=top_list_kimchistew_top20">망고플레이트에서 소개한 김치찌개 맛집</a>을 <a href="http://d3js.org">D3.js</a>, <a href="https://github.com/southkorea/seoul-maps/tree/master/kostat/2013/json">TopoJSON을 이용한 서울 지도</a>를 사용해 시각화 했습니다.
	</p>
	<p>
	지도 만드는 법은 <a href="http://slownews.kr/43212">D3.js 이용한 식신로드: 역대 서울지역 만점 맛집 시각화</a>를 참고해주세요.
	</p>
	<p>

	</p>
	</div>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script>
	var width = 800,
	height = 600;

	var svg = d3.select("#chart").append("svg")
	.attr("width", width)
	.attr("height", height);

	var map = svg.append("g").attr("id", "map"),
	places = svg.append("g").attr("id", "places");

	var projection = d3.geo.mercator()
	.center([126.9895, 37.5651])
	.scale(100000)
	.translate([width/2, height/2]);

	var path = d3.geo.path().projection(projection);

	d3.json("seoul_municipalities_topo_simple.json", function(error, data) {
	var features = topojson.feature(data, data.objects.seoul_municipalities_geo).features;
	map.selectAll('path')
	.data(features)
	.enter().append('path')
	.attr('class', function(d) { console.log(); return 'municipality c' + d.properties.code })
	.attr('d', path);

	map.selectAll('text')
	.data(features)
	.enter().append("text")
	.attr("transform", function(d) { return "translate(" + path.centroid(d) + ")"; })
	.attr("dy", ".35em")
	.attr("class", "municipality-label")
	.text(function(d) { return d.properties.name; })
	});

	d3.csv("places.csv", function(data) {
	places.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("cx", function(d) { return projection([d.lon, d.lat])[0]; })
	.attr("cy", function(d) { return projection([d.lon, d.lat])[1]; })
	.attr("r", 10);

	places.selectAll("text")
	.data(data)
	.enter().append("text")
	.attr("x", function(d) { return projection([d.lon, d.lat])[0]; })
	.attr("y", function(d) { return projection([d.lon, d.lat])[1] + 8; })
	.text(function(d) { return d.name });
	});
	</script>
	</body>
	</html>
	# http://slownews.kr/43212

	# -- coding: utf-8 --
	from lxml import html
	import requests

	APIKEY = 'NAVER API KEY' /* 이곳에 Naver API에서 Key를 발급받아 넣으세요. */
	MAPAPI = 'http://openapi.map.naver.com/api/geocode.php?key=%s&encoding=utf-8&coord=LatLng&query=%s'

	def get_latlon(query):
	root = html.parse(MAPAPI % (APIKEY, query))
	lon, lat = root.xpath('//point/x/text()')[0], root.xpath('//point/y/text()')[0]
	return (lat, lon)


	print "Start..."

	# get data from article
	r = requests.get('http://m.mangoplate.com/top_lists/kimchistew_top20?utm_source=facebook&utm_medium=top_list_kimchistew_top20')
	root = html.document_fromstring(r.text)
	string = '\n'.join(root.xpath('//*[@id="top_list_wrap"]/section[1]/section[2]/section[1]//text()'))
	#print string

	items = []
	for i in range(1, 21):
	name = '\n'.join(root.xpath('/html/body/main/article/div[1]/div/section[1]/ul/li[%s]/div/figure/figcaption/div/span/a//text()' % i))
	addr = '\n'.join(root.xpath('/html/body/main/article/div[1]/div/section[1]/ul/li[%s]/div/figure/figcaption/div/p//text()' % i))
	print "...", name, " ", addr
	lat, lon = get_latlon(addr)
	print lat, lon
	items.append([name, lat, lon])

	# save data to file
	with open('places.csv', 'w') as f:
	f.write('name,lat,lon\n')
	for d in items:
	f.write('%s,%s,%s\n' % (d[0].encode('utf-8'), d[1].encode('utf-8'), d[2].encode('utf-8')))
	print d[0], " ", d[1], " ", d[2]

	print "End..."
name	lat	lon
1. 뚝배기집	37.5695782	126.9884870
2. 고냉지	37.5585196	126.9422089
3. 낭풍	37.5582445	126.9348354
4. 한종호의 죽여주는 김치찜 김치찌개	37.3855477	127.1213940
5. 한옥집	37.5666532	126.9648460
6. 은주정	37.5686944	126.9997438
7. 철이네두루치기	37.5579411	126.9361941
8. 굴다리 식당	37.5421115	126.9508067
9. 음악국수집	37.5027899	127.0349017
10. 오모리찌개	37.5185446	126.9806256
11. 장호왕곱창	37.5624119	126.9703355
12. 광화문집	37.5713761	126.9750021
13. 장꼬방	37.4868621	127.0236784
14. 김복순 큰남비집	37.5207526	127.0200157
15. 왕십리 장어구이	37.5594890	127.0405360
16. 삼군김치찌개	37.5046097	127.0467319
17. 김장독	37.5567950	126.9247046
18. 다발	37.5590656	126.9365543
19. 대독장	37.5027716	127.0378143
20. 더김치찌개	37.5586319	126.9357686