The increasing amounts of data that users need to consume before they make a decision places increasing demands on presenting it in a way that’s easy to understand. One of the controls used to visualize 3D data is to use a heatmap. Our NetAdvantage for WPF product contains many advanced UI data visualization controls such as a chart, map, timline, treemap, but until this point lacked a heatmap control. Fully-functional free 30-day trial of the NetAdvantage for WPF product, which includes these controls is available. Over the last couple of months, we’ve been busy creating a heatmap control which we’d like to make available for your use and feedback. This control will not be supported before its official inclusion into the product, but already contains the functionality you need to create a rich color-coded display of your 2D data. At this time, this control is available as a CTP.

This blogpost illustrates the functionality of the heatmap control using a sample project, which includes a DLL with the control itself, ready for use in your own applications. The project is built using Visual Studio 2010 and .NET Framework 4. The sample project contains all the libraries it needs, so you can build and run it without any additional downloads.  Here’s a screenshot of the sample project:

In the subsequent sections, I’ll briefly describe how to use the API and features provided by the control.

How to use the sample

The sample is setup with a binding to a 2D array of data, which binds to properties containing the rows, columns and objective value (to be represented by a color).

We’re using a linear scale for the value-to-color mapping and are using red to green color range to represent the values in the interval from 0 to 1. You can use the slider on the right to modify the width of the grid lines or press the grid button to toggle their visibility. You can smooth the heatmap values over the rows/columns by clicking the Smooth Rows and Smooth Columns buttons.

You can also start a timer which updates the data by clicking the Update button. In this sample, there’s also a tooltip showing the current value when an element is hovered to enable users to easily access any additional data associated with that element.

API

The API of this control has been designed for simplicity and completeness and also for coherence with other controls (it uses a shared color scale with other data visualization controls).

Data Binding

DataBinding is implemented using the standard mechanism which lets you bind to a view model through the ItemsSource property, and specify the path to the data using the ValueMemberPath property. Once you’ve bound to the data, you can set the name of the properties storing the rows and columns of the 2D data using the RowsSource and ColumnsSource properties.

Property	Description
ItemsSource	Gets/sets the object to be used as a data source
ColumnsSource	Gets/sets the System.Collections.IEnumerable for the columns
RowsSource	Gets/sets the System.Collections.IEnumerable for the rows
ValueMemberPath	Gets/sets the name of the property that will be represented with color

Formatting and appearance

The heatmap gives you the full range of capabilities to control the axis value formatting and appearance of your data.

Property	Description
ColumnFormat	Gets/sets the format for the column axis label formatting
DisplayMode	Gets/sets whether value smoothing is applied across rows or columns
GridDisplayMode	Gets/sets the grid rendering order – before and after the heatmap elements
ItemToolTip	Gets/sets the tooltip for the hovered heatmap item
RowFormat	Gets/sets the format for the row axis label formatting

Interaction

The heatmap enables you to handle events generated by the user interacting with the heatmap elements.

Property	Description
ItemMouseEnter	Invoked when the mouse pointer enters a heatmap element.
ItemMouseLeave	Invoked when the mouse pointer leaves a heatmap element.
ItemMouseLeftButtonDown	Invoked when the left mouse button is pressed in a heatmap element
ItemMouseLeftButtonUp	Invoked when the left mouse button is released in a heatmap element
ItemMouseMove	Invoked when the mouse pointer is moved in a heatmap element

These are the mouse events you can handle to provide extra information about the hovered/clicked item in a separate control. The event arguments provide the indexes of the row/column and the item represented by the heatmap item.

Coloring

The heatmap supports two types of value scales you can use to color the elements in the heatmap – Linear and Logarithmic. In the sample, we’re using the linear one. You’d typically use the Linear one when you don’t have a lot of variance between the values represented by the color, and the Logarithmic one when you do. The scales used for the coloring work just like chart axes with auto-ranging across multiple series or controls and with separately settable Minimum and Maximum values.

While at least two colors are required, more can be used. You can use this color scheme to build a choropleth view of your data. By having full control over the color scheme, you can easily implement sequential and diverging scales to adequately color your data – in the case of a diverging color scale, you’ll need to specify at least three colors. 

Both of these value scales have the following properties:

Property	Description
Colors	Gets/sets the colors for the brushes to be used in the interval to color the elements
MaximumValue	Gets/sets the maximum value for the color value range
MinimumValue	Gets/sets the minimum value for the color value range
ActualMaximumValue	Gets/sets the actual maximum value for the color value range
ActualMinimumValue	Gets/sets the actual minimum value for the color value range

Disclaimer

The control is freely available as a CTP for the time being, and can be used without limitations in your commercial projects. It will be added to our paid for product at a later stage, and from that point on will be serviced and supported.

Summary

This blogpost described the functionality and API of a freely available WPF heatmap control. This control can help you visualize 2D data in an easily understandable way, and can also serve as a navigation control, allowing users to quickly identify important pieces of data and act on it. In addition to facilitating navigation, it can also help you reduce clutter in your application’s layout and replace sophisticated hierarchical grid controls showing the same data. This being said, please take a look at the data presented in your application, and identify data which is three dimensional, with one of the dimensions being a number, and the other two being discrete values. Also, talk to your users about the availability of a heatmap control – they’re sure to have ideas on data to visualize with it.

Please send me an email if you have any questions – kmatev@infragistics.com