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)
forked from almccon's block: Basic D3 map (Mercator) d3v4
license: mit |
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)
forked from almccon's block: Basic D3 map (Mercator) d3v4
<!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> |