Scatterplot with no overlaps (Mike's example for NYT)

[Raphael Cockx]

Hi all,

I'm highly fascinated by this lovely chart from the NYT: http://www.nytimes.com/interactive/2013/05/25/sunday-review/corporate-taxes.html

I've been looking at the code to see how it's build, but noticed a bit of cheating going on :) Instead of plotting the circles through their data and a scale, the data being loaded seems to specify both 'cx' and 'cy' coordinates. Should I learn from that there's really no way in D3 to build a scatterplot that automatically avoids overlaps between its nodes or is it rather a case of performance issues?

Also, I can't imagine someone had to go through all of these 500 nodes and adjust them by hand. So I guess there must be an offline script that was used?

Eager to learn,

Raphael

[Mike Bostock]

I used the force layout with collision detection [1] and then saved the computed positions using copy(d3.tsv.format(…)) in the JavaScript console. I saved the positions statically because the data is static and so there was no reason to do the layout on the client—and thus it’s faster to load. Also, I could verify that the layout was adequate and make any necessary hand-tweaks by dragging the nodes before saving.

Mike

[1] http://bl.ocks.org/mbostock/3231307

[Raphael Cockx]

Thanks for the quick reply! You just gave me a whole bunch of homework, but I like that :)

[Matthew Daniels]

Mike – I'm also a huge fan of this work and have been struggling to figure out how you arranged the nodes in ascending order by tax-rate. I'm familiar with the force and packing layout, but I can't quite figure out how to add an additional ordering or horizontal axis to the data.

[Kai Chang]

Multi-foci + collision detection example:

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

--
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/d/optout.

[Matthew Daniels]

Thanks Kim for the response! One thought - the Multi-Foci just seems to apply several centers for the nodes, to which they'll "attract". The nodes in the NY Times example are all perfectly arranged in ascending order. This seems to be a different effect, right?

[Kai Chang]

I see some 21% nodes to the left of 20% nodes in the NYT graphic, so it doesn't look perfectly arranged along the x-axis to me.

[Matthew Daniels]

You're probably right – but it's pretty damn accurate. We'll see if Mike responds – in the mean time, I'll be using the multi-foci layout!