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

Question

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 1

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

Answer 2

Modern browsers support the download attribute on links. If you create a link to an image with the download attribute, the browser will download it instead of opening it within the browser.

Since there's no actual file to download, what you have to do is to encode your svg string as a data-uri, All you have to do is...

var download = d3.select("body").append("a").attr("href", "#")  download.on("click", function(){       d3.select(this)         .attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select("#viz").html()))         .attr("download", "viz.svg")      }) 

You can see a demo here http://bl.ocks.org/3831266 you can open the downloaded file in illustrator without any problems.

There are a couple of gotchas however: you must declare your styles inline (you can't style with an external css stylesheet).

A quick and dirty solution is to output the svg code to an alert box:

download.on("click", function(){   alert(d3.select("#viz").html()) }); 

And copy the alert into a text file and save as svg.