Implementing the "3D Split Depth GIF" Effect in Three.js

Note: The sample visualization has not been tweaked for small screens yet (or touch/swipe), although it looked ok in landscape on my iPhone and has been reported to work on a Moto X G2.

The sample interactive three.js/webgl visualization using this the method discussed here is at https://learnforeverlearn.com/splitdepth/.

Animated gifs made from the three.js visualization are included below.

2015 - The Internet Discovered Split Depth GIFS

Last January, there was a lot of buzz about a weird technique that could make animated gif's more "3D like". The effect is pretty remarkable.

I was wondering about exploring using this same effect in interactive three.js 3D visualizations (which is a new area for me).

It turns out that it seems to be pretty simple to implement in three.js.

This might provide some additional ways to improve the user experience when working with 3D visualizations and the associated hard-to-avoid clutter.

Displaying Lifespan Information in a D3 Family Tree Visualization

The visualization discussed here is available at (the extra parameter is necessary in the url): https://learnforeverlearn.com/ancestors/?lifespan=true.

You can load sample trees or your own family trees from your gedcom files, and view ancestor or descendant trees from the file.

A few days ago, I was experimenting with a D3/three.js "Flame of Life" visualization (visualization, blog note about it), which used mortality tables from the Social Security administration to give some perspective on how long someone might live given that they've made it to a certain age.

I have started the incorporation of some aspects of this into a D3 family tree visualization I have been working on off and on, with the initial idea to have lots of little "flames" for people in a tree who are still living. This is a tricky-ish thing, and I'm not sure the flames will be large enough to be very visible, but just incorporating the lifespans at all into a tree seems to be an interesting visual thing, in spite of the current screen clutter.

The screenshot below shows a sample ancestor tree.

Flame of Life - a D3.js/Three.js Experiment

The visualization discussed here is available at https://learnforeverlearn.com/candle/

I have been wanting to start experiment with Three.js, because there are so many interesting things you can do with it.

In the current experiment, I use both Three.js and D3.js.

The simple and minimal visualization itself provides some perspective on life.

Popular Posts