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!

Snavely

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

Ezra

Thank you for the recommendation, but I have no clue exactly what you mean. Are there more examples to demonstrate how to do each step? – Snavely

I think Bill means that you can open Developer Tools or Firebug, select the svg in the code inspector, copy it and paste it to a file. – Mucker

this seems to almost work for me. When I do this however it cuts out or cuts off some of my text. Any idea why? – Bartender

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.

Mucker

This works really well! I gleaned the attr("xmlns","http://www.w3.org/2000/svg") from your solution so that the image would load properly. Without that I received an xml error. – Anguilla

Answer 3

For my d3 graph the proposed solutions do not work well. Some of the properties of the resulting exporting SVG (for expample the gradients) are not rendered correctly and look very very different than what Chrome shows.

In my case the image was static, so a screenshot could have been enough. However, a screenshot is limited to the size of the monitor you are working on. However, I am happy I found an alternative solution, webkit2png: http://www.paulhammond.org/webkit2png/

This tool allows to create screenshots of websites as they look on a screen of arbitrary size. It's perfect for converting static d3 graphs. I hope it can help someone as it helped me.

Prejudice

Answer 4

If you are happy to save to a high resolution raster image, I've found the best solution is to use Pearl Crescent Page Saver, a Firefox addon:

https://addons.mozilla.org/en-US/firefox/addon/pagesaver/

The basic version gives you the option to scale the image - e.g. scaling to 200% will increase the resolution of the .png to double (4x as many pixels) what you'd get with a simple screenshot.

If you need the vectors, and loading the svg in Illustrator isn't working out for you, you could try rendering to a super hi res png, then using Illustrator's Live Trace...

Nealon