US Election Results - Angular 2 and DevExtreme Data Visualization Demo

To help illustrate some of the data visualization capabilities of DevExtreme, we’ve just published the source for our Presidential Election Results Demo App on GitHub. As you can see in the screenshots below, the app leverages our HTML 5 JavaScript Map widget and a Bar Chart widget:

Online demo: DevExpress Election Results Demo

The demo is built using the Angular 2 framework and DevExtreme widgets. Last week, we released the WinForms Election Results Demo that uses our WinForms Map and Grid controls. We designed this new web demo with DevExtreme Data Visualization widgets to show you that DevExpress helps you to create stunning apps across different platforms.

How it's made?

The full source code and data for this demo is available on Github. To run the demo on your local machine, execute these steps:

1. Download or git clone the respository
2. npm install
3. npm start
4. navigate to http://localhost:4200/ (if your browser is not launched automatically)

Let's dive into how this demo is built.

Shared Data

The data for this demo is the same data that we used in the WinForms Election Demo. The state and county map data comes from the U.S. Census Bureau. The election data from the Federal Election Commission and The Guardian. Election data was normalized and stored in JSON format.

Step 1 - Create the App

The best way to create new Angular 2 application is to use Angular CLI. Install it globally using the npm install -g angular-cli console command. Then execute the ng new dx-election to create an application. You only need to do this command once.

Step 2 - Generate Components and Services

Each UI part of the demo's user interface is a component in the Angular 2 app model. Therefore the 'year switcher' or the bar chart with vote totals are Angular 2 components using DevExtreme Data Visualization.

To create a new component, we use the ng generate component console command. For example, ng generate component map generates the ".html", ".ts", and ".css" files in '/src/app/map' directory. Then three services were generated using command ng generate service. Each service provides the following data: states, counties, and votes.

Step 3 - Add DevExtreme to the App

Using DevExtreme widgets with Angular 2 requires that the appropriate npm package are installed. The npm install devextreme-angular --save command adds all necessary files and includes the devextreme-angular package in the package.json file.

Theme stylesheet files should be included in the 'angular-cli.json' file. The widgets used in the app should be imported in the 'src/app/app.module.ts' file. Then all imported widgets can be used as application components.

Step 4 - Work with Binary Data in DevExtreme VectorMap

DevExtreme provides Vector Map utilities that can be used to work with binary data. We transformed the binary map data to a JavaScript object (see 'src/app/maputils.ts') using a single method: DevExpress.viz.vectormaputils.parse. Next we added election data to the object to colorize the map according to vote results.

Then the '<dx-vector-map>' tag is added to the component markup file. The [layers] attribute describes states and counties layers and binds the resulting data source with map and election data to the vector map widget. This provides the Vector Map to drill down by state and counties:

Step 5 - Use DevExtreme Charts

A DevExtreme Bar Chart is used to show vote percentages by state (or county). A DevExtreme Full Stacked Bar Chart shows national results of electoral and total votes. Both app components get the data from the VotesService. Component markup contains tag with widget options and data bindings.

Try it today

Try the demo online. Then download the full source code and drop me a line below. What do you think of this slick new demo?

Candidate photos courtesy of Gage Skidmore.

Free DevExpress Products - Get Your Copy Today