“We now live in a magical time of virtual worlds full of unicorn and rainbows.  Pixelcats ride neon toaster pastry across clear virtual reality skies, and with a few lines of codes you can turn a dataset into a 3D virtual reality visualization,” writes Roger Kenny, an interactive designer at the Wall Street Journal.

He offered a tutorial on building 3D graphics to StoryBench soon after he helped create a 3D virtual reality roller coaster ride to show the performance of Nasdaq. The goal was to demonstrate more than 20 years of ups and down on the exchange. Storybench is a partnership between Northeastern University’s Media Innovation program and Esquire magazine. 

In the Storybench tutorial, Kenny focuses on creating a 3D column chart using Javascript libraries, Three.js and 3D.js. The information he uses to create the chart is the U.S. population by data from census.gov for which provides the link. 

He then carefully and methodically provides each step, link and even the coding needed to create your chart.  He even offers tips on adjusting the camera and lights as well as creating labels, sources and axis.  The end result is a 3D color chart. 

Allow some time if you plan to do this exercise and keep it in mind it is just the beginning of an exploration.  As Kenny points out “ The purpose of this tutorial was to show the fundaments of how to bring together Three.js and D3 in the browser and VR.  While we’ve done that, there are plenty of ways our simple project could be improved.” He elaborates on this in the post.