Export d3js drawings as SVG/PDF/PNG

[gordon]

Hello,

I was missing one feature of exporting the d3js drawings to PDF/PNG (needed for users to be able to embed graphics in their presentations or documents).

I couldn't find any existing examples, so I developed one.

online demo is here: http://d3export.cancan.cshl.edu/

code is here: https://github.com/agordon/d3export_demo

Currently it uses a server-side script to convert SVG to PDF, but perhaps in the future this could be client-side.

Comments are welcomed,

 -gordon

[Bob Monteverde]

Interesting.  I'll have to look further at this.  Currently SVG exportation is essentially automatic (just copy the DOM) but for PDF/PNG generation we use phantomJS successfully here.

Bob

[Lars Kotthoff]

> ...for PDF/PNG generation we use phantomJS successfully here.

If you're on a Mac, you can use wkpdf (http://plessl.github.com/wkpdf/) instead
of phantomjs to get "proper" PDFs. My gripe with phantomjs is that it really
only renders to a bitmap and then includes that in the generated PDF. wkpdf
preserves the HTML document better, i.e. text is still text in the PDF.

Lars

[Chris Viau]

You can do it client-side like this: http://bl.ocks.org/1209499

Chris Viau

[Chris Viau]

I used wkhtmltopdf with great success. The wkpdf cited here is a Ruby script, but there is another wkpdf project which is just a PHP wrapper for wkhtmltopdf. Some also use Batik, a bit old but convenient when you already use a Java environment.

[Bob Monteverde]

Strange, I believe text is text for me when using phantom with svg.  I'll have to double check, but it appears to preserve the vector shapes and text correctly.

Bob

[Praveen Kumar]

Hi Bob, can give any example code for converting the svg tag embed in html to a png using phantomjs. 

Thank you.

[lionel Lioninho]

Hi Chris,

I tried with Chrome to copy as HTML an svg tag and in the inspector console did  what you said : 

d3.select("body").append("div")

        .attr("id", "download")
        .style("top", event.clientY+20+"px")
        .style("left", event.clientX+"px")
        .html("Right-click on this preview and choose Save as<br />Left-Click to dismiss<br />")
        .append("img")
        .attr("src", "data:image/svg+xml;base64,"+ btoa(html));

with "html" being the copy of the "svg" code i had copied before but it isn't working though.

Any idea why it isn't working ? 

Thanks