This example demonstrates subway station locastions in Seoul.
-
-
Save yoon-gu/9e4aab610793abe0215209d5d6e0d2b2 to your computer and use it in GitHub Desktop.
Seoul Subway Location
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 700 |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| path { | |
| stroke-linejoin: round; | |
| } | |
| .land { | |
| fill: #ddd; | |
| } | |
| .states { | |
| fill: none; | |
| stroke: #fff; | |
| } | |
| circle.no_l_1{ fill: #1B2876; } | |
| circle.no_l_2{ fill: #34A939; } | |
| circle.no_l_3{ fill: #FD5C09; } | |
| circle.no_l_4{ fill: #268BD5; } | |
| circle.no_l_5{ fill: #7411D9; } | |
| circle.no_l_6{ fill: #9E3B0B; } | |
| circle.no_l_7{ fill: #566112; } | |
| circle.no_l_8{ fill: #DB005B; } | |
| svg .municipality-label { | |
| fill: #808080; | |
| font-size: 12px; | |
| 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 width = 960, | |
| height = 700; | |
| var projection = d3.geo.mercator() | |
| .center([126.9895, 37.5651]) | |
| .scale(100000) | |
| .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); | |
| queue() | |
| .defer(d3.json, "/yoon-gu/raw/b051fd123385303a5c03f0e0a833516c/seoul_municipalities_topo.json") | |
| .defer(d3.csv, "/yoon-gu/raw/902efb6d5bd345e3837e035a3c0642b8/station_latlen.csv") | |
| .await(ready); | |
| function ready(error, kor, stations) { | |
| if (error) throw error; | |
| svg.append("path") | |
| .datum(topojson.feature(kor, kor.objects.seoul_municipalities_geo)) | |
| .attr("class", "land") | |
| .attr("d", path); | |
| svg.append("path") | |
| .datum(topojson.mesh(kor, kor.objects.seoul_municipalities_geo, function(a, b) { return a !== b; })) | |
| .attr("class", "states") | |
| .attr("d", path); | |
| svg.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 "no_l_" + d.no_line; }) | |
| .append("title").text(function(d) {return d.name}); | |
| var features = topojson.feature(kor, kor.objects.seoul_municipalities_geo).features; | |
| svg.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; }) | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
서울메트로 자료로만들어서 모든 지하철역이 있지 않다. 예를들어, 1호선의 경우 총 5개의 데이터밖에 들어있지 않다.
이유는 회사가 서울메트로가 관할하는 역들이 아니기때문이다. 참고 : Wikipedia
다른 지하철역들도 검사해봐야할듯..