How To Handle Collisions In Beeswarm Plot In D3?

I've been playing around with this example here for a little while. What I'm trying to do is highlight a single node/circle in the plot (by making it larger with a border; later I

Solution 1:

This is a slightly different problem than in this question here: How to change the size of dots in beeswarm plots in D3.js

You have a few options that I can think of:

• Set the forceCollide to be your largest possible radius * 1.33, e.g. (r + 4) * 1.33. This will prevent overlapping, but spread things out a lot and doesn't look that great.
• Add the radius property to each entry in your array and make the collide work based off that, which will look a bit better but not perform as awesomely for large sets.

Here's an example of how to do that:

...
d3.csv("co2bee.csv", function(d) {
    if (d.countryName === "Bhutan") {
      d.r = r + 4;
    } else {
      d.r = r;
    }
    return d;
}, function(error, data) {
    if (error) throw error;
    var dataSet = data;
...
var simulation = d3.forceSimulation(dataSet)
  ...
  .force("collide", d3.forceCollide(function(d) { return d.r * 1.33; }))
  ...

countriesCircles.enter()
    .append("circle")
    .attr("class", "countries")
    .attr("cx", 0)
    .attr("cy", (h / 2)-padding[2]/2)
    .attr("r",  function(d){ return d.r; })
....

Use the row function in d3.csv to add a property to each member of the array called r, and check the country name to determine which one gets the larger value. Then use that value wherever you need to mess with the radius.

I guess it would've been possible to check the country name everywhere the radius was impacted (e.g. .force("collide", d3.forceCollide(function(d) { return d.countryName === "Bhutan" ? (r + 4) * 1.33 : r * 1.33; }), etc.). This feels a bit cleaner to me, but it might be cleaner still by abstracting out the radius from the data entries themselves...

Forked your plunk here: https://plnkr.co/edit/Tet1DVvHtC7mHz91eAYW?p=preview