3

Does anyone know a javascript library that can replicate NYTimes GREAT swing state visualisation:

enter image description here

http://www.nytimes.com/interactive/2012/10/15/us/politics/swing-history.html?ref=politics

VividD
  • 10,456
  • 6
  • 64
  • 111
Mathias
  • 31
  • 2

2 Answers2

2

Yes. Since Michael Bostock (creator of d3) now works at NY Times, I'm assuming you're going to want to use d3. There's an examples page on the GitHub repo. ;-)

https://github.com/mbostock/d3/wiki

Here's the gallery page:

https://github.com/mbostock/d3/wiki/Gallery

Vinay
  • 6,204
  • 6
  • 38
  • 55
  • Thanks. I have has a look at the examples in the the gallery of the d3 library, but cant find something that looks like the NYTimes visualization. Are you sure this visualization is posted there? – Mathias Nov 08 '12 at 09:43
  • It's likely a custom visualization that you will need to build from other d3 components, but I definitely see remnants of the d3 library in there. I would try to help you some more, but it appears all the javascript on the site has been thrown into this lovely all.js file that has been minified to the point of being unreadable. :-( – Vinay Nov 08 '12 at 09:47
  • Thanks Vinay, I was afraid that was the case. It's probably above my expertise. Do you, or anyone else, know of other libraries with similar charts of similar quality? – Mathias Nov 08 '12 at 10:14
  • I think d3 is your best bet for something similar to that page to be honest (I'm willing to bet that that's what that page uses). But there is also highcharts and rickshaw (by shutterstock). Neither of those will get you the effect that you see on that page though. Not as elegantly anyhow. I'm sorry I can't be of much more help. :-\ – Vinay Nov 08 '12 at 10:18
  • Thanks for you help! I guess i just have to learn to code properly :) – Mathias Nov 08 '12 at 10:21
1

Sankey diagrams might be your best bet. They show how values split and recombine over the stages of a process. I just used the d3 library for a visualization of Senate nominations. (In this case, the output was converted form d3 to Raphael for final product.)

d3 Sankey diagram example

You just need to arrange data as a series of nodes and links, though any circular links will fool the algorithm.

Chris Wilson
  • 6,599
  • 8
  • 35
  • 71