Creating a 3D Data Visualizer

I had a lot of positive interaction with the 3D Data visualizer over the weekend so I wanted to write a blog post to go into the nitty gritty of some of the mechanics behind it. In this post I will cover a lot of the challenges we faced and how we solved them!

Reading raw csv data and converting it into a Unity readable format was the simple part, just had to parse through all the data based on a separator.

string[] csvLines = csvFile.text.Split('\\n');

// Start from the second row if headers exist
int startIndex = hasHeaders ? 1 : 0;

for (int i = startIndex; i < csvLines.Length; i++)
{
        color = colors[i];

        // delimiter = ,
        string[] fields = csvLines[i].Trim().Split(delimiter);

        fieldIndex = fields.Length;

        for (int j = 1; j < fields.Length; j++) // Start from index 1 to skip the category

Another hard part was figuring out how to make it look good, how to build the dynamic borders around the data visualization to make it look like a whole object. To pull this off, we designed a corner piece and a straight pipe and essentially clip them together at runtime.

In practice its actually very simple.

The corner pieces get spawned using the extents of a bounding box that surrounds the spawned data.

It then spawns a pipe from ‘connectionF’ and ‘connectionR’ depending on its position, which spawns the barrier around the data.

Another really cool element of the data visualizer is its procedural grid. This is super simple in fact, it’s just a shader that has a basic grid shape on it and a TriPlanar node to seamlessly tile that object.

Heres and example of that shader graph

Layout of shader graph for 3D data visualizer

Then we spawn the ‘bottom’ grid and the ‘back’ grid and scale it to the extents of the graph. I also have a pass in the shader to repeat it on a smaller scale which gives us a subgrid that due to engine rendering only appears from a certain distance but works well to give more detail when we get closer

One challenge was figuring out how to display data selectively. We had data for each year from 1970 > 2020, however thats too many data points to display in text side by side.

I developed a system to allow the user to key out specific data based on a rule aka ends in a 5 or contains a 2.

if (value.ToString().Substring(value.ToString().Length - 1).Contains(keys[k]))

For the demo video its setup like this:

Which means anything containing a zero or a 5 , So 1970, 1975, 1980, etc.

But with that everything comes together and works. It took a bit of trial and error getting thing to line up properly and look good but once it was figured out it works really well.

I spent time converting it to work in MR and found out that MR has issues with transparency in terms of rendering transparent shaders in the experience. You have to use each headset’s native SDKs for that, we left this generic at the moment.

And there you have it, I hope this was insightful. I will keep updating blog posts with new features and struggles we have with it.

Creating a 3D Data Visualizer

Launch of the blog