Moby Dick word chart
This javascript Three.js WebGL Bubble Chart experiment was inspired by the work of Jim Vallandingham. Jim explains on his website how he replicates the main concept of those data visualizations from the New York Times made by Mike Bostock, Shan Carter and Matthew Ericson. He uses D3’s force-directed layout to achieve this result.
Although very inefficient for the user because in our case the 3D aspect is only aesthetic, I thought it might be interesting to experiment with Three.js and try to reproduce the same result in a 3D environment, without any physics engine such as Ammo.js or Physijs.
The goal here is not to provide a data visualisation for analysis and research, for 3D perspective will almost always distort your data and you’ll choose 2D over 3D most of the time. And if 2D computation time may be acceptable, it’s often way more time-consuming to render your animations in 3D via your web-browser.
The result here runs quite smoothly even on an “old” smartphone, with a reasonable amount of data (approximately 70 spheres in this exemple).
Here is a link to the experiment, note that you’ll need a web browser which support WebGL in order to see it.

The setup is simple: we create our meshes with a first loop called once, then we update the spheres positions with two loops called every frames of the animation. When each sphere has found its rest position, the setup stabilizes.

See the full article and workflow : http://arnaudsvart.com/portfolio/mobydick/
Moby Dick word chart
4
14
0
Published:

Moby Dick word chart

4
14
0
Published: