Exoplanets: Turning a Static Visualization Into an Interactive

Lane Harrison

published on June 25, 2012 in Storytelling

Static infographics can be great for telling a story. They show the important information all laid out for a viewer to see at a glance. But sometimes, an interactive infographic can do an even better job: interactives can get the main point across at one glance, and augment the main plot with additional data that can help strengthen the story.

Last Week, Randall Munroe of the ever-popular xkcd, posted a new comic showing all 786 known planets drawn to scale as circles of varying size and color. The visualization is simple and effective, making the point that many planets are quite similar to planets found in our own solar system, and that advances in astronomy technology will likely lead to many more discoveries, like finding what types of environments these planets have.

Browse more data visualizations.

Exoplanets are planets that have been discovered outside our solar system. The comic includes 786 planets: all 778 exoplanets, plus our 8 (sorry, Pluto). Munroe arranges these in a bubble chart that has each planet drawn to scale and a simple discrete color map also representing size. The use of both color and circle size to represent planet size is a good design choice, since viewers can get a better sense of the distribution of sizes through the color scale. If the circles were all the same color, it would be difficult to pick out the several largest circles. But the comic, which has the largest circles in red, makes judging the quantity of a size category simple.

Adding Interactivity

Why remake something that is already made? Put simply, an interactive visualization lets a viewer more deeply explore the story the xkcd comic tells. Also, given its simplicity, the comic design — a bubble chart and simple color scale — was straightforward to replicate.

Exoplanets: an interactive version of XKCD 1071

by codementum. Browse more data visualizations.


The Data

Access to the data remained a stumbling block until someone posted a link to The Extrasolar Planets Encyclopaedia (EPE). The EPE maintains an interactive exoplanet data table, complete with CSV export. After a round of Data Wrangler, the data was in JSON format and ready to visualize.

The Functionality

In addition to coloring planets by scale, viewers can color planets by their distance to the nearest star. In this view, few planets are blue, which means most planets are actually fairly similar to Earth in terms of their distance to a “sun”. The default view is similar to the xkcd comic (colored by size), with the difference that viewers can now mouse over each planet to get a few more details, such as the planet’s size relative to Earth.

Visually, one distinct advantage to Munroe’s hand-drawn approach is that he has more control over the positioning of the elements. Our solar system is easily placed in the center of the drawing, to better fit the story. On the other hand, the interactive version is (mostly) at the mercy of the built-in layouts. Fortunately d3.js has many different layout options, including force directed methods.

The interactive is intended to serve as a supplement to Munroe’s comic, which conveys a thoughtful message and has sparked discussions on planet discovery in several corners of the Internet. Storytelling and interactive visualization can lead to interesting and memorable discoveries when combined (as they should be).

Lane Harrison is a PhD Computer Science Visualization student at UNCC. In his free time he creates visualization side projects at codementum.org.

Download our exclusive eBook to learn how to make your content work harder.