Intense. Simple. Word-sized.

In his book Beautiful Evidence, Edward Tufte describes sparklines as “intense, simple, word-sized graphics.” He goes on:

These little data lines, because of their active quality over time, are named sparklines – small, high-resolution graphics usually embedded in a full context of words, numbers, images. Sparklines are datawords: data-intense, design-simple, word-sized graphics.

The simplicity and utility of sparklines explain why they are representative of Tufte’s approach to the presentation of information:

  • They have very high resolution.
  • They don’t obscure the content, but rather augment and contextualize it.

I’ve been thinking about how to incorporate these beautiful little “datawords” into our team’s data visualization site. As a content strategist who designs with words every day, the idea that there’s something called a dataword is just too enticing. I’ve been thinking about the possibilities since Tufte’s Portland workshop.

Of course the wordlike qualities of sparklines create the wonderful possibility of writing with data graphics.

So what are the appropriate conditions for using these lovely little charts?

Appropriate conditions for sparklines

Most of the data we publish is presented in the form of interactive SVG charts driven by D3, but we also have legacy static charts that are difficult for our team to maintain. This is largely due to the fact that the charts were created in Sketch, which is only available on macOS (we have Windows machines).

Sparklines seem like a great way to present this data, when:

  1. The overall trend is more important than individual data points or values.
  2. The data must be updated or otherwise maintained, at least annually.

Here’s an example. This chart shows the unappropriated balance of the Abandoned Mine Land (AML) fund over time:

Growth of the AML fund’s unappropriated balance

Alternatively, we can present this data in the form of a sparkline, which shows the AML fund’s unappropriated balance has grown significantly over the past 30 years: $436 million $2.38 billion.

Now, this still isn’t perfect; the height, width, and the interpolation (curve) values must be such that variations in the data aren’t exaggerated or diminished.

For example, in the sparkline above, the largest value in the data is mapped to a height of 25px. If I change this value to 17px, we can see it diminishes the visual impact of the trend compared to the instance above.

sparkline with reduced height changes the visual impact of the sparkline

The data

The sparkline is drawn by D3, referencing 30 years of AML fund data in the form of a .csv file. Jekyll, which is the static site generator that powers this blog, can read into that data file when placed in the _data directory. Since that directory doesn’t get shipped to the actual site when deployed (in the form of the _site directory), the data needs to be in a place where D3 can also access it after Jekyll has built the site.

Rather than maintain redundant data files in two places in the directory (one for Jekyll, one for D3), I can loop over the .csv file in the _data directory and save it as a .json file in a new data directory. This works great, because D3 prefers the data in json format anyway.

[{% for item in site.data.aml-fund %}
  {
    "year": "{{ item.year }}",
    "amount": "{{ item.amount }}"
  }{% if forloop.last == false %},{% endif %}
{% endfor %}]

This means we have just one canonical data source (the csv file), but we can still convert and surface the data in other formats on site build.

Sparks my interest

Sparklines reinforce the idea that the simplest solution is often the most effective one. Compared to the current static chart we have for AML fund data, the sparkline conveys the same message, accurately, in much less space. It’s easy to understand the trend. The data in the chart is now trivial to update. And we can reuse the pattern over and over (where it makes sense).

With sparklines, we can take advantage of the resolution of typography, while efficiently situating a single data point in the context of time.

Hat tip to tnoda.com and Kin Lane on D3 sparklines and data management in Jekyll, respectively.