Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
3  
You realize that that particular link is built purely with HTML/CSS/Javascript right? It simply uses javascript to draw CSS-based circles at specific points relative to the graph boundaries. They aren't using any software specifically. It's all merely coded. –  Scott May 28 '12 at 19:48
    
Wow! No I hadn't realized that! I will look into the source. –  Shashank Sawant May 28 '12 at 21:26
    
HTML5 and CSS3 can do some incredible stuff :) –  Scott May 28 '12 at 21:36
    
Not quite true: They use the javascript visualisation library D3, then a layer of custom code unique to this visualisation built on that. See answer below. –  user568458 Aug 2 '13 at 9:45
add comment

3 Answers 3

up vote 4 down vote accepted

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

share|improve this answer
add comment

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!

share|improve this answer
add comment

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

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.