One dimensional bubble plot: best way to avoid overlaps

[pur...@gmail.com]

Hi,

I'm trying to create a one-dimensional bubble-chart similar to this mockup:

The dataset contains the x coordinate, the radius and the color of each bubble. In order to avoid overlapping circles, I'd like to scatter close circles through the y-axis, as the mockup shows.

Since I'm new to D3, I wonder what's the recommended way of doing this. I could just calculate the center-y position before plotting the circles, but maybe there is a better option (should I create a custom layout or something?).

Thanks,

Luis

[Ian Johnson]

I think it wouldn't be too much work to take a force layout (with collision detection) and only have the forces act on the y axis (keeping the x axis fixed). this would probably give you a layout you want.

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Ian Johnson - 周彦

http://enja.org

[Mike Bostock]

This example is pretty close to what you want:

  http://bl.ocks.org/mbostock/1804919

We did something similar in a recent NYT graphic:

  http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html

And I discuss this technique in my talk on force layouts:

  http://vimeo.com/29458354

Mike