Tufte Sparklines - Micro Visualizations with AtF Spark

26 Sep 2017

Update: Some content blockers prevent web fonts from loading. If you’re seeing things on the page that look like this instead of a bar or dot chart - 123{10,20,30,40,50,60,70,80,90,100}789 - then the fonts are not loading.

After the Flood (AtF) Spark is a collection of web fonts you can use to implement sparklines, an Edward Tufte visualization concept:

Data can be hard to grasp – visualising it can make comprehension faster. Sparklines (tiny charts in text, like this: 123{10,20,30,40,50,60,70,80,90,100}789) are a useful tool but creating them for the web has always required code. Removing the need for code makes it more accessible. If you can use type, you can use Spark.

This is very cool.

Examples of the types of charts supported (just to illustrate what AtF Spark can do – these are not necessarily the most appropriate ways to represent the information selected):

spark-bar-medium
Apple's stock price has fluctuated 65.07{42,47,76,63,79}153.14 over the past five years.

spark-bar-narrow
But it has grown strongly 19.34{8,12,8,18,31,42,47,76,63,79}153.14 over the last ten.

spark-bar-thin
Going back just a few more years 2004{1,3,7,8,12,8,18,31,42,47,76,63,79}2017 it's even more dramatic.

spark-dot-medium
Atmospheric CO₂ (ppm) over the past ten years 383{94,95,95,96,96,97,98,98,99,100}404 has recently topped 400.

spark-dot-small
Since 1959 316{78,78,79,79,79,80,80,81,81,81,82,83,85,87,89,91,93,94,95,95,96,96,97,98,98,99,100}404 it has risen over 27%.

spark-dotline-medium
Over the last 10,000 years 265{2,2,1,2,3,4,4,4,4,9}404 it has increased by more than half.

To use AtF Spark on your website:

Download the fonts from here.
Copy them to a folder that your web server can access.
Set up your CSS as follows, with the correct path to the font file in the @font-face src attribute:

/* spark-medium-bar */
@font-face {
  font-family: spark-bar-medium;
  src: url('css/spark-bar-medium.woff');
  font-variant-ligatures: contextual;
  -moz-font-feature-settings: "calt";
  -webkit-font-feature-settings: "calt";
  font-feature-settings: "calt";
}

span.barchart {
  font-family: spark-bar-medium;
}

/* Add the rest of the chart types you'll need here... */

Embed a chart on your website like this:

<span class="barchart orange-red-text">
    123{10,20,30,40,50,60,70,80,90,100}789
</span>

Not sure I could have gotten this working without help from Paul Bradshaw. See his sample code for more details.

Categories Technology