Working with d3.js projections for mapping geospatial data
Built with blockbuilder.org
forked from enjalot's block: WWSD #6: d3.js projections
Working with d3.js projections for mapping geospatial data
Built with blockbuilder.org
forked from enjalot's block: WWSD #6: d3.js projections
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<script src="//d3js.org/d3.geo.projection.v0.min.js"></script> | |
<script src="//d3js.org/topojson.v1.min.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 projection2 = d3.geo.albers() | |
//.center([37.77, -122.43]) | |
.scale(169) | |
.translate([width / 2, height / 2]); | |
var projection = d3.geo.airy() | |
.rotate([86, -55, 29]) | |
.scale(340) | |
.translate([width / 2, height / 2]) | |
.precision(0.1) | |
.clipAngle(83) | |
.radius(90); | |
var path = d3.geo.path() | |
.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)) | |
var point = projection([-122.43, 37.77]) | |
svg.append("circle") | |
.attr({ | |
cx: point[0], | |
cy: point[1], | |
r: 10, | |
fill: "red" | |
}) | |
}) | |
</script> | |
</body> |