d3js/SVG Export demo
Commonly in science-related websites (and possibly many others), users need to save the generated visualization in vectorized format (e.g. PDF), to be able to incorporate the graphics in presentation or publications.
This website demonstate one possible method of saving d3js graphics to PDF.
See below for more technical details.
Technical detailsThis demo was developed by firstname.lastname@example.org.
- Use d3js to generate graphics, on an HTML5 SVG element
create_d3js_drawing()function in this HTML file.).
XMLSerializer.serializeToString()to extract the SVG/XML structure of the d3js drawing
show_svg_code()function in this HTML file).
- The SVG/XML data is submitted to the server's CGI script, which converts it to PDF/PNG and sends it back to the user as an attachment file to download
(server side, see Perl script).
- Saving files directly from the browser: not properly supported by all browsers, perhaps use FileSaver.js library
- Generating PDF on the client side: Create an adaptation layer between d3js and jsPDF library.
The following libraries were used
- d3js - data-driven documents
- Twitter's Bootstrap - web development framework
- Google-Code-Prettify - Javascip code prettifier (XML colorizing)
- libRSVG -SVG-to-PDF/PNG convertor (server-side).
- The server-side code is a bare-bones Perl/CGI script.. It basically runs
rsvg-convertand returns the result as an attachment to download. You can implement the same functionallity in any programming language.
- The entire code is available on GitHub, so fork me.