How to make a good scatter plot (bubble chart)?

Question

A nytimes.com graphic that I recently visited shows a nice way to draw scatter plots. I wanted to know more about how to make such plots. I would also like to have recommendations on open source or freeware softwares that are out there, which can accomplish this task.

The following is an example problem: plot a bubble chart, for a certain type of actuator, representing the force generated by the actuator on the y-axis, the year it was introduced on the x-axis and the volume of the actuator being represented by the area of the bubble.

The best solution that I currently have is amcharts (from amcharts.com). But the results are no where close to the nytimes.com graphic.

Answer 1

As Scott said, the chart is all done using HTML5 canvas.

Here's a good tutorial on how to do something similar (and you don't need any software!): Create an interactive bubble chart with HTML5 canvas

Also, Zingchart is a free tool you can download and use.

And here is a good list of Chart and Graph plotting javascript plugins. They have a bit of everything, but some of them can be adapted for bubble charts (gRafael maybe?). Good luck!

Answer 2

Check out morris.js http://oesmith.github.com/morris.js/

Answer 3

The New York Times use D3 (short for Data Driven Documents) for most of their interactive data graphics, including this one. It's a javascript library that draws SVG shapes* and includes loads of fancy visualisation-friendly stuff.

D3 is awesome for data-driven interactive graphics The only drawbacks are:

• The really big one (difficult workaround below): D3 (actually, anything SVG) doesn't work at all in any version of Internet Explorer earlier than version 9 (the very latest one), so depending on the demographics of your audience, around 15%-50% of people may see nothing at all
• You need to be comfortable coding in javascript. That said, the docs and support available are good: lots of people in the D3 community are designers or statisticians first, programmers second, so it's not too painful a learning curve for a designer not used to programming. For someone keen, it's probably as good a place to start as any

You can get around the Internet Explorer issue by piping the D3 output through Raphael, which is another great javascript library for drawing interactive vectors on any browser from IE6 upwards (the only thing I know of where it doesn't work is old Android browsers). You'll need good javascript knowledge to do this, Raphael's documentation is really pretty bad, and what I'm describing isn't a simple challenge since Raphael and D3 interact with the shapes they create in very different ways - we're getting into StackOverflow.com territory here.

But, if a designer was to learn anything programming related, learning Raphael is a good investment (though probably not the best place to start for a beginner). As well as generating visualisations, you can design SVG vector graphics in Illustrator or Inkscape, pipe them into Raphael, and then you can do all sorts of things with them online without worrying much about browser compatibility.

---

*SVG in the browser is slightly different to HTML5 Canvas: put very simply, it's better for making vector shapes that are interactive, but they are more memory intensive. In general, SVG is better for graphics like that NYT facebook chart, worse for graphics like those linked to here