Monday, 23 February 2009

Silverlight USA States Visualisation

Tim Heuer challenged his readers to create a Silverlight visualisation application; this is my entry…….

It displays visualisation of the following name value pairs (stored as embedded text files) from Wikipedia of:

  • Average salary per state
  • US elections 2008 votes per state - Wikipeida
  • Population per state - Wikipeidia

Other sources of info are on Wikipedia.

Step 1 - Simple Listbox

Each set of name value pairs are stored in their own embedded text file, which are then are then loaded into a observable type and bound to a list box. A slider bar then allows the user to filter the results. The data binding worked well but looked so 2003, so it was time to jazz it up.

Step 2 - Basic Item Template

I then put a nice border around items, could have added some simple graphics, bound the data to colour and opacity attributes, that would have made it a bit better but still it’s so 2005.

Step 3 - Advanced Item Template with paths

Then I remembering seeing a blog of a WPF app that created a USA map from a list box, so I ported the app to Silverlight, this required me to:

  • Resolve issues of Silverlight not supporting binding of certain types
  • Replacing XML data source with my custom observable type
  • Tweaking animation effects
  • Tweaking labels so they weren’t clipped by the state

The results are a great example of the strength of data binding to a custom list box to totally transform an app from a dull winforms style list box to an advanced visualisation. Using these features in WPF/Silverlight makes it very easy to separate the visualisation from data, and the ZAP file is only 36Kb, smalled than a PNG of the screenshot!

Due to time contains there are still a few rough edges, the animation could be a bit slicker, button designs could be improved any fixing the z-order of the selected state.

Future enhancements could include:

  • More complex data type, e.g. third axis to include time
  • Load your own data via local text file
  • Embeddable widget
  • Extra maps

1 comment:

LoungeforCash said...

Hi Martin. Your map is very cool stuff. We are looking for a Silverlight map to display sales information. From what I see, your solution would be a great start on what we need to do. Is the source available to use?