Designer Silverlight

In the comments of my Silverlight unemployment visualization, someone asked about where I got the US outline. I got it from the WikiCommons website which has an SVG (scalable vector graphics) version that I pulled into Adobe Illustrator and then exported as a XAML file using Mike Swanson’s Illustrator-to-XAML plugin.

I realized this might not be possible for many people who don’t own Adobe Illustrator, so I did it myself for several files that are now available for download as XAML vector graphics maps of the US.

Download all Silverlight and WPF XAML files

Silverlight

• Download all Silverlight XAML files
• United States Map with States
• United States Map with Congressional Districts
• United States Map with Counties (FIPS)
• United States Map with Counties (County Names)

WPF

• Download all WPF XAML files
• United States Map with States
• United States Map with Congressional Districts
• United States Map with Counties (FIPS)
• United States Map with Counties (County Names)

I’ll confess, the real difference between the Silverlight and WPF files is that the WPF files encapsulate everything into a “Viewbox” control that allows dynamic resizing of the maps. If you want that functionality in Silverlight, just download and install the Silverlight toolkit and encapsulate the Canvas into a Viewbox. (The Viewbox will be a standard control in Silverlight 4, I am reliably informed.)

Now, a quick overview of the files:

United States Map with States

This is a nice tidy file (69K) with vector maps for all the states in the US. Each state has been named by its abbreviation. For example, the California map path would have the attribute: x:Name=”CA”.

United States Map with Congressional Districts

This file is based off of the Wiki Commons Congressional District map and is pretty big (about 1 MB). The paths are named based on a State_District naming convention. For example: Washington’s 8th Congressional District would have the attribute x:Name=”WA_8″.

There are 7 “at large” districts, which indicate states that only have one congressional seat. They have the attribute “State_At_Large“… for example, North Dakota’s one and only congressional district has the attribute x:Name=”ND_At_Large”.

United States Map with Counties (FIPS)

This map is pretty hefty at 1.5 MB. All paths have a FIPS code for the county they represent as their x:Name attribute. A FIPS code is a 5 digit code corresponding to a unique county in the United States. The first two digits indicate a state (for example, California is “06″) and the last three digits indicate a unique county (for example, Orange County in California is “059″). Because of the limitations in the XAML x:Name conventions, the FIPS code for a county is preceeded by an underscore. So, the path indicating Orange County, California would be x:Name=”_06509″.

If you need a FIPS-to-CountyName file, check out this FIPS code CSV file.

United States Map with Counties (County Names)

This is the same map as the FIPS map except that the x:Name attribute is State_CountyName. For example, the path for Fulton County, Georgia would have the attribute x:Name=”GA_Fulton”. Periods, commas and apostrophes have been deleted. Multiple word and hyphenated counties have an underscore where the space or hyphen would be. For example, Alaska’s Skagway-Hoonah-Angoon Borough would be x:Name=”AK_Skagway_Hoonah_Angoon”.

Holy cow, Alaska… did you really need to name a county with more letters than the number of people living there?

Anyway, that’s the overview of these files. In the interest of keeping the file size down (no, really! Stop laughing at me!), the county and congressional district boundaries aren’t as details as we might prefer, but that’s the trade-off we have. Also, the county name data is pretty good, but there are over 3100 counties in the US, so I didn’t get a chance to double check each one of the names. Use at your own risk.

As promised, I’m posting my code for the demos from my MIX10 “Creating Effective Information Visualization in Silverlight” talk.

Unemployment Data Demo Code

Bing Maps Twitter Demo Code

In case you want to take a look at the unemployment visualization, I’ve added it below. I’m looking for a place to do ASP.Net hosting because my Bing Maps visualization is driven using Twitter data called and served through a WCF service, so if you have a recommendation for a noob ASP.Net guy, let me know. I’d love to host that as well.

(Apparently some people are having trouble with my demo below. I’ll try to get a more compatible version up soon.)

You can copy the code for to embed this with the text below:

<object data=”data:application/x-silverlight-2,” type=”application/x-silverlight-2″ width=”800px” height=”600px”><param name=”source” value=”http://www.designersilverlight.com/Silverlight/UnemploymentViz.xap”/> <param name=”onError” value=”onSilverlightError” /> <param name=”background” value=”white” /><param name=”minRuntimeVersion” value=”3.0.40818.0″ /><param name=”autoUpgrade” value=”true” /><a href=”http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0″ style=”text-decoration:none”><img src=”http://go.microsoft.com/fwlink/?LinkId=108181″ alt=”Get Microsoft Silverlight” style=”border-style:none”/><br /> </a></object>

For everyone who wants to take a look, here are the slides for my MIX10 information visualization talk.

MIX10 “Effective Information Visualization in Silverlight

I’ll post the code from the presentation when I catch my breath.

Sorry for my prolonged absence. My world has been taken over somewhat due to my recent moonlighting as an information visualization guy. Take note that I’m not by any means an “expert”… I’m more of an “enthusiast”, but that was apparently enough to get me on CNN.

I’ll post more videos as I create them for CNN. I’m also working on a chapter for an O’Reilly book called “Beautiful Visualization” that will be out next year.

All of this to say that I’m trying to get back into the WPF/Silverlight blogging as soon as I can, but I need to clear my plate a little first.