Old school D3 from simpler times

All examples By author By category About

almccon

Full window Github gist

D3v5 map example

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 90%;}
  </style>
</head>

<body>
  <script>
    var svg = d3.select("body").append("svg");
    var projection = d3.geoEqualEarth().rotate([90, 0, 0]);
    var path = d3.geoPath().projection(projection);

var url = "https://enjalot.github.io/wwsd/data/world/world-110m.geojson";
    var data_url = "https://enjalot.github.io/wwsd/data/world/ne_50m_populated_places_simple.geojson";
    
    Promise.all([d3.json(url), d3.json(data_url)]).then(function(data) {
      var world = data[0];
      var places = data[1];
      
      svg.append("path")
      	.attr("d", path(world))
      	.attr("fill", "lightgray")
      	.attr("stroke", "white");
      
      svg.selectAll("circle")
      	.data(places.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", "darkgreen")
      	.attr("opacity", 0.5)
      
      window.setTimeout(function() {
        svg.selectAll("circle")
        	.transition().duration(5000)
        	.attr("r", function(d) {
          	return d.properties.pop_min / 1000000;
        	});
      }, 5000);
    });
    
    
  </script>  
</body>

https://d3js.org/d3.v5.min.js