Bubble Map with leaflet and D3.js [problem] : bubbles overlapping

user_14755327 0
Viewed 115

I have a basic map here, with dummy data. Basically a bubble map.
The problem is I have multiple dots (ex:20) with exact same GPS coordinates. The following image is my csv with dummy data, color blue highlight overlapping dots in this basic example. Thats because many compagny have the same city gps coordinates.
enter image description here

enter image description here

Here is a fiddle with the code I'm working on :
https://jsfiddle.net/MathiasLauber/bckg8es4/45/ Many research later, I found that d3.js add this force simulation fonction, that avoid dots from colliding.

// Avoiding bubbles overlapping
    var simulationforce = d3.forceSimulation(data)

      .force('x', d3.forceX().x(d => xScale(d.longitude)))
      .force('y', d3.forceY().y(d => yScale(d.latitude)))
      .force('collide', d3.forceCollide().radius(function(d) {
        return d.radius + 10
      }))
  simulationforce
    .nodes(cities)
    .on("tick", function(d){
      node
       .attr("cx", function(d) { return projection.latLngToLayerPoint([d.latitude, d.longitude]).x;                 })
        .attr("cy", function(d) {return projection.latLngToLayerPoint([d.latitude, d.longitude]).y;                     })
    });

The problem is I can't make force layout work and my dots are still on top of each other. (lines: 188-200 in the fiddle).

If you have any tips, suggestions, or if you notice basic errors in my code, just let me know =D

Bunch of code close to what i'm trying to achieve
https://d3-graph-gallery.com/graph/circularpacking_group.html
https://jsbin.com/taqewaw/edit?html,output

d3.js leaflet javascript
1 Answers

There are 3 problems:

  1. For positioning the circles near their original position, the x and y initial positions need to be specified in the data passed to simulation.nodes() call.
  2. When doing a force simulation, you need to provide the selection to be simulated in the on tick callback (see node in the on('tick') callback function).
  3. The simulation needs to use the previous d.x and d.y values as calculated by the simulation

Relevant code snippets below

// 1. Add x and y (cx, cy) to each row (circle) in data 
const citiesWithCenter = cities.map(c => ({
  ...c,
  x: projection.latLngToLayerPoint([c.latitude, c.longitude]).x,
  y: projection.latLngToLayerPoint([c.latitude, c.longitude]).y,
}))
// citiesWithCenter will be passed to selectAll('circle').data()

// 2. node selection you forgot
 const node = selection
        .selectAll('circle')
        .data(citiesWithcenter)
        .enter()
        .append('circle')
...
// let used in simulation
 simulationforce.nodes(citiesWithcenter).on('tick', function (d) {
   node
     .attr('cx', function (d) {
            // 3. use previously computed x value 
            // on the first tick run, the values in citiesWithCenter is used
            return d.x
          })
     .attr('cy', function (d) {
            // 3. use previously computed y value 
            // on the first tick run, the values in citiesWithCenter is used
            return d.y
          })
})

Full working demo here: https://jsfiddle.net/b2Lhfuw5/

user_17738080
Related