Exploring Spatial Data Visualizations in WebVR

Role

Art Direction, Data Visualization, UI/UX/XR, Copywriting

Team Members

Prayash Thapa, Mitch Daniels

Agency

Viget

Vigeverse is a data visualization of the Github repositories at Viget. Named for its’ visual likeness to a universe, this WebVR experiment offers an exciting new medium for us to explain virtual networks and ecosystems.

Vigeverse was designed and developed in four weeks. We had just launched our first WebVR project, Lights Out, and we were looking to create something more challenging and interactive. Creating a data visualization was the perfect blend of content mapping and emerging tech.

The Idea

Typical data visualizations follow a linear display (flat, yawn). So we asked ourselves, what if data didn’t feel like a spreadsheet? What would happen if you could explore by a data set by walking around it? Or perhaps through it?

Since Viget has been building websites long before the dawn of Github (2008)—it was natural choice for our content source. We had a number of different data points we could work with, including: the repository name, number of contributors, source lines of code, age (date created v. date last updated), and the industry category. We had 447 data points, to be exact.

Mapping the Data

Mapping the data was one of the most interesting components. Specifically, how do we align the data against the x, y, and z axis—without compromising on performance?

Since we’re working with a three-dimensional space, strategically clustering the most frequently updated repositories around the origin point was the most logical path to encourage exploration. We wanted to draw people in. So, our most active projects are grouped together in the center, whereas the oldest, least active projects fall on the outskirts. This galaxy grouping creates a virtual universe of Viget activity.

If you’re into the nitty-gritty details (as outlined in the sketch above), the x-axis correlates to when the project repository was created and the z-axis refers to when the project was last updated. Older, less active repositories are randomized to scatter across the x and y axis +/- 50% on either side of the origin point.

Furthermore, the size of each object represents the source lines of code. Repository objects with more code are larger in size. Hovering on a single object then produces a number of small orbitals. Those represent the number of contributors on that particular project. The colors also denote additional details. Orange nodes are private repositories. Blue nodes are public.

The Look

One of the best aspects of this was being able to indulge my obsession with space (NASA! Space X!). Teko was the perfect futuristic typeface. It’s balanced with a touch of Viget-friendliness in the copy font and color palette. I used a soft background gradient as a light source and Viget brand colors for the object nodes.

The Goal

Create a data visualization that transcends the typical infographic and generates excitement about the possibilities of WebVR.