Last active
August 29, 2015 14:07
-
-
Save hokuma/e71b2bc3352b0d5c9a94 to your computer and use it in GitHub Desktop.
d3.jsで東京メトロの地下鉄路線図を作成する ref: http://qiita.com/halhide/items/0d4116a11d05c21e6edc
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
| "N03_003" LIKE "%区%" |
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
| "N02_004" = '東京地下鉄' |
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
| topojson -p name=N03_003 -o tokyo.json tokyo.geojson | |
| topojson -p name=N02_003 -o metro_road.json metro_road.geojson |
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> | |
| .subunit-boundary { | |
| fill: none; | |
| stroke: #777; | |
| stroke-dasharray: 2,2; | |
| stroke-linejoin: round; | |
| } | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://d3js.org/topojson.v0.min.js"></script> | |
| <script> | |
| var width = 400, | |
| height = 400; | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| d3.json("tokyo.json", function(error, json) { | |
| var tokyo = topojson.object(json, json.objects.tokyo); | |
| // 2Dへのマッピング方法を定義 | |
| var projection = d3.geo.mercator() | |
| .center([139.7531, 35.6859]) | |
| .scale(50000) | |
| .translate([width / 2, height / 2]); | |
| // path生成 | |
| var path = d3.geo.path().projection(projection); | |
| svg.append("path") | |
| .datum(tokyo) | |
| .attr("d", path); | |
| // 境界線 | |
| svg.append("path") | |
| .datum(topojson.mesh(tjson, json.objects.tokyo, function(a, b) { return a !== b; })) | |
| .attr("d", path) | |
| .attr("class", "subunit-boundary"); | |
| // 路線図 | |
| // 描画順の保障のために、地図表示後に実施 | |
| d3.json("metro_road.json", function(error, json) { | |
| var path = d3.geo.path().projection(projection); | |
| var road = topojson.object(json, json.objects.metro_road).geometries; | |
| svg.selectAll("path") | |
| .data(road) | |
| .enter() | |
| .append('path') | |
| .attr('d', path) | |
| .attr('fill-opacity', 0) | |
| .attr('stroke', "#777") | |
| .attr('stroke-opacity', 1) | |
| .attr('stroke-width', '1px'); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment