Skip to content

Instantly share code, notes, and snippets.

@yoon-gu

yoon-gu/.block

Last active February 23, 2017 06:44
Show Gist options
  • Save yoon-gu/708af2aed81205be56b592e7f6d7cbb5 to your computer and use it in GitHub Desktop.
Save yoon-gu/708af2aed81205be56b592e7f6d7cbb5 to your computer and use it in GitHub Desktop.
Download ZIP
2017 우경랭가이드-서울편
Raw
.block
license: mit
height: 555
Raw
README.md
  1. 지역구를 클릭하면 확대가 됩니다.
  2. MouseOver하면 식당이름(국적:별점)이 나옵니다.
  3. 별점은 3점 만점입니다.
  4. 같은 한식에 별이 3개면 같은색으로 표시됩니다.
  5. 서울편만 업데이트 했습니다.
Raw
data.csv
lat lon name stars type
35.812528 127.14700100000006 조점례남문피순대 ☆☆☆ 한식
35.813415 127.15156600000002 베테랑분식 ☆☆☆ 한식
37.237116 127.20181899999999 엄마손칼국수 ☆☆☆ 한식
37.572654 126.9609288 대성집 ☆☆☆ 한식
37.564395 126.98501799999995 하동관 ☆☆☆ 한식
35.991435 129.5562 까꾸네모리국수 ☆☆☆ 한식
37.515207 126.94097499999998 형제수산 ☆☆☆ 한식
37.5860376 126.91769120000005 네바다 횟집 ☆☆☆ 한식
35.830816 129.216225 교리김밥 ☆☆☆ 한식
37.514764 127.01910599999997 한성돈까스 ☆☆☆ 한식
36.7832877 126.45315310000001 삼기꽃게장 ☆☆☆ 한식
37.5696116999999 126.91620160000002 식이네집 ☆☆☆ 한식
37.562122 126.90352000000007 정광수의돈까스가게 ☆☆☆ 한식
37.7902728 128.91548590000002 초당할머니순두부 ☆☆☆ 한식
37.5727312 126.98535590000004 베테랑 칼국수 ☆☆☆ 한식
37.5634214 127.0080048 부부청대문 ☆☆☆ 한식
37.577062 127.03068600000005 나정순할매주꾸미 ☆☆ 한식
37.571285 126.99152400000004 영춘옥 ☆☆ 한식
37.8787394 127.72528989999999 춘천 숯불닭불고기 ☆☆ 한식
37.5491775 126.92244110000003 김덕후 곱창조 ☆☆ 한식
37.501019 127.02741300000004 알부자 ☆☆ 한식
33.506902 126.53008699999998 삼대국수회관 ☆☆ 한식
37.593115 127.00032799999997 손가네 ☆☆ 한식
37.550897 126.92364199999999 봉추찜닭 ☆☆ 한식
37.592116 127.01593700000001 태조감자국 ☆☆ 한식
37.5491775 126.92244110000003 사모님 돈까스 ☆☆ 한식
37.572006 126.98830199999996 유진식당 ☆☆ 한식
37.572784 126.990274 찬양집해물칼국수 ☆☆ 한식
35.8255613 128.62239369999998 마루막창 ☆☆ 한식
37.558031 126.9431674 남도 ☆☆ 한식
37.8848603 128.82719810000003 파도식당 물곰탕 ☆☆ 한식
37.5478578 126.92524290000007 버그네 ☆☆ 한식
37.5570074 126.93505729999993 조선의육개장 ☆☆ 한식
35.160642 129.19104800000002 수민이네 ☆☆ 한식
37.568902 126.90273300000001 성산왕갈비 ☆ 한식
37.555061 126.95573499999999 아현동간장게장 ☆ 한식
37.554062 126.91082000000006 망원동 즉석우동 ☆ 한식
37.562354 126.97036300000002 장호곱창 ☆ 한식
37.559036 126.96866499999997 호수집 ☆ 한식
37.570951 126.97974699999997 미진메밀국수 ☆ 한식
37.5580577712073 126.9770744576722 남해식당 칼국수 ☆ 한식
37.5562073 126.92677879999995 홍대 즉석우동 ☆ 한식
37.56429 126.96713109999996 삼오쭈꾸미 ☆ 한식
37.562661 126.92682000000002 채윤희 ☆ 한식
37.558663 126.94591700000001 가미 ☆ 한식
35.825776 127.11461499999996 김삿갓 ☆ 한식
37.5603708 126.92102810000006 바다회사랑 ☆ 한식
37.563224 126.9731143 한성식당 곱창전골 ☆ 한식
37.577088 126.92803000000004 모래내설렁탕 ☆ 한식
37.544732 126.95372199999997 청학동부침개 ☆ 한식
37.5561126 126.8986975 계륵장군 ☆ 한식
37.5596582 126.90722770000004 맛의단상 ☆ 한식
37.5569137 126.93364429999997 돈불 1971 ☆ 한식
37.558275 126.93597249999993 하루 돈까스 ☆ 한식
37.5528768 126.90700749999995 봉길이해장국 ☆ 한식
37.569413 126.91570899999999 신흥떡볶이 ☆ 한식
37.554551 126.930724 탐라돈 ☆ 한식
37.5763117 126.97148549999997 계단집 ☆ 한식
37.5735934 126.98803800000002 통나무식당 마산아구찜 ☆ 한식
37.5622665 126.925854 수미 ☆ 한식
37.5691602 126.9159824 감자바우 ☆ 한식
37.559039 126.922447 마포곱창타운 ☆ 한식
37.5477792 126.94277690000001 족발연구소(바베큐족발) ☆ 한식
37.5577702 126.913247 진진 ☆☆☆ 중식
37.7582973 128.89294459999996 교동반점 ☆☆☆ 중식
37.5508352 126.92340639999996 삼대 초마 ☆☆☆ 중식
37.5476869 126.9205994 맛이차이나 ☆☆ 중식
37.5652394 126.9231092 산왕반점 ☆☆ 중식
37.563214 126.92517090000001 하하 ☆☆ 중식
37.5586225 126.9393835 완차이 ☆ 중식
37.5558862 126.8973095 강동원 ☆ 중식
37.5158835 126.89102189999994 차이훙 ☆ 중식
37.56794230000001 126.98117439999999 청키면가 ☆ 중식
37.5663206 126.927307 다니엘스키친 ☆☆☆ 일식
37.5516488 126.91503239999999 우동카덴 ☆☆☆ 일식
37.558053 126.94516999999998 후쿠스시 ☆☆☆ 일식
37.55499640000001 126.92411719999996 스시 히카리 ☆☆☆ 일식
37.548638 126.92127649999999 히메시야 ☆☆☆ 일식
37.558497 126.9395539 하나 ☆☆ 일식
37.60306 127.06596000000002 로지스시 ☆☆ 일식
37.5563616 126.92670870000006 부탄추 라멘 ☆☆ 일식
37.54687 126.91319399999998 교다이야 ☆☆ 일식
37.5774604 126.89480530000003 스시키노이 ☆☆ 일식
37.5546186 126.92383629999993 가미우동 ☆ 일식
37.5460901 126.9212974 김씨네 심야식당 ☆ 일식
37.557424 126.90939300000004 카도야 ☆ 일식
37.5484417 126.92010579999999 이자카야 천상 ☆ 일식
37.5589365 126.9414455 만나역 ☆☆☆ 양식
37.570925 126.9788425 허머스키친 ☆☆☆ 양식
37.5541168 126.92994599999999 아이엠어버거 ☆☆☆ 양식
37.5252313 127.03913480000006 몽고네 ☆☆☆ 양식
37.5787648 126.98172590000001 이태리재 ☆☆☆ 양식
37.566697 126.92840000000001 인디앨리(in.D.Alley) ☆☆ 양식
37.557089999999995 126.92046800000004 라룬비올렛 ☆☆ 양식
37.55146 126.937322 델리지오제 ☆☆ 양식
37.53959239999993 126.99018113862304 돈차를리 ☆☆ 양식
37.559743 126.9248827 코르크 와인바 ☆☆ 양식
37.564726 126.94447100000001 로드샌드위치 ☆☆ 양식
37.549591 126.92236400000003 윤씨밀방 ☆☆ 양식
37.562287 126.92603099999997 감칠 ☆☆ 양식
37.366089 127.105324 쏘렐라 ☆ 양식
37.560102 126.92504209999993 클레어 데룬 ☆ 양식
37.547006 126.92253700000002 트라토리아 챠오 ☆ 양식
37.5598268 126.92105630000002 르낫농 타르트 ☆ 양식
37.5623392 126.9262565 베무초 ☆ 양식
37.549675 126.92239199999993 데코아발림 ☆ 양식
37.59552890000001 126.96405870000001 립스테이크 ☆ 양식
37.5589347 126.9244013 질할브로스 ☆ 양식
37.5574355 126.94186179999998 방콕익스프레스 ☆☆☆ 아시안
37.56271 126.9256945 ahn ☆☆☆ 아시안
37.5651912 126.923915 툭툭누들타이 ☆☆☆ 아시안
37.519318 126.93147499999998 바삭 ☆☆ 퓨전
37.5848695 126.9975336 페르시안궁전 ☆☆ 아시안
37.5485448 126.9224259 뭄 알로이 ☆☆ 아시안
37.5536658 126.93787470000007 발리비스트로 ☆ 아시안
37.5483902 126.9212338 탄탄멘공방 ☆ 아시안
37.5579825 126.93585650000001 아마네 라멘 ☆ 일식
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body { background-color: #1A1A1A; }
path {
stroke-linejoin: round;
}
.land {
fill: #4C4C4C;
}
.states {
fill: none;
stroke: darkgray;
}
svg .municipality-label {
fill: white;
font-size: 11px;
font-weight: 300;
text-anchor: middle;
font-family: sans-serif;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var color = d3.scale.category20();
var width = 960,
height = 550;
var centered;
var projection = d3.geo.mercator()
.center([126.9895, 37.5651])
.scale(90000)
.translate([width/2, height/2]);
var path = d3.geo.path().projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.on("click", clicked);
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.style("font-family", "sans-serif")
.style("color", "white")
.style("font-size", "11px");
queue()
.defer(d3.json, "https://gist.githubusercontent.com/yoon-gu/b051fd123385303a5c03f0e0a833516c/raw/9fff4a65830be008709112c190c3ed939d42e994/seoul_municipalities_topo.json")
.defer(d3.csv, "data.csv")
.await(ready);
function ready(error, kor, stations) {
if (error) throw error;
var features = topojson.feature(kor, kor.objects.seoul_municipalities_geo).features;
g.selectAll("path")
.data(features)
.enter().append("path")
.attr("class", "land")
.attr("d", path)
.attr("id", function(d) { return d.properties.name; })
.on("click", clicked)
.append("title");
g.append("path")
.datum(topojson.mesh(kor, kor.objects.seoul_municipalities_geo, function(a, b) { return a !== b; }))
.attr("class", "states")
.attr("d", path);
g.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; })
g.selectAll("circle")
.data(stations)
.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", 3)
.attr("opacity", 0.7)
.attr("class", function(d){ return d.type; })
.attr("fill", function(d){ return color(d.type+d.stars);})
.on("mouseover", function(d){
tooltip.style("visibility", "visible")
.text(d.name + '(' + d.type + ':' + d.stars + ')');
})
.on("mousemove", function(){
tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");
})
.on("mouseout", function(){
tooltip.style("visibility", "hidden");
});
}
function clicked(d) {
var x, y, k;
if (d && centered !== d) {
var centroid = path.centroid(d);
x = centroid[0];
y = centroid[1];
k = 3;
centered = d;
} else {
x = width / 2;
y = height / 2;
k = 1;
centered = null;
}
g.selectAll("path")
.classed("active", centered && function(d) { return d === centered; });
g.transition()
.duration(750)
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
.style("stroke-width", 1.5 / k + "px");
}
</script>
Raw
LICENSE
MIT License
Copyright (c) 2017 Jacob Hwang
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment