World population - geo-informed circle packing

An attempt to mix a circle packing layout with a geographical map. Population data is represented by a bubble for each country, which is then colored, grouped and displaced onto the map according to the continent it belongs to (there are a few dubious attributions, you can read about them here).

This expands upon this world map and this bubble chart, using a technique shown here to manage collisions.

Data from Natural Earth & data.worldbank.org.

xxxxxxxxxx
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>World population - geo-informed circle Packing</title>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
  <script src="https://d3js.org/d3-geo-projection.v2.min.js"></script>
  <script src="//d3js.org/topojson.v2.min.js"></script>
  <script src="https://unpkg.com/d3-force-attract@latest"></script>
  
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <script src="index.js"></script>
</body>
</html>
    

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

https://d3js.org/d3-selection-multi.v0.4.min.js

https://d3js.org/d3-geo-projection.v2.min.js

https://d3js.org/topojson.v2.min.js

https://unpkg.com/d3-force-attract@latest