: How to make a good scatter plot (bubble chart)? 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

@Kaufman565

This New York Times graphic uses D3 (short for Data Driven Documents), plus a splash of HTML5 canvas to boost performance. D3 is probably the best thing going for interactive visualisations.

NYT use D3 for most of their interactive visualisations - which tend to win most awards going - and even hired D3's author Mike Bostock as a Graphics Editor. They sometimes even use D3 to generate vector graphics in a browser which they then transfer to Illustrator to use in print.



D3 is a javascript library that draws SVG shapes* and includes loads of very sophisticated visualisation-friendly features.

That said, this particular graphic is unusual in that it uses a mixture of SVG from D3 plus HTML5 canvas for the circles - probably because HTML5 canvas performs better with lots and lots of shapes. Here's a more typical example of a NYTimes D3 bubble-based chart: Four Ways to Slice Obama’s 2013 Budget Proposal.

Other than sometimes slow performance with huge numbers of shapes, the drawbacks of D3 are:


The really big one (difficult workaround below): D3 (actually, anything SVG) doesn't work at all in Internet Explorer 8 or earlier, so depending on the demographics of your audience, around 5%-25% of people may see nothing at all
You need to be comfortable coding in javascript. That said, the docs and support available are very good. Many people in the D3 community are designers or statisticians first, programmers second, so it's not too painful a learning curve. If you're a designer interested in learning interactive coding and javascript, it's probably as good a place to start as any.


You can get around the Internet Explorer issue by using D34Raphael, a modified variant on D3 that pushes the D3 output through Raphael, which is a javascript library for drawing interactive vectors on any browser from IE6 upwards (doesn't work on old Android phones but works on virtually everything else).

D34Raphael is harder and not so well documented - don't start here! It's something to attempt once you've got the hang of regular D3 and are confident with Javascript.



*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. HTML5 canvas draws pixels on the canvas then forgets about them (unless you use some framework like Fabric.js), SVG draws vector shapes that are each elements that you can easily bind events to like divs.

In general, SVG is better for graphics with lots of interactivity with each element, HTML5 is better for graphics with large numbers of elements that each have simple behaviour (this page links to some good examples).

Vote Up Vote Down

@Rambettina927

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

Vote Up Vote Down

@Ravi4787994

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!

Vote Up Vote Down