epubjs
Version:
Render ePub documents in the browser, across many devices
3 lines (2 loc) • 8.33 kB
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xmlns:m="http://www.w3.org/1998/Math/MathML" xmlns:pls="http://www.w3.org/2005/01/pronunciation-lexicon" xmlns:ssml="http://www.w3.org/2001/10/synthesis" xmlns:svg="http://www.w3.org/2000/svg"><head><title>Chapter 13. Exporting</title><link rel="stylesheet" type="text/css" href="core.css"/><meta name="generator" content="DocBook XSL Stylesheets V1.76.1"/><link rel="up" href="index.html" title="Interactive Data Visualization for the Web"/><link rel="prev" href="ch12.html" title="Chapter 12. Geomapping"/><link rel="next" href="apa.html" title="Appendix A. Appendix: Further Study"/></head><body><section class="chapter" title="Chapter 13. Exporting" epub:type="chapter" id="_exporting"><div class="titlepage"><div><div><h2 class="title">Chapter 13. Exporting</h2></div></div></div><p>Sometimes you need to take your visualization beyond the browser, such as when you’re asked to present your work in a TED talk or in your first solo show at MoMA.</p><p>Here are three easy ways to get D3 visualizations out of D3 and into formats suitable for other, noninteractive media. D3 has no explicit “export” function built in (although some people have built their own), so what follows are simple techniques that will work for any SVG image in a web browser.<a id="ix_dvexp" class="indexterm"/><a id="ix_expvis" class="indexterm"/></p><div class="sect1" title="Bitmaps"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_bitmaps">Bitmaps</h2></div></div></div><p>The easiest and lowest-quality option is, obviously, to take a screenshot. Depending on your operating system, this can be done using the Print Screen button on a PC, or ⌘-Shift-4 on the Mac. (Drag those crosshairs over the area you want to capture, release, and check your desktop for a PNG image.)<a id="I_indexterm13_id319710" class="indexterm"/></p><p><a class="xref" href="ch13.html#bitmap_export" title="Figure 13-1. A PNG screenshot">Figure 13-1</a> is a bitmap screenshot I made using the latter technique.</p><div class="figure"><a id="bitmap_export"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject13_id319735"/><img src="httpatomoreillycomsourceoreillyimages1614868.png.jpg" alt="A PNG screenshot"/></div></div><div class="figure-title">Figure 13-1. A PNG screenshot</div></div><p>This is easy and quick, but generates a bitmap image at screen resolution. So, as you can see, the image won’t scale up nicely, nor print with sharp edges. This approach is probably suitable only for reuse on-screen. (The exception to this is if you have a super high-res display, then the resolution will be much finer.)</p></div><div class="sect1" title="PDF"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_pdf">PDF</h2></div></div></div><p>Portable Document Format documents can contain vector-based artwork, such as SVG images, so exporting to PDF gives you a quick, scalable copy of your visualization (see <a class="xref" href="ch13.html#pdf_export" title="Figure 13-2. A PDF maintains the original vector data for clarity">Figure 13-2</a>).<a id="I_indexterm13_id319786" class="indexterm"/></p><div class="figure"><a id="pdf_export"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject13_id319804"/><img src="httpatomoreillycomsourceoreillyimages1614869.png" alt="A PDF maintains the original vector data for clarity"/></div></div><div class="figure-title">Figure 13-2. A PDF maintains the original vector data for clarity</div></div><p>On the Mac, in your browser, go to File→Print. Then look for the PDF menu, and choose Save as PDF.</p><p>On Windows or Linux, you might need to install a third-party utility to enable print-to-PDF functionality. (I’ve heard doPDF for Windows works, and it’s free.)<a id="I_indexterm13_id319830" class="indexterm"/></p></div><div class="sect1" title="SVG"><div class="titlepage"><div><div><h2 class="title" style="clear: both" id="_svg">SVG</h2></div></div></div><p>Finally, it probably occurred to you that, because we are using D3 to generate images in SVG format, why not just save out a copy of the SVG image? This has all the benefits of PDF: You maintain the original vector data, it’s scalable, and you can even bring the results into Illustrator or another SVG-compatible editor and tweak it after the fact. (This is true to a certain extent for PDF files as well, but depending on the PDF generator, sometimes elements get grouped and layered in unexpected ways.)<a id="I_indexterm13_id319857" class="indexterm"/><a id="I_indexterm13_id319867" class="indexterm"/></p><p>The simplest way is to simply copy the SVG code straight out of the DOM (see <a class="xref" href="ch13.html#copy_the_svg" title="Figure 13-3. Copying the D3-generated SVG code from the DOM">Figure 13-3</a>). First, inspect the SVG element. Click the element in the web inspector, and then click Copy.</p><div class="figure"><a id="copy_the_svg"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject13_id319892"/><img src="httpatomoreillycomsourceoreillyimages1614870.png" alt="Copying the D3-generated SVG code from the DOM"/></div></div><div class="figure-title">Figure 13-3. Copying the D3-generated SVG code from the DOM</div></div><p>Switch back to your text editor, and paste the contents into a new file, as shown in <a class="xref" href="ch13.html#paste_the_svg" title="Figure 13-4. SVG code pasted into a new document">Figure 13-4</a>.</p><div class="figure"><a id="paste_the_svg"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject13_id319927"/><img src="httpatomoreillycomsourceoreillyimages1614871.png" alt="SVG code pasted into a new document"/></div></div><div class="figure-title">Figure 13-4. SVG code pasted into a new document</div></div><p>Then just save the file as <span class="emphasis"><em>something.svg</em></span>. Now you can open it up in Illustrator, as shown in <a class="xref" href="ch13.html#svg_in_illustrator" title="Figure 13-5. Exported SVG opened in Illustrator">Figure 13-5</a>, or any other SVG-compatible program.</p><div class="figure"><a id="svg_in_illustrator"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject13_id319965"/><img src="httpatomoreillycomsourceoreillyimages1614872.png" alt="Exported SVG opened in Illustrator"/></div></div><div class="figure-title">Figure 13-5. Exported SVG opened in Illustrator</div></div><p>As you can see in <a class="xref" href="ch13.html#edit_the_svg" title="Figure 13-6. SVG elements selected and highlighted">Figure 13-6</a>, all of the elements remain individually selectable and editable. In the version shown in <a class="xref" href="ch13.html#edited_svg_in_illustrator" title="Figure 13-7. My groundbreaking image, made even more so with some manual touch-ups">Figure 13-7</a>, I’ve made some Tuftean enhancements to my design, adding variable-weight strokes and a neutral, lavender fill for a visually “calming” effect. (To be clear, this is a joke, and neither Tufte nor I endorse this approach.)</p><div class="figure"><a id="edit_the_svg"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject13_id320012"/><img src="httpatomoreillycomsourceoreillyimages1614873.png" alt="SVG elements selected and highlighted"/></div></div><div class="figure-title">Figure 13-6. SVG elements selected and highlighted</div></div><div class="figure"><a id="edited_svg_in_illustrator"/><div class="figure-contents"><div class="mediaobject"><a id="I_mediaobject13_id320043"/><img src="httpatomoreillycomsourceoreillyimages1614874.png" alt="My groundbreaking image, made even more so with some manual touch-ups"/></div></div><div class="figure-title">Figure 13-7. My groundbreaking image, made even more so with some manual touch-ups</div></div><p>As you can see, there are many options for getting your work out of the browser, documented, and saved for use in other contexts, whether for print or for the screen.<a id="I_indexterm13_id320064" class="indexterm"/><a id="I_indexterm13_id320071" class="indexterm"/></p></div></section></body></html>