How-to post #1: Piano [chart] Lessons

By | Published: April 26th, 2010

Everybody knows that a data visualization is only as good as the ‘chartographer’ who creates it. While the goal is (hopefully) to turn raw data into an easily consumable visual, that’s not always the outcome. With our new series of “How-to” posts, we hope to help designers and developers build charts that portray data accurately and look great as well.

Exploring Piano Charts

First off; what are piano charts? They are a table-style charts that allow the reader to easily consume differences in data-density by creating a scale using brightness, size, color, transparency, or imagery. The more or higher values there are for a given point, the more intense, dark, opaque, etc. the corresponding fill.

Some call this chart type a matrix, others call it a heatmap. Microsoft calls it a piano roll. We’re calling our chart type a piano as well because ‘heatmap’ refers to a broader style of visualizing data that goes beyond a table.

Whatever you call them — piano charts are a great, yet underutilized data visualization tool. Who knows why, maybe because they’re misunderstood or underestimated. Whatever the case, after reading this post we hope you’ll be excited to add ZingChart pianos to your arsenal of dataviz tools.

Heatmap-style piano charts help draw quick conclusions

Usually, heatmaps consist of blocks of a color (or colors) that range in brightness/intensity to portray the density of data for a given point. The darker or larger areas represent more heavily-populated data, and vice-versa. There are other interesting ways to identify data-density, however, such as the transparency of an image. We see this becoming more useful as we navigate the pros and cons of “chart junk” in data visualization (see Robert Kosara’s post: Chart Junk Considered Useful After All).

Here’s a stripped-down, monochromatic heatmap showing the number of clear, partly-cloudy, cloudy, and rainy/snowy days Denver has per month:

Now here’s the same chart, using series-relevant images and transparency to portray data-density:

There are definitely use-cases and pros and cons to each chart, but one thing seems clear about the imagery-infused chart: it almost negates the need for a y-axis. It’s easy to see that January and June will bring some sunlight, and that May might not be the best month for solar-panel output.

How-to

How much additional JSON code does this take? Aside from dressing up the colors and adding a background image, not much at all. Here are the two steps you need to know to go from a standard heatmap to an interesting visual that’ll draw your reader’s attention while delivering accurate data (additional required code in green):

1. Add a background-image for each series.

We wanted our image to be centered and transparent so our blue-sky background would show through, so we set background-repeat to false, and background-transparent to true (one out of four series shown).

"series":[
    {
    "values":[10,8,8,7,6,10],
    "text":"Clear Days",
    "background-transparent": true,
    "background-image": "images/sunny.png",
    "background-repeat": false
    }
   ]

2. Set the “aspect”: attribute to “alpha.”

The “aspect”: attribute is the key (awful pun intended) to building a piano chart. It allows you to determine what scale the chart will use for portraying data density. Available aspect options are brightness, size, width, height, and alpha (transparency). For this example we’ve used alpha.

"plot":
    {
    "tooltip-text":"%v %y days <br>in %k",
    "aspect":"alpha",
    "animate":1,
    "effect":1
    },

Other available aspects:

"aspect":"brightness", (default)
"aspect":"size",
"aspect":"vertical",
"aspect":"horizontal",

see examples in our docs.

These examples have been added to the download package; so feel free to ‘roll your own piano.

Or you can copy out the JSON using our new right-click View Source feature:

Right-click on any ZingChart to view its JSON code.

Right-click on any ZingChart to view its JSON code.

We welcome comments, ideas, thoughts, and constructive criticism. Also feel free to email me with any questions.

Andrew
Follow on Twitter

PS: Keep an eye on our blog via RSS as we’ll continue to post tutorials and information featuring advanced ZingCharting!