Data visualization has become a more frequent element of our work at Viget. Be it simple pie charts or beautiful maps displaying jersey sales, visually representing data in a compelling way is a great device for storytelling and provides rich fuel for social sharing.

Yet making these illustrations fast, shareable, and accessible has its challenges. Although browsers are powerful, tightly coupling the rendering process to them greatly complicates the generation of images that can be shared or saved for presentations.

On The Jersey Report, Chris Jones (the original wizard) came up with a really great way to solve this problem using PhantomJS:

(Many thanks to Owen Shifflett for this gorgeous graphic)

The diagram above highlights a fundamental challenge: the DOM. In this system, PhantomJS produces an actual DOM and is responsible for rasterizing content into a PNG.

Moving beyond the DOM

Here at Viget, we've become huge fans of React. It gives us greater flexibility by working with a virtual representation of the DOM. When the DOM simply becomes an idea, instead of a requirement, rendering becomes just another implementation detail. This is particularly useful when rendering content server-side, loosely diagrammed below:

Now let's get started.

Building Portable Data Visualization

All of the code for this post is available on Github. We'll make a simple radar chart:

For this example I am using PathsJS, which makes it easy to calculate the paths for an SVG graphic without worrying about actual DOM manipulation (handled by React). These same techniques are equally as effective with D3, although we like to perform custom builds to cut out what isn't in use.

The core rendering of the chart is quite simple. Let's start by building the container for the chart: