Sparklines

A sparkline is a word-sized data visualization, such as or , allowing visual representations of data to be embedded directly in prose. This avoids any interruption in the flow of text, with the data presented in descriptive context. Sparklines can be used where space is limited, unlike standalone figures.

The necessarily-small size of sparklines introduces special constraints on their design: minimalist designs that show data as succinctly as possible are favored. For example, the win-loss record of a baseball team might be use up-ticks for wins and down-ticks for losses: . Similarly, rather than using axes, ticks, labels and a legend for a line chart, a sparkline can show a single-series trend simply as . This particular design comes from Edward Tufte, with red dots () to emphasize start and end, and blue dots () for minimum and maximum.

Next: Bullet Charts

Source

<script type="text/javascript+protovis">

/** A simple sparkline with optional dots. */
function sparkline(data, dots) {
  var n = data.length,
      w = n,
      h = 10,
      min = pv.min.index(data),
      max = pv.max.index(data);

  var vis = new pv.Panel()
      .width(w)
      .height(h)
      .margin(2);

  vis.add(pv.Line)
      .data(data)
      .left(pv.Scale.linear(0, n - 1).range(0, w).by(pv.index))
      .bottom(pv.Scale.linear(data).range(0, h))
      .strokeStyle("#000")
      .lineWidth(1)
    .add(pv.Dot)
      .visible(function() (dots && this.index == 0) || this.index == n - 1)
      .strokeStyle(null)
      .fillStyle("brown")
      .radius(2)
    .add(pv.Dot)
      .visible(function() dots && (this.index == min || this.index == max))
      .fillStyle("steelblue");

  vis.render();
}

/** An uptick/downtick sparkline for binary data. */
function sparktick(data) {
  var w = data.length * 2,
      h = 11;

  var vis = new pv.Panel()
      .width(w)
      .height(h);

  vis.add(pv.Rule)
      .bottom(h / 2)
      .strokeStyle("#870")
    .add(pv.Rule)
      .data(data)
      .left(function() 2 * this.index)
      .bottom(function(d) d ? h / 2 : 0)
      .height(h / 2);

  vis.render();
}

/** A sparkline bar chart. */
function sparkbar(data) {
  var w = 60,
      h = 12;

  var vis = new pv.Panel()
      .width(w)
      .height(h);

  vis.add(pv.Bar)
      .data(bars)
      .width(4)
      .left(function() 5 * this.index)
      .height(function(d) Math.round(h * d))
      .bottom(0);

  vis.render();
}

/** A small colored dot. */
function dot(color) {
  new pv.Panel()
      .width(6)
      .height(9)
    .anchor("center").add(pv.Dot)
      .strokeStyle(null)
      .fillStyle(color)
      .radius(2)
    .root.render();
}

</script>

A sparkline is a word-sized data visualization, such
as <script type="text/javascript+protovis">sparkline(sunspots);</script>
or <script type="text/javascript+protovis">sparkbar(bars);</script>, allowing
visual representations of data to be embedded directly in prose. This avoids any
interruption in the flow of text, with the data presented in descriptive
context. Sparklines can be used where space is limited, unlike standalone
figures.

<p>The necessarily-small size of sparklines introduces special constraints on
their design: minimalist designs that show data as succinctly as possible are
favored. For example, the win-loss record of a baseball team might be use
up-ticks for wins and down-ticks for losses: <script
type="text/javascript+protovis">sparktick(random(150));</script>. Similarly,
rather than using axes, ticks, labels and a legend for a line chart, a sparkline
can show a single-series trend simply as <script
type="text/javascript+protovis">sparkline(walk(100),1);</script>. This
particular design comes from Edward Tufte, with red dots (<script
type="text/javascript+protovis">dot("brown");</script>) to emphasize
start and end, and blue dots (<script
type="text/javascript+protovis">dot("steelblue");</script>) for minimum and
maximum.

Data

var bars = [0.2, 0.3, 0.6, 0.1, 0.9, 0.8, 0.23, 0.77, 0.63, 0.43, 0.59, 0.11];

/** An array of sunspot observations. */
var sunspots = [
  40, 115, 100, 80, 60, 40, 23, 10, 10, 25, 75, 145,
  130, 130, 80, 65, 20, 10, 5, 10, 60, 190, 180, 175,
  120, 50, 35, 20, 10, 15, 30, 60, 105, 105, 105, 80, 65
];

/** Generates a random walk of length n. */
function walk(n) {
  var array = [], value = 0, i = 0;
  while (n-- > 0) array.push(value += (Math.random() - .5));
  return array;
}

/** Generates an array of n random bits. */
function random(n) {
  return pv.range(n).map(function() { return pv.random(2); });
}