Comparing the Incomparable | 3D Data Visualization
A web tool that images vastly different numbers
You rarely see data visualizations comparing figures from distant orders of magnitude. Of course, there’s a good reason for this: if one number shrinks beside another, it may not take up enough space to have any visual meaning. That said, we can gain a lot of insight from cementing the relationship between numbers that are very far apart. For this reason, I’ve started experimenting with three-dimensional data visualization to display relative figures too far apart to read in two dimensions.
I have two goals in writing this article. I want to provide a quick tool for visually comparing numbers that fall several orders of magnitude apart. I also want to encourage unconventional approaches to data visualization as more than a gimmick. By looking at numbers differently, we can understand them in a new way.
There are some limitations to this approach. Quantities in three dimensions are more mysterious than quantities in 2D. It is much easier to estimate the number of candies in a jar if you pour it out and spread the candy on the table. By putting information in three dimensions, I am collapsing it, but I am also allowing more information to appear in the same place at once. (It’s much more efficient to store your candy in jars.) Additionally, despite spending many hours on screens, we perceive our world in three dimensions. Our everyday understanding of three-dimensional space gives the images concrete meaning.
Net Worth
This project takes inspiration from two compelling data visualizations that went viral a couple years ago. They displayed the same info in two different and unexpected ways. One was a TikTok by Humphrey Yang, which showed Jeff Bezos’ wealth would weigh 58 pounds in rice if one grain represented $100,000. The other was an interactive visualization by Matt Korostoff, where you can only see the vast expanse of Bezos’ net worth if you scroll for a long time (an alternative to 3D that allows you to show vastly different quantities). Both visualizations showed me that wealth inequality — an issue I was already aware of — went further than I had imagined. These images allowed me to conceptualize the usually mind-scrambling scale of extreme wealth.
Because Elon Musk has since overtaken Jeff Bezos’ position as the world’s richest person, I’ve visualized his net worth instead.
p-value
I’ve visualized two p-value thresholds for statistical significance. Creating this image helped me better understand what these thresholds mean. The p-value represents the probability of the null hypothesis (the hypothesis that variables have no statistically significant correlation) when testing variables in a dataset. A sufficiently low p-value enables you to declare a relationship statistically significant, and here we can see in dark and light blue two thresholds for statistical significance. 0.05 is the typical standard (dark blue), and 0.005 is a more rigorous threshold (lighter blue).
In these images, smaller quantities are nested into the larger ones. With the p-value example, this technique is not unusual, as the p-value is an expression of probability as a fraction of one. It’s common to show parts that sum to a whole in a nested form, like in a pie chart. More unusual is that p<=0.005 is imaged as a chunk taken out of p<=0.05. I have chosen to work this way for a couple of reasons. In these visualizations, the smaller numbers are small enough relatively that the “bites” taken from their larger neighbors aren’t all that substantial. In addition, this technique allows the small figures to appear closer and for all information to stack neatly into a single prism.
Population
As a way of considering where Americans stand in our larger global context, I’ve made this visualization of U.S. population as nested in to the total world population.
Because my approach is unusual, and I’m comfortable with the library, I’ve used babylon.js to write these visualizations. It’s a JavaScript library made for 3D art. While it doesn’t have as many out-of-the-box data viz features as data-specific libraries like D3.js, it’s flexible and spatial-numerically driven. With some elbow grease and creativity, Babylon can be used to display data.
Orders of Magnitude | A Visual Reference
In my final example, I’ve used this same technique to show sequential orders of magnitude (powers of ten). This example includes some interactivity, and you are welcome to click in and check out the code. This example could be used as a quick reference when you are comparing values several orders of magnitude apart. If you don’t have time to create a visualization for a specific set of numbers, you could still have a ballpark reference by checking the power of ten for each number against this visual.
Make Your Own
I’ve created a resource at this link, so that you can create your own three-dimensional data visualization comparing two values. If you are working on a data science project where you’ll want to compare two figures that are very far apart, this resource might be useful to you. Below, I’ve detailed an example of how you can use this tool. Note that it works best in a desktop or laptop web browser.
Using recent data from the United States Census Bureau, I’ve estimated that there are 9,868 self-identifying transgender people in North Carolina. It’s the state with the smallest percent trans population in the contiguous U.S., according to the Census’s recent Household Pulse Survey. If I use Matplotlib to create a bar chart of the trans population alongside the state’s total population of 10.39 million, the trans population becomes vanishingly small. You actually can’t see it.
It’s important to understand different demographic groups as a percentage of the population, and at the same time, rendering a small group invisible on a chart can be a disservice. For example, when it comes to policy-making, it’s important that even small groups receive the representation and resources they need to thrive. The issue is especially urgent when a group experiences systemic disadvantages.
As you can see below, if I use the 3D method, the trans population in North Carolina becomes visible. To use the online tool, I simply navigated to the link, and clicked each numerical field to alter it. Then I added labels by clicking and typing the label fields. As a semi-hidden extra, I’ve also made it possible to change the title. Once the visualization is complete, you can screenshot it. You can add further edits with the design software of your choice.
When I first began working on the code that drives this article, I tried a few different design tactics for looking at disparate numbers. In addition to 3D, I played with creating two-dimensional and even one-dimensional references that animated over time. I ultimately focused on 3D because of its handy compactness. (The only visualization above that requires animation is the Orders of Magnitude reference, and that’s because the figures span ten orders of magnitude.) The overall process sharpened my awareness that even the same quantity can look different depending on how you approach it. This exploration allowed a new intimacy with data.
All images unless otherwise noted are by the author.
