Dennis Wong

UX Designer/ Programmer

Animated Bar Chart

Group of 2 | Designer/Programmer

With a partner, I created an animated infographic that comparied economies of the largest powers during 1950 to 2000. It is an interactive bar chart that reads Big Data and represents it on a human readable scale.

barchart of economic countries

Utilizing D3 in JavaScript to process the data, I created an interactive infographic through HTML and CSS that illustrates economies. I wanted to design an easy to use product for users that simplifies massive amounts of data and presents them at a human readable scale.

Initial Considerations

List of country statistics in data form

The raw data that was aquired to create the visualization

Another Initial speaker design

Data came from the "Correlates of War" project which hopes to provide data reliability for the international relations community

There was a lot of data so I decided to consolidate into the most meaningful parts to include most of the largest economies during the time periods.

Correlates of War wanted to convey international relations data in as clear way as possible. The infographic that I had to create required firguring out what parts of the data is really needed to show meaningful view to be of use to users.

Prototyping and Development

A heatmap of the world in roange and blue for export and import respectively

Prototypes created using illustrator(low fidelity) and HTML(high fidelity)

A heatmap of the world with grey and orange

I first tested a heatmap solution where the exports towards a certain country would change in opacity.

Using a scroll bar, time periods would show how the exports or imports would change towards more or less for the country.

Code snippets of html/javascript and a bar chart

Code snippets of the html and javascript for the barchart

JavaScript with D3 was used to sort the large raw data available to isolate the most important data to the correct selections. Higher fidelity prototypes were created then to show visually how it would all put together.

Final Iteration

Physical prototype on display

The final rendition is created in HTML and CSS using JavaScript/D3 to process the data automatically.

physical prototype on display

I chose to use an interactive bar graph instead. It allowed for easy comparisons and that getting the comparison correct was a bigger concern than to add more context in with extras like the heatmap.

Overall I strengthened my ability to realize my designs through the web and am able to capture the intention of someone's wishes correctly.

Please check out the infographic in action:

To Visualization