A basic map in D3 using the Mercator projection.
Built with blockbuilder.org
forked from enjalot's block: WWSD #6: d3.js projections
forked from almccon's block: Basic D3 map (Mercator)
Last active
December 27, 2017 06:18
-
-
Save almccon/fe445f1d6b177fd0946800a48aa59c71 to your computer and use it in GitHub Desktop.
Basic D3 map (Mercator) d3v4
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: mit |
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> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="//d3js.org/d3.v4.js"></script> | |
| <style> | |
| body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
| svg { width:100%; height: 100% } | |
| </style> | |
| </head> | |
| <body> | |
| <script> | |
| var width = 960; | |
| var height = 500; | |
| var svg = d3.select("body").append("svg") | |
| var projection = d3.geoMercator() | |
| .scale(width / 2 / Math.PI) | |
| //.scale(100) | |
| .translate([width / 2, height / 2]) | |
| var path = d3.geoPath() | |
| .projection(projection); | |
| var url = "http://enjalot.github.io/wwsd/data/world/world-110m.geojson"; | |
| d3.json(url, function(err, geojson) { | |
| svg.append("path") | |
| .attr("d", path(geojson)) | |
| }) | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment