Horizon Chart extension for Design Studio - Part 1

[jmsrpp]

It's been a while since my last extension and I thought it was high time I got back in the mix. Over the summer I had the opportunity to see a great post by @NadiehBremer on Twitter about horizon plots in R:

Nadieh Bremer auf Twitter: ".@vlandham here is an R tutorial for horizon plots - but those ...

I felt that this chart type would be a great addition to Design Studio so I researched a bit more about it here:

http://flowingdata.com/2015/07/02/changing-price-of-food-items-and-horizon-graphs/

and here:

Timely Portfolio: Horizon on ggplot2

You can check out an interactive sample by the great Mike Bostock here:

http://bl.ocks.org/mbostock/1483226

I would encourage everyone to check this out as it provides interesting context on viewing/interpreting many dimensions over a time series. It took me a couple of months to find the time to deliver this extension in a way that satisfied me, and I'll use this blog series to take you through the creation of it step-by-step. I'm following a multi-installment process because otherwise this will turn into more of a novel than a blog.

So to begin, let me show you the final result, explain how it works, and obviously provide you with the link to the source. Next time, I'll share the D3 samples I used to cobble this thing together and talk a bit about my own evolution as a D3 developer. This exercise was a fantastic chance for me to create new code for the first time, rather than just copying existing samples.

First, let's look at the finished product:

And the data source underpinning it:

You can see the data source, in this case, is constructed by adding Year and Month dimensions to the rows axis, with a "trellis-by" dimension as the 3rd dimension in the rows. The horizon chart takes a single measure of your choice. In the case above, Blue values represent below average performance, and green values represent above average performance. The component takes 4 color values and uses a poly-linear scale to implement the color saturation.

Once you've constructed the data source in this fashion, you can configure the component in Design Studio:

The properties are:

1. Data Source - bind to the data source you've configured as above
2. Horizon Measure - select the measure to plot on the horizon chart
3. Trellis Dimension (optional) - create small multiples based on a 3rd dimension defined as above (the default value of None can be used if you don't want small multiples)
4. Unix timestamp format - Set to true to use with timestamp columns representing ms since epoch (covered in detail below)
5. Bands - sets the number of divisions for the horizon, values from 1-5 are valid.
6. Mode - mirror positive and negative values on the same axis, or offset negative values on top and positive values below.
7. Positive Color 1, Positive Color 2, Negative Color 1, Negative Color 2 - specify colors for positive/negative value saturation
8. Label size - How large should the trellis labels be ... set to 0 for no labels
9. Trellis Label Text Offset - number of pixels to offset text labels. Set to higher value for long strings

Furthermore, there is an on-click event with the following ZTL methods available:

getSelectedNodeKey() - retrieve the trellis dimension value (i.e. Workstation ensemble)

getSelectedYear() - retrieve the selected year dimension

getSelectedMonth() - retrieve the selected month dimension

getSelectedDate() - retrieve the selected timestamp in the format yyyymmddhh (for timestamp use case)

I built a mouseover function to display the actual measure value and time series dimension because the horizon chart plots based on deviation from the average measure value, not the absolute values underpinning it. This allows us to check the significance of the average fluctuation.

I also wanted to leverage this component for use with the BI platform auditing and monitoring databases, where the timestamp is captured in the number of ms since January 1, 1970 (or the epoch as it's called). The D3 Horizon Chart plugin actually requires the date input to be in ms since the epoch, and Mike Bostock's example shows how to create this from a year and month combination. Once I understood this, I was able to add some conditional logic on how to handle a result set where the data was already in this format. A data set from the monitoring tables might look like this:

In this case, the Year and Month rows are replaced with a single row containing the ms since epoch data. The trellis dimension is the server name in the BI platform. After configuring the data source in this fashion, you can set the "Unix timestamp format" property to true. The output then looks something like this:

The red lines indicate points of above average resource consumption. That's it for the overview ... for now I've added this component to the prototypes group in the Design Studio SDK community package. You can find the source code here:

sdkpackage/src/org.scn.community.prototypes/res/HorizonChart at master · org-scn-design-studio-commu...

In the next installment, I'll go through the code in detail and share my experiences in assembling this extension from various online sources. I hope you enjoy using it and please provide any feedback you might have as you begin working with it.