DataViz: How Best to Use the Third Dimension without a Natural Spatial Analogy?

3D [Embodied] from João Beira on Vimeo.
Choreography by Yacov Sharir

I have been playing with getting familiar with three.js. It feels like a natural evolution of my interests with the power of web tools. It is cool and fun to do.

Occlusion in 3D
can obscure meaning

However, when viewing 3D on a 2D screen - despite it initially looking neat with an "I-made-this" pride - the risk seems greater to obscure rather than enhance insight.

I am taking a step back, simmering on how best to use the extra dimension when there is not a natural special connection to it.

I don't have a feeling for the answer for this yet. I am in the process of compiling and reviewing examples in order to get an idea of what might look nice but not work, and what might actually work.

Are there additional examples I should definitely include? Let me know.

Where It Naturally Works
CGI DataViz Show Reel
by 422 South

If we are viewing something that is a representation of a "real" object - a medical image, a subsurface geological structure with isopleths, the movement of something through space and time (watch the cool 422 South Video embedded here) - the person viewing it arrives with a predeveloped familiarity.

For the coming immersive experience revolution, a la the Oculus Rift, these tools are also a natural fit.

Where There Isn't a Natural Spatial Context

When there is not a natural spatial fit, it is not so obvious what works when trying to use the extra dimension.

The working table below lists some examples I've looked at when thinking on this subject. I intend to include more as I can. My motivation is to determine effective ways for incorporating the 3rd dimension in a family tree visualization (where I'm not showing people on a map/globe, which would of course have a natural spatial component).

I initially chose these examples based on having a preattentive "that's pretty cool!" reaction, whether or not I appreciated the intended meaning (this done via a quick scan of a google image search for "data visualization 3d").

...the litmus test of ‘usefulness’ is that the third dimension ... is conveying some additional data or meaning that a 2d representation of the same thing would not have.

R. Girling, in 3D User Interfaces: Where Are We? Where Are We Heading? (2009)
A Guiding Principle for the Inclusion of 3D



Examples of Using 3D for Conveying Non-Spatial Insight
Part of my initial incorporation of 3D for a family tree
One of my recent first attempts at using 3D for a family tree visualization. The implementation done as part of initial exploration with three.js. The problem is that space doesn't mean anything here - the cute little animation to a helix doesn't reveal any new insight and in fact just gets in the way of it.
By Reza Ali in 2009 (Java, processing)
Link (with video)
This is an impressive artistic experiment in visualizing the Dewey Decimal system. I really like the glowing nodes, and he did the same helix thing I played with, but I don't see how this enhances or reveals insight that 2D wouldn't do just as well. This irritates me because I would have thought it would work better!
2009 project for a class by P. Hovey
Link
I'm not sure why, but I ran into yet another Dewey decimal visualization. The juicy translucency caught my eye - I'm a sucker for it. But in the end, does the extra dimension enhance understanding?
2012 class project for a class by RJ Duran
Link
From the link:

"The goal of this project was to visually explore and navigate the connections between words associated with the word “WATER” found in book titles from the Seattle Public Library database from 2006 to 2011 The tree structure basically shows the same information. It differs in the fact that you can explore the data by “flying” through 3D space to observe the connected words as text nodes connected to lines. The location of each branch is determined by it’s location with each branch itself."

This is quite interesting to look at. Does the 3D help?
Directory Viewer by B. Burgmeier
Link
Definitely cool looking - the use of rings to orient the user is a nice touch. Does the extra dimension aid in working with directories?

This is part of a much larger and ambitious 2005 project "The Representation and Navigation of Complex Data" (see here for the poster - one of the coauthors is the choreographer in the video at the top of this post).

Once again, the translucency grabs me. Can we learn to use interfaces like this?

CSS3D and WebGl playing together - Initial Experiments via a Cylindrical Family Tree

I got a few things straightened out with using both CSS3D and WebGl in a family tree viz. Lots still to do (especially on colors), but this seems pretty cool so far. Screenshots and some notes are below.

Mapping Bezier Curves from d3.js to Three.js

As part of incorporating three.js into a d3 viz, I wanted to be able to draw the nice smooth curves that d3 generates. It turns out that three.js has a CubicBezierCurve3 that matches nicely with the output of the d3.svg.diagonal function.

The short video below shows it in action - details are included further below.

Transitioning from 2D/svg in a D3 Viz to 3D in Three.js:
Mapping Bezier Curves
How to Map Bezier Curves from d3.js to Three.js

Popular Posts