Grouping different bubble colors together

[lorenries]

Hi Jim, thanks for the excellent tutorial! I'm wondering if you have a suggestion for how you could group together different color bubbles (or categories), kind of like how the NYT does it here, and have them stay grouped together when the view separates out different years.

[vlandham]

Ah yes. its a great feature of that graphic - and one that is ignored in this tutorial.
I haven't tried, but I think this could be accomplished with an forceY to position nodes along the Y axis based on their category.

You might have to do some work with the initial positioning of the nodes (i.e. not random positions - but start those of the same category close to one another).

It also might take some tweaking to make this force play nice with the other forces, but this is the approach i would try!

[lorenries]

Thank you! That ended up working well, especially with a linear scale for initial positioning. I ended up doing something like this:

var simulation = d3.forceSimulation()
  .force('y', d3.forceY(function(d) {
    var yScale = d3.scaleLinear().domain([1, numberOfCategories]).range([250,height-250]);
    return yScale(d.category)
  })

[vlandham]

very nice! thanks for posting your solution to this.