Regarding the use of three dimensions for visualization, see Tamara Munzner's forthcoming book, "Visualization Design and Analysis: Abstractions, Principles, and Methods." [1] Although still in draft form, the section "No Unjustified 3D" is relevant:
> Many people have the intuition that if two dimensions are good, three dimensions must be better – after all, we live in a three-dimensional world. However, there are many difficulties in visually encoding information with the third spatial dimension, depth, which has important differences from the two planar dimensions.
> The cues that convey depth information to our visual system include occlusion, perspective distortion, shadows and lighting, familiar size, stereoscopic disparity, and others. This section discusses the costs of these depth cues in a visual encoding context, and also the challenges of text legibility given current display technology. It then discusses in what situations the benefits of showing depth information could outweigh these costs, and the need for justification that the situation has been correctly analyzed.
> In brief, 3D is easy to justify when the user’s task involves shape understanding of inherently three-dimensional structures. In this case, which frequently occurs with inherently spatial data, the benefits of 3D absolutely outweigh the costs, and designers can use the many interaction techniques designed mitigate those costs.
> In all other contexts, the use of 3D needs to be carefully justified. In most cases, rather than choosing a visual encoding using three dimensions of spatial position, a better answer is to visually encode using only two dimensions of spatial position. Often an appropriate 2D encoding follows from a different choice of data abstraction, where the original dataset is transformed by computing derived data.
Although I'm not sure I would recommend it, you can do 3D in D3.js by extending the DOM to represent a 3D scenegraph. For example, with X3DOM: http://bl.ocks.org/1291667
I'm well aware of the complications, however, I've found a lot of it comes down to priming your audience. I used subtle orbiting motions, slow transitions and reference grids to let the audience see where the depth was at all times. I haven't tried adding real shadows or SSAO, but it would only enhance this. There's also 3d displays to consider.
I think part of the problem is that we haven't had good tools to do this with. My mental sketchpad is in 3d, mathbox is what it looks like.
If you are trying to understand three-dimensional functions, it makes sense to view them in 3D. I was just pointing out that in the domain of information visualization (separate from math and scientific visualization), 2D is generally preferred for perceptual reasons.
Indeed, thank you! Hugs all around. :) You made the argument that D3 doesn't do 3D because of the DOM, and I just wanted to clarify that while this is mostly true (caveat custom elements such as X3DOM), the reason is perceptual as much as technical.
"I wasn't 100% sure whether other people would have the same a-ha moments that I've had, but I'm convinced more than ever that seeing math in motion is essential for honing our intuition about it. MathBox not only makes animated diagrams much easier to make and share, but it also opens the door to making them interactive in the future."
It's stuff like this that makes me pine for better WebGL support across the board.
While I enjoyed the article, I found its presentation to be very distracting. The rotational-scroll effect, font choice and the breaking of the back button hurts the page's usability.
The library and visualizations were great, but the demo page can take some polishing still.
I really didn't understand that anything I did on the page (scrolled down to read more text, clicked the left/right arrows under one of the illustrations) was going to affect my browser history, and was puzzled when I failed to get back here with a single click on Back. Very surprising, and actually quite annoying.
An impressive amount of work went into making this page. Everyone is complaining about the JS and breaking the back button, which is a shame, because if you look past that bug you see some great visualizations and content.
It looks absolutely amazing, and I loved the visualizations. If I had this in early calculus, or even before that, in middle school when I was first learning to program but hated maths, it would have been amazing.
I see a ton of potential down this route, thank you for sharing.
I do worry that it requires a sharp mind to be able to design visualizations clearly, but that's likely a problem all education faces - and fails at - regularly, but it goes unmentioned because of the nature of textbooks and isolated schools.
You have write a JavaScript function to calculate the data points. There is no editor or UI for it, but the API is pretty simple. There are examples on GitHub, view source on this for example:
Stevens talk at Full Frontal was absolutely fantastic, one of the best I have ever seen. I highly recommend watching the video once it comes out. It is very impressive to see such complex topics being presented with such ease and style.
I'm sure this is a nice library, but it really needs a fallback better than "please get WebGL" for the many users who currently see only that error message.
> Many people have the intuition that if two dimensions are good, three dimensions must be better – after all, we live in a three-dimensional world. However, there are many difficulties in visually encoding information with the third spatial dimension, depth, which has important differences from the two planar dimensions.
> The cues that convey depth information to our visual system include occlusion, perspective distortion, shadows and lighting, familiar size, stereoscopic disparity, and others. This section discusses the costs of these depth cues in a visual encoding context, and also the challenges of text legibility given current display technology. It then discusses in what situations the benefits of showing depth information could outweigh these costs, and the need for justification that the situation has been correctly analyzed.
> In brief, 3D is easy to justify when the user’s task involves shape understanding of inherently three-dimensional structures. In this case, which frequently occurs with inherently spatial data, the benefits of 3D absolutely outweigh the costs, and designers can use the many interaction techniques designed mitigate those costs.
> In all other contexts, the use of 3D needs to be carefully justified. In most cases, rather than choosing a visual encoding using three dimensions of spatial position, a better answer is to visually encode using only two dimensions of spatial position. Often an appropriate 2D encoding follows from a different choice of data abstraction, where the original dataset is transformed by computing derived data.
Although I'm not sure I would recommend it, you can do 3D in D3.js by extending the DOM to represent a 3D scenegraph. For example, with X3DOM: http://bl.ocks.org/1291667
[1] http://www.cs.ubc.ca/~tmm/courses/533-11/book/