Force-directed cartogram

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

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    const width = 960
    const height = 500
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height)

d3.json("municipios.json", function(data){
      console.log(data[1])
      
      const extent = d3.extent(data, d=> d.pop2017)
      const maximo = extent[1]
      const escalaCor = d3.scaleLinear()
      const projecao = d3.geoMercator()
      const tamanho = d3.scaleSqrt().range([0, maximo]).domain([1,30])
      
      const simulacao = d3.forceSimulation()
    		.force('center', d3.forceCenter(width / 2, (height - maximo) / 2))
    		.force('collision', d => tamanho(d.pop2017))
    		.force('x', d3.forceX(d => projecao([d.lon,d.lat])[0]).strength(0.0125))
    		.force('y', d3.forceY(d => projecao([d.lon,d.lat])[1]).strength(0.0125))
      	.nodes(data)
      
      const circulos = svg.selectAll("circle.node")
    		.data(data)
    		.enter()
    		.append("circle")
    		.attr("class", "node")
      	.style('fill', 'yellow')
    		.style("stroke-width", 2)
      
      simulacao.on("tick", ticked)
      
      function ticked(){
        d3.selectAll("circle.node")
      		.attr("cx", d => projecao([d.lon,d.lat])[0])
      		.attr("cy", d => projecao([d.lon,d.lat])[1])
      }

})

</script>
</body>

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