d3.js graphs output into high resolution print quality files?

user1518600 picture user1518600 · Oct 4, 2012 · Viewed 18.1k times · Source

Is there a way to output graphs, charts, maps etc created in html/js based on d3.js into other data format with publication print quality high resolution?

The graphics of these charts are fantastic but would be useless when printed on paper and got highly pixelated. I am trying to avoid replotting them in Illustrator for vectors or photoshop.

The output formats that I'm looking for should be readable to Illustrator or Photoshop. And most preferably without much more visual manipulation needed once exported. It would really be defeats the purpose if I would have to replot or refill color or rephotoshop it to get the effect.

Thanks!

Answer

Bill picture Bill · Oct 4, 2012

There are more complicated methods but a quick, easy way is to just copy the svg element from the DOM (you may need to include your css files as well), paste it into a file and save it with the extension .svg. After that you can open it in a vector editor.

There are also ways to convert the d3.js output to a png file as well. Somebody put together a jsfiddle of doing this with canvg at http://jsfiddle.net/plaliberte/HAXyd/.