US Election Results - WinForms Data Visualization

03 November 2016
With the US Presidential Election right around the corner, we thought it appropriate to create a simple tracker app with our WinForms controls. As you can see, the two primary controls used were our WinForms Map Control and our WinForms Grid Control. (download demo source code)

WinForms Data Visualization - US Presidential Election Results

Here's a quick walk-through as to what you'll need to do to create a similar solution.

Step 1 - Obtain Map Data

Our first step was to obtain State and county map data from the U.S. Census Bureau (maps - https://www.census.gov/geo/maps-data/data/cbf/cbf_counties.html, codes https://www.census.gov/geo/reference/codes/cou.html, etc).

We then used QGIS to update our maps for improved visualization (move/resize Alaska and Hawaii)

Step 2 - Collect Election Data

Our next step was to collect election results from the Federal Election Commission and detailed county level voting data from The Guardian.

Step 3 - Normalize Election Data

At this point, we needed to normalize data so that it could be used within our sample application and to ensure that future election results can be integrated without direct modification of our app.  And since we want to create a web version of the same demo, we chose to store election results in JSON format.

Step 4 - Create the App

As I mentioned earlier, to visualize data and create an interactive user experience, we used both our WinForms Map and WinForms Grid Control.


User Interface Elements

Data Grid

To display vote totals at either the National level (when the map is zoomed out - displaying all States) or at the State level (when a State is selected within the map), we use our Grid Control with its Banded View enabled. Those familiar with the Grid already know that it supports use of Progress Bars within its cells...and in our case, we've used progress bars to visualize the vote totals.


Map

We used a U.S. shapefile and colored each State based upon election results - blue if the Electoral College votes were allocated to the Democratic Party and red if the votes were allocated to the Republican party. You'll note that we use colors to differentiate the margin of victory in each State. The darker a color, the larger the margin of victory for a given candidate in that State.

For the tooltip, we're using our “SuperTip” and ToolTipController.

WinForms Data Visualization - US Presidential Election Results


When you click an individual State, the app drills into the available data and lists voting by individual counties within that State (and the Grid content is updated to display vote totals for each county by party).

WinForms Data Visualization - US Presidential Election Results

Custom UI Elements

The only custom UI element used is the Electoral Vote bar at the top of the app. This particular UI element is a standard UserControl with two LabelControls and simple custom draw to paint results. It's used to display both Electoral Vote count and the total number of votes for each candidate.


And finally - to help you predict the 2016 election (as if anyone can actually do that), we added a simulation mode option. Give it a try and see if you can guess who'll be our next President.

Candidate photos courtesy of: Pete Souza, The Obama-Biden Transition Project and Gage Skidmore

4 comment(s)
Amr Ammar

Could you please provide the project as a Web application (VB.net) ?

3 November, 2016
Michael Proctor [DX-Squad]

Good demonstration of XtraMaps and use of WinForms UI to create a Modern flat UI design.

3 November, 2016
Tom Mcd

very nice!

7 November, 2016
Lazor

I would also like a VB voter app

17 March, 2017

Please login or register to post comments.