title: Fast and responsive interactive charts/graphs: SVG, Canvas, other?
body: <p>I am trying to choose the right technology to use for updating a project that basically renders thousands of points in a zoomable, pannable graph. The current implementation, using Protovis, is underperformant. Check it out here:</p>
  
  <p><a href="http://www.planethunters.org/classify" rel="noreferrer">http://www.planethunters.org/classify</a></p>
  
  <p>There are about 2000 points when fully zoomed out. Try using the handles on the bottom to zoom in a bit, and drag it to pan around. You will see that it is quite choppy and your CPU usage probably goes up to 100% on one core unless you have a really fast computer. Each change to the focus area calls a redraw to protovis which is pretty darn slow and is worse with more points drawn.</p>
  
  <p>I would like to make some updates to the interface as well as change the underlying visualization technology to be more responsive with animation and interaction. From the following article, it seems like the choice is between another SVG-based library, or a canvas-based one:</p>
  
  <p><a href="http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/" rel="noreferrer">http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/</a></p>
  
  <p><a href="http://d3js.org/" rel="noreferrer">d3.js</a>, which grew out of Protovis, is SVG-based and is <a href="http://mbostock.github.com/d3/tutorial/protovis.html" rel="noreferrer">supposed to be better at rendering animations</a>. However, I'm dubious as to how much better and what its performance ceiling is. For that reason, I'm also considering a more complete overhaul using a canvas-based library like <a href="http://www.kineticjs.com/" rel="noreferrer">KineticJS</a>. However, before I get too far into using one approach or another, I'd like to hear from someone who has done a similar web application with this much data and get their opinion.</p>
  
  <p>The most important thing is performance, with a secondary focus on ease of adding other interaction features and programming the animation. There will probably be no more than 2000 points at once, with those small error bars on each one. <strong>Zooming in, out, and panning around need to be smooth.</strong> If the most recent SVG libraries are decent at this, then perhaps the ease of using d3 will outweigh the increased setup for KineticJS, etc. But if there is a huge performance advantage to using a canvas, especially for people with slower computers, then I would definitely prefer to go that way.</p>
  
  <p>Example of app made by the NYTimes that uses SVG, but still animates acceptably smoothly:
  <a href="http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html" rel="noreferrer">http://www.nytimes.com/interactive/2012/05/17/business/dealbook/how-the-facebook-offering-compares.html</a> . If I can get that performance and not have to write my own canvas drawing code, I would probably go for SVG.</p>
  
  <p>I noticed that some users have used a hybrid of <a href="https://stackoverflow.com/questions/12098286/canvas-tooltip-to-appear-outside-canvas">d3.js manipulation combined with canvas rendering</a>. However, I can't find much documentation about this online or get in contact with the OP of that post. If anyone has any experience doing this kind of DOM-to-Canvas (<a href="http://bl.ocks.org/1276463" rel="noreferrer">demo</a>, <a href="https://gist.github.com/1276463" rel="noreferrer">code</a>) implementation, I would like to hear from you as well. It seems to be a good hybrid of being able to manipulate data and having custom control over how to render it (and therefore performance), but I'm wondering if having to load everything into the DOM is still going to slow things down.</p>
  
  <p>I know that there are some existing questions that are similar to this one, but none of them exactly ask the same thing. Thanks for your help.</p>
  
  <p><strong>Follow-up</strong>: the implementation I ended up using is at <a href="https://github.com/zooniverse/LightCurves" rel="noreferrer">https://github.com/zooniverse/LightCurves</a></p>