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 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.
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.
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
*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).