Visualize your Time-Series Geographic Data Using Infragistics Motion Framework and XamMap

Data visualization has been getting increasing attention in line of business applications, because it’s not just about visualizing static data, as in a report. The advanced interaction capabilities that rich platforms such as Silverlight and WPF made possible allow easy implementation of data analysis features such as zooming, panning and formatting. The next level of experience you can deliver is visualizing multiple dimensions of your time series data, creating an immersive and animated user experience that tells the story of your data in high-data density. (Update: For an introduction of the Motion Framework and XamDataChart and XamMap sample application demos, please watch the Motion Framework Webinar recording).

We already showed how you can use the XamDataChart in such a scenario in this post, and also in the WorldStats demo. However, both of those use the XamDataChart to animate time series. What if you have data which is related to different geographic regions, and you’d like to visualize certain dimensions of your data using a map? Well, you can do that using the approach provided in this post. 

This approach is illustrated using a sample application, built using Visual Studio 2010 and NetAdvantage for Silverlight Data Visualization 10.3.

Sample Visualization Scenario Description

In this particular example, we’re constructing a weather map, which colors each state to represent the monthly temperature average during 2008. In addition to representing mean temperatures, we’re also visualizing a second measure for each state – energy consumption, which is computed for each period and state based on the temperature. Even though its computation is relatively simple, it shows the capability to visualize multiple dimensions of your geographical time-series to allow you to create a visualization with high data density.

Interaction with the Sample

Once you have the sample running, click the Play button to start the playback of the data. Once you do that, the Play button turns into a Pause button, which you can use to pause playback. If you’ve attended the webinar we had on Infragistics Motion Framework, you might have noticed a little lag in the transitions – this was due to the fact you were viewing it through LiveMeeting. However, when you run the sample on your local machine, you will be seeing distinctly the changes in coloring the gauge values at each change in the current time of the playback. 

As this sample uses a XamMap, you can easily pan and zoom in or out using the navigation pane in the top-left corner or using the mouse.

Binding the time-series data to the geographic data

In the XAML file, you’ll see we declare the XamMap with a single layer, which reads its geographical data from a shape file reader. Then, in the code-behind, in the handler of the Loaded event of the XamMap we set the DataSource of the layer to an instance of an ObservableCollection of objects, which each contain the time-series data for a region, along with its name.

So, how do we connect a region in the XamMap with data for that particular region from the datasource? Using the DataMapping property, we set the Name property in the ShapeFileReader to the STATE_NAME field in the shape file.

<ig:ShapeFileReader Uri="usa_st" DataMapping="Name=STATE_NAME" />

This assigns state names from the shape file to the corresponding regions in the map. We then create a relationship between this state name, by setting the DataMapping property of the MapLayer as follows:

DataMapping="Name=State;Value=CurrentValue;ToolTip=EnergyConsumption" 

This creates a mapping between the STATE_NAME from the shape file to the State property in the objects in the DataSource of the MapLayer. We set the Value property in the mapping, which will be used to construct the thematic map so we can have each region being colored according to the value of the CurrentValue property of the objects in the data source. We’re also making available within each MapElement data context the value of the EnergyConsumption property via the Tooltip property.

We’re using a custom ValueTemplate for the MapLayer, containing a XamRadialGauge control, whose needle is bound to the Tooltip value via a simple converter. This allows us to visualize a separate value for each map element. This is a relatively simple example, as you can use a more complex value template such as a pie chart to display the current allocations for a region for a particular moment in time.

Motion Framework Infrastructure

In order to add a story to the data, we need to add code to control playback, visualize its progress using a slider, and bind the data to the XamMap. Using a timer, we step through the elements of an array, which we use to set the value of the CurrentValue property to the temperature value from the current month. We then update the value of the slider displaying the progress and the label showing the current time. In the future, we will provide additional infrastructure around this, so you find it even easier to plug in your data, specify properties to be visualized using a helper class which will drive the playback and binding automatically.

Summary

This blog post and accompanying sample project demonstrate how you can use Infragistics Motion Framework to play through time-series data containing a geographical dimension. Using this straightforward approach and the code provided in the sample, you can easily get started with a simple data set and create a visualization of your data. Now that this functionality is available, talk to users of your software, see where and how they would benefit from such a visualization – which dimensions they would like included, and how would they like to have them visualized? By using this approach, you will allow your users to quickly make sense of their data, enabling them to quickly notice patterns and make decisions.

If you have any questions, do not hesitate to email me at kmatev@infragistics.com.