Find centroid of topoJSON path and use it to position a circle in D3

Viewed 4024

In my data I have values associated with countries. I have created scaled circles for each country and would now like to position them at the centre of each country using cx and cy.

I have generated a map using topoJSON that has country-code 'ids' and I have matching country-codes in my data (cd).

{"type": "Polygon",
"id": 604,
"arcs": [
  [133, -473, -448, -378, -374, -413]
 ]
},

Using D3's path.centroid(feature), how can I find the centroid of each topoJSON path?

g.selectAll("circle")
    .data(cd)
    .enter()
    .append("circle")
    .attr("class", "bubble")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", function(d) {
      return r(+d.Value)
    })

g.selectAll("path")
  .data(topojson.object(topology, topology.objects.countries)
    .geometries)
  .enter()
  .append("path")
  .attr("d", path)

Full code here Plunker

2 Answers
Related