Interactive Data Visualization for the Web, 2nd Edition

Chapter 15. Exporting

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.

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.

Bitmaps

The easiest and lowest-quality option is, obviously, to take a screenshot. Depending on your operating system, you can do this 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.)

Figure 15-1 is a bitmap screenshot I made using ⌘-Shift-4.

Figure 15-1. A PNG screenshot

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

For visualizations that are too large to fit on your screen all at once, I like the Awesome Screenshot extension for Chrome. Awesome Screenshot can capture the entire page—in effect, scrolling up ...