Horizon Graphs Revisited

For the June/July issue of the Visual Business Intelligence Newsletter, I wrote an article titled “Time on the Horizon,” which featured a new time-series visualization called the horizon graph. Developed by Panopticon, horizon graphs can meaningfully display 50 or so full sets of time-series values on a single screen or page in a way that supports comparisons among them. The following example displays a year’s worth of stock prices for 50 separate stocks (one per row).

Though it takes some getting used to at first, once you’ve learned how to read it, it works quite well.

As it turns out, three information visualization researchers at the University of California, Berkeley became interested in horizon graphs and decided to put them to the test. To my delight, and no doubt that of the folks at Panopticon as well, the horizon graph performed well and some useful guidelines for its use were discovered.

I found this research inspiring, not only because of the results, but because it is such a fine example of the kind of constructive collaboration between software vendors and academic researchers that we desperately need. No, these researchers weren’t paid by Panopticon to confirm their work. In fact, neither I nor Panopticon knew about this until after the research was complete. This wasn’t the kind of collaboration that can sometimes get messy when money’s exchanged, but the kind that arises naturally from a group of researchers’ desire to apply their talents to something tangible-something that has a good chance of actually being used.

This research, done by Jeffrey Heer, Nicholas Kong, and Maneesh Agrawala, was well designed, well conducted, and written up beautifully in the paper “Sizing the Horizon: The Effects of Chart Size and Layering on the Graphical Perception of Time Series Visualizations”. It will be presented at CHI 2009 in April (CHI stands for Computer-Human Interaction) and has been nominated for the CHI Best Paper award.

Take care,

10 Comments on “Horizon Graphs Revisited”

By Mahboob. January 16th, 2009 at 3:53 pm

I’m looking into trend visualisations so firstly thanks for posting this timely information, Excellent paper as well. Just wanted to give some quick feedback and wondered what you’re thoughts were on a couple of things.

1) The choice of colour seperating each chart (grey 2 pixel line).

On the sample image I had to squint between the charts to make sure the data wasn’t bleeding between charts. The grey seperator seems too close to the cyan band which made me look twice. I altered the seperator colour between each chart from grey to white and (in my view) it made the interpretation of the data between charts much easier. I want to “trust” that I’ve interpreted the data correctly at a glance rather than work (hard) at it. Is this a subjective thing? can it work differently for others?

2) I prefer the researchers offset approach since it does a better job of preserving slope and was surprised to learn the mirror approach seemed to have made no difference. The offset slope is still showing the same slope as a tall line chart and I found it much easier to interpret. Does this imply we can do handstands and yet still interpret slope correctly?


By Mahboob. January 17th, 2009 at 1:06 am

Just realised something about 2) the mirrored approach. Its much easier to compare the variance of data when they are side by side rather than maintaining the slope. Thats a win for the mirrored approach, but I guess it depends on what information needs to be conveyed (rate of change or quantity).

Is the choice of red/blue a reference to hot/cold colours? red+blue are at opposite ends of the colour spectrum which may make data points/slopes at the extremes(vibrant colours) difficult to interpret when close together.

By Benjamin Wiederkehr. January 17th, 2009 at 6:53 am

Thanks for sharing this analysis of the workflow between Panopticon, you and the researchers. The horizon graph seems to be a valuable visualization for comparison over a period of time. We’ve covered this article on http://www.datavisualization.ch. Let us know if you have any adjustments, corrections or additions.


By Neil Raden. January 18th, 2009 at 12:36 pm


In this particular case, the rows seem to be a company’s stock (price? volume? I don’t know), but it seems to me that the real value here would be manipulate the grouping and order of the rows based on some other criteria. Is that in the cards?


By Stephen Few. January 18th, 2009 at 12:50 pm


I believe that the ability to sort the rows based on a selected value (e.g., based on the average stock price or the overall amount of increase/decrease) is built into Panopticon’s version of the horizon graph, but I’m not positive. Perhaps someone from Panopticon will be kind enough to let us know. The ability to sort the rows in meaningful ways is definitely a critical feature, as you point out, as is the ability to filter the items (i.e., the stocks in this case) in various ways.

By William Louth. January 19th, 2009 at 2:03 am

You might be interested in the following composite visualization (created a few years back) in our enterprise Java performance management application – JXInsight.


An older blog with a picture showing a similar view of that above. Please note this is in fact a table component in our product which has a large number of table columns not depicted here that can be used for sorting.



By maja. January 19th, 2009 at 5:16 am

I think it is quite funny that the researchers – considering their topic – chose to publish their results using the default excel charts, colors and all!

By Hannes Reijner. January 21st, 2009 at 5:45 pm

At Panopticon we were of course delighted to see that the horizon graph performed so well. Here are some comments to the above.

The example shows one year of percentage stock price changes since the initial day. Each band corresponds to 10 percent change.

The horizon graph is currently a part of Panopticon’s sdk (for developers, available in .NET and Java). Sorting can be performed in various ways – for example based on a (possibly aggregated) value or manual. Filtering can also be performed in various ways – for example based on a range of (possibly aggregated) values or categorical.

The reason for not having a white color between the rows was to avoid mix-ups with the (possibly) white background band color in order not to distort the relative height of the front band. Perhaps this (gray) color could be lightened up a bit. The colors used in this example come from one of several pre-defined color palettes and can be customized or replaced.

For those (developers) who want to try it out a trial is available for download at http://www.panopticon.com/products/trial.htm

By Mahboob. January 22nd, 2009 at 4:49 am

Hello Hannes,

You’re right about needing a seperator (x axis line) between each chart. From the example image take a look at BT Group (1300 pixels from the left edge), the small “hill” of data directly above flows into the data below quite well. Another example look at Whole Foods Market Inc, 330 pixels from the left edge, the trend moves upwards but seems to continue up into Verisign Inc. A single pixel axis line with a white seperator line below it could break up the chart data. On reflection though I think it may be a case of too much data on one screen given the brains ability to detect patterns and fill in gaps, empty white space may not help much.

Thankyou for pointing out that the colours are configurable and not a fixed recommendation for these types of charts.

By Mahboob. January 22nd, 2009 at 5:07 am

Hello Hannes,

I thought I’d give you a better example. If you look at BT Group plc, 912 pixels from the left. Notice the small negative change data “bump” between the positive data? the bairnco data below it has the same colour causing the data above to flow into it. It was invisible to my eye but I was looking carefully because I like the chart/concept so much.

Its a fantastic idea just needs a few tweaks (for me to adopt it anyway).