A basic map in D3 using some projection from here: https://github.com/d3/d3/blob/master/API.md#geographies-d3-geo
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
forked from almccon‘s block: Basic D3 map (Robinson) d3v4
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/d3-geo-projection.v2.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 = 800;
var height = 500;
var svg = d3.select("body").append("svg")
var projection = d3.geoStereographic()
.scale(width / 2 / Math.PI)
.scale(200)
.translate([width / 2, height / 2])
var path = d3.geoPath()
.projection(projection);
var url = "//enjalot.github.io/wwsd/data/world/world-110m.geojson";
var url2 = "//enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson";
d3.json(url, function(err, world_geojson) {
d3.json(url2, function(err, places_geojson) {
svg.append("path")
.attr("d", path(world_geojson))
.attr("fill","lightgray")
svg.selectAll("circle")
.data(places_geojson.features)
.enter()
.append("circle")
.attr("r", function(d) {
console.log(d);
return d.properties.pop_max/1000000;
})
.attr('cx',function(d) {
return projection(d.geometry.coordinates)[0]
})
.attr('cy',function(d) {
return projection(d.geometry.coordinates)[1]
})
.attr("fill",function(d) {
if(d.properties.megacity == 1) {
return "darkgreen";
} else {
return "salmon";
}
})
.attr("opacity",0.5)
})
})
</script>
</body>