Making MathBox: Presentation-Quality Math with Three.js and WebGL | Hacker News Reader

Making MathBox: Presentation-Quality Math with Three.js and WebGL

acko.net

132 pointsthomaspark22 comments

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

[1] http://www.cs.ubc.ca/~tmm/courses/533-11/book/

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.

... that's kind of why I made it a point to mention d3.js and heap lavish amounts of praise on it in the article. Which you read, right?

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.

The github link is https://github.com/unconed/MathBox.js

As a math/visualization geek I'm smitten by this.

Loved this quote:

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

I agree.

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.

Oh hackernews, i knew if i came here I'd find people bitching about some inconsequential detail.

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.

I was at full frontal and this presentation was captivating. One of the best talks I have ever seen. Bravo.

Beware, the page spams your history while you page through it.

Hey unconed, is it possible to drop mathematical functions into this? Or do you have to code them in?

What I mean is can this partially replace Mathematica? Can we type a mathematical formula and have the software build the animations?

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:

http://acko.net/files/mathbox/MathBox.js/examples/ComplexExp...

A friend asked me to provide him with some screenshots since he doesn't have WebGL, and he thought others might also find it helpful:

https://www.dropbox.com/sh/o547nsd7atgg7xa/tF2E2sYaef

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.

Had to turn off JavaScript to access the page. Has anyone else had this issue?

This webpage breaks inertial scrolling on my iPad.

Can't read past the fold on mine

This is a rare webkit bug I reported 9 months ago and which still hasn't been fixed. A refresh should fix it.

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.

Reply on news.ycombinator.com