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
forked from almccon's block: Basic D3 map (Robinson) d3v4
forked from Liddler's block: Basic D3 map (Robinson) d3v4
xxxxxxxxxx
<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.48 / Math.PI)
.scale(200)
.translate([width / 2, height / 2])
var path = d3.geoPath()
.projection(projection);
var url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
var url2 = "https://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_geojson2){
svg.append("path")
.attr("d", path(world_geojson))
.attr("fill", "BlanchedAlmond ")
svg.append("path")
.attr("d", path(places_geojson2))
.attr("fill", "orange")
svg.selectAll("circle")
.data(places_geojson2.features)
.enter()
.append("circle")
.attr("r", function (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 "red";
}
})
.attr("opacity", 0.5)
})
})
</script>
</body>
https://d3js.org/d3.v4.js
https://d3js.org/d3-geo-projection.v2.min.js