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