Small Multiplies are a type of data visualization popularized by Edward Tufte, a pioneer in the field of data visualization and noted author in the field of information design.
Small Multiples are a series of small similar visualizations shown together that allow for a quick visual comparison.
We recently came across this great time-lapse from the Washington Post tracking flu levels by week for the 2012-2013 flu season and thought the data would make an excellent candidate for a small multiples graph using our open source font Stately and jQuery.
We start by adding the Stately assets to our project and adding the CSS and markup to the page. The data for the Washington Post time-lapse came from the CDC, so we grabbed the data and formatted it into some JSON for our needs.
First, we use jQuery to grab the JSON file using the $.getJSON method inside our Document ready function.
$(document).ready(function() { $.getJSON("data.json", function(data){ }); }); The first bit of data we need are the weeks so we know how many graphs we need. The relevant JSON looks like this:
"weeks":["10/13/2012","10/20/2012","10/27/2012","11/3/2012","11/10/2012","11/17/2012","11/24/2012","12/1/2012","12/8/2012","12/15/2012","12/22/2012","12/29/2012","1/5/2013","1/12/2013","1/19/2013","1/26/2013","2/2/2013","2/9/2013"] With the jQuery $.each method, we can iterate over the each of the weeks and clone the map for each week week of data and also add a label.
$.getJSON("data.json", function(data){ $.each(data.weeks, function(i){ $('#week').clone().attr( 'id', 'week_' + i ).appendTo('#container'); $("#week_"+i+" h2").html(this); }); }); Each state has data for every week to show it’s flu level for that week, here is the JSON data for Alabama:
{"state":"Alabama","values":["minimal","minimal","minimal","minimal","minimal","minimal","low","high","high","high","high","high","high","high","high","high","high","moderate"]}, We need to look at each state and all of its values, so we use nested $.each methods to look at every state and iterate over its values for every week and add classes for every value.
$.each(data.states,function(i){ $.each(data.states[i].values,function(x){ $("#week_"+x+" li[data-state='"+data.states[i].state+"']").addClass(""+this+""); }); }); The final jQuery looks like this
$(document).ready(function() { $.getJSON("data.json", function(data){ $.each(data.weeks, function(i){ $('#week').clone().attr( 'id', 'week_' + i ).appendTo('#container'); $("#week_"+i+" h2").html(this); }); $.each(data.states,function(i){ $.each(data.states[i].values,function(x){ $("#week_"+x+" li[data-state='"+data.states[i].state+"']").addClass(""+this+""); }); }); }); });
