Back to Blog

Student Wows and Informs With 3-D Interactive Data Visualizations

Before Steve Hall became a student at Hack Reactor, he was already getting plenty of attention for his work with data visualizations. A quick peruse of his blog makes it easy to see why.

A chord diagram by Steve Hall showing the prevalence of Dunkin Donuts and Starbucks in each state in the U.S. See the full display with mouse-over functions here.

A chord diagram by Steve Hall showing the prevalence of Dunkin Donuts and Starbucks in each state in the U.S. See the full display with mouse-over functions here.

Hall has been experimenting and innovating with ways to express data for years, specializing in within-browser code that can turn a dense data set into a stimulating, absorbing display. After getting his feet wet with Excel, he went onto build data visualizations in D3.js, among other JavaScript libraries. From there, Hall became interested in JavaScript and its full range of capabilities, which eventually led him to Hack Reactor.

The Washington Post used some of his code to create an interactive graphic of the backgrounds of regulatory advisers in the Obama Administration. The visualization turned a dry point (that people with industry connections are regulating those same industries) into a visual presentation with an exciting reveal.

Each dot represents a regulatory adviser in the Obama Administration:

When you click on the second tab, the dots scurry to their respective categories (click through for the full effect): 

The Post gave due credit for the striking visual:

On Monday, Hall posted a follow-up to one of his most popular pieces on map generation using D3.js and Three.js. Here's how he explains the goal of this particular project:

Over the past couple of weeks I have been experimenting with creating 2D maps that can be explored in three dimensional space using D3.js and Three.js.  The goal was to produce some highly polished prototypes with multiple choropleth maps that could be easily navigated on a single page.  Additionally, I wanted to make sure to address some of the common tasks that arise when presenting map data such as applying well-formatted titles, legends and elegantly handling mouse-over events.

Hall leverages this capability to produce a set of U.S. maps showing the prevalence by state of various cancers. Each one has a mouse-over function, allowing the reader to get specific information on each state (again, click through for the full effect):

Interactive maps with D3.js, Three.js and MapBox, by Steve Hall

Interactive maps with D3.js, Three.js and MapBox, by Steve Hall

The fun visuals and interactive nature of Hall’s graphics make exploring the data almost like a game. This turns dense material into engaging content that people are naturally driven to explore.

Hall plans on using his education at Hack Reactor to become a full-stack Software Engineer, with an eye toward games, generative art, and other realms where he could use his full range of visual and programming expertise.

Read More:

Play Now! Student Makes Game with Leap Motion and Three.js

Hack Reactor Grad's Open Source Angular.js Animation Library Makes a Splash

Grow Your Professional Network 20 Minutes at a Time, Thanks to Student App