
Making MathBox: Presentation-Quality Math with Three.js and WebGL - thomaspark
http://acko.net/blog/making-mathbox/
======
mbostock
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/>

~~~
unconed
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.

~~~
mbostock
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.

~~~
unconed
... 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?

~~~
mbostock
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.

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

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

~~~
unwind
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.

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

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

~~~
sgrove
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.

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

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

------
josephagoss
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?

~~~
unconed
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...](http://acko.net/files/mathbox/MathBox.js/examples/ComplexExponentiation.html)

------
adrake
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>

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

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

------
sneak
This webpage breaks inertial scrolling on my iPad.

~~~
timc3
Can't read past the fold on mine

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

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

