Spark Charts

In data visualization, context plays a crucial role. It adds more meaning to a data value by answering questions like compared to what, better than whom, etc. Suppose your website received 10,000 visitors this month. This data in itself does not make much sense. To make it more meaningful, you have to answer questions like is this better than your website's earlier performance?

For any data to make sense, it is important to put it in the right context.

Let's consider this chart:

FusionCharts will render here
This chart plots the website traffic for the last 24 months. Now you have an idea as to how your website has done this month with respect to its past performance.

This "data-intense, design-simple, word-sized graphic" which is used to visualize the general shape of a variation (in this case, your website traffic) is called the Spark Chart, so called because of their "active quality over time". Designed by Edward Tufte, this chart does not have any axes and coordinates.

Unlike other charts, Spark Charts are placed within the content and are used to provide a quick context to data without taking too much space.

Check out live examples of Spark Charts in our charts gallery and JSFiddle gallery.

Lineage

Spark Charts are not a new concept. In his book, Beautiful Evidence, Tufte shows some examples from Galileo's works where he used small graphics adjacent to texts to show how planets like Saturn can be seen through the telescope.



Image source: edwardtufte.com

Images embedded within text have found their use in other fields as well.

Rockwell Kents illustrated work on Candides' Voltaire.

Rockwell Kents illustrated work
Image source: edwardtufte.com

Mike Richmond "Walking Bass Techniques," in The Bass Player Book.

Walking Bass Techniques
Image source: edwardtufte.com

Today Spark Charts find application in data visualizations across the board―stock price monitoring, temperature displays, patient monitoring systems, etc.

Types of Spark Charts

Sparklines are the most commonly used Spark Charts followed by the Spark Column and the Spark Win/Loss chart.

  • Similar to a Line chart, Sparklines are used to visualize data that is continuous (time series).
    eg: Website Traffic
    FusionCharts will render here
  • Similar to a Column chart, Spark Columns are used to facilitate comparison.
    eg: Revenues earned
    FusionCharts will render here
  • Spark Win/Loss chart is used to visualize a Win/Loss scenario.
    eg: Yankees current season results.
    Upward column indicates a Win, downward column indicates a Loss and the flat column (3rd from left) indicates a Draw.
    FusionCharts will render here

Usability tips on using the Spark Charts


  1. Aspect Ratio

    The aspect ratio is the ratio of the width of a shape to its height. It plays an important role in the display of a graphic. Consider this example:

    FusionCharts will render here
    FusionCharts will render here
    FusionCharts will render here

    All the three Sparklines above represent the same data but look very different due to the difference in their aspect ratios.

    By its very nature, a Spark Chart has to be wider than higher. In his work, Visualizing Data, William S. Cleveland shows how the aspect ratio of a line chart can affect an analyst's perception of trends in the data. He suggests that the variations in slopes are best detected when the slopes are around 45°, uphill or downhill. This technique is called banking to 45°.

    Tufte draws on this idea and suggests that for a Sparkline, use the maximum reasonable vertical space available under the wordlike constraint; then adjust the horizontal stretch of the timescale to meet the criterion of the overall average of 45 degree slopes, uphill and downhill, throughout the time-series. Simply put, the chart should be more lumpy (Fig:1) than flat or spiky(Fig: 2 & 3).

  2. Add reference points

    As mentioned earlier, Spark Charts do not have axes and coordinates and as such have no explicit reference points. To overcome this, we can use color coding and trendlines to highlight areas of special interest.

    • Colors to highlight specific data value

      The Sparkline below uses blue for Open & Close price, green for High and red for Low in this stock sparkline chart.

      FusionCharts will render here

      The Spark Column chart below uses green and red to highlight maximum and minimum revenues respectively.

      FusionCharts will render here

      The Spark Win/Loss chart below uses gray when there is a Win and red when there is a Loss. Additionally, the flat gray column (3rd from left) symbolizes a Draw.

      FusionCharts will render here
    • Industry average/target as trendline

      The chart below plots industry average stock price as a trendline. It helps to identify how a particular stock is doing with respect to the industry average. Alternatively, target value as a trendline can help to identify how far is the achieved value from the target.

      FusionCharts will render here

Spark Charts in information dashboards

In addition to the use cases already mentioned in the article, due to their compact sizes and their ability to convey a lot of information, Spark Charts are gradually finding their use in information dashboards too. They help in providing context to nuanced analysis as well as removing the dependency on the most recent data for taking decisions (recency bias). When multiple Sparklines representing different metrics are used together, they provide the user a quick snapshot in one glance. We leave you with some examples of dashboards using Spark Charts.

Google Analytics uses Sparklines to summarize the variation in metrics like Visits, Pageviews, Avg. Visit Duration, etc. Users get an overall picture in a single screen and have the option to drill down for more details.

Google Analytics uses Sparklines
Image source: google.com/analytics

Google Finance's Stock screener uses Spark Columns to help users choose stocks with features in a certain range.

Google Finance's Stock screener
Image source: google.com/finance/stockscreener

SproutSocial uses color coded Spark Charts to visualize the variation in metrics like New Twitter Followers, New Facebook Fans, Incoming Messages, etc.

SproutSocial uses color coded Spark Charts
Image source: sproutsocial.com

Reference:
Want to include Spark Charts in your project?
Developers

Download free trial to start creating charts you want.

Business Users

Contact us using the form below and we'll be happy to assist you!

If you see this, leave this form field blank and invest in CSS support.