0

I have come across this question, and I know there's no silver bullet, but I'm looking to make a chart along the lines of this NYTimes interactive

enter image description here

I see via the inspector that it's made using canvas. I wonder, was there a single compelling reason for this? Would the same chart + animation be performant in SVG? Or is the general rule that canvas should be used for animation this complex?

Community
  • 1
  • 1
Sam Selikoff
  • 12,366
  • 13
  • 58
  • 104

3 Answers3

1

I don't know about performance, but there are various reasons why one might be chosen over another. Here's a page that gives you the run-down on the differences. This might explain their decision:

http://www.htmlgoodies.com/html5/other/html5-canvas-vs.-svg-choose-the-best-tool-for-the-job.html#fbid=uWFouE4ztEY

Of course, other factors come into play, such as data sources, etc... For instance, SVG seems tempting if you're getting a big chunk of data from the server, as you can format it as an XML and serve it up.

Also, the decision could be much more banal; it could simply be what they knew, had tools for, or the thing for which they could find documentation most quickly.

Sadly, not all software decisions are made on merit. Decisions are often much more opportunistic and rushed.

R. Barzell
  • 666
  • 5
  • 24
  • Thanks. @mbostock was one of the authors of the visualization, and I know he defaults to SVG when possible, which is one reason I was curious. – Sam Selikoff Mar 05 '14 at 23:01
1

My personal experience basically adheres to the following:

Use SVG when there are shape elements (circles.rect,ellipse,paths, polygons) that rquire individual events attached(onclick,mouseover,etc.)

Use CANVAS when you can access pixels to present the graphic. The pixel control allows sophisticaed graphics not possible with SVG, and in many cases much more effvicient.

Just my input...

Francis Hemsher
  • 3,478
  • 2
  • 13
  • 15
  • How would you categorize [the chart from my question](http://www.nytimes.com/interactive/2012/11/07/us/politics/obamas-diverse-base-of-support.html)? – Sam Selikoff Mar 06 '14 at 04:24
  • Canvas, because there is no user-interaction with the dynamic data elements, plus no need to zoomi-n to vector to view data – Francis Hemsher Mar 06 '14 at 18:34
1

Yes, make it by <canvas>.

SVG vs canvas: how to choose:

  • SVG: High Fidelity Complex Vector Documents for Viewing and Printing, Static Images
  • <canvas>: Complex scenes and real time animations, High performance (filter, ray tracers), video manipulation.

Visit SVG vs canvas: how to choose for more details.

Dong
  • 11
  • 1