Market Drivers and Detours

The previous year’s campaign. The client liked the narrative, but seeked a more interactive and interesting data visualization.

Data spreadsheets. Surely we can make them more digestible and interesting. Enter data visualization. 🙌

Starting with a proof-of-concept, we set out to create a 3D environment where users could explore graphs using both pre-scripted and user-controlled camera movements.

By keeping the 3D prototype separate from UI, we were able to focus on key features and iterate quickly. Including: setting up an Orthographic Camera, mapping multiple datasets within multiple stories, normalizing X/Y axes and more.

The client was eager to see how the data sets would compare in the datavizualization. I created a PSD with linked screenshots and Layer Comps. This made it efficient to iterate, update screenshots, and automate an export process for a client-ready PDF.

Raycasting for hover effects, eased camera animations, interactive hotspots — all running at 60FPS.

View Live Prototype

The code was organized, performance focused, well-documented and DRY.

Open Prototype Code Repo

With the dataviz complete, we integrated in the UI and narrative. The campaign launched on WSJ. The client and us agreed, we were able to build intruiging interactivity into the data and provide a vehicle for story-telling.

And of course, mobile responsive. We were able to reach our goal of maintaining interactivity and 60 FPS performance on mobile devices.