search

vlandham / bubble_chart_v4

d3v4 implementation of bubble charts.
Other
60 stars 68 forks source link

Grouping different bubble colors together #5

Open lorenries opened 6 years ago

lorenries commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

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 commented 6 years ago

very nice! thanks for posting your solution to this.