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 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.
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.