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.
(available at https://learnforeverlearn.com/candle/)
There are several different helper libraries to make flames. I was initially going after a candle effect, but this seems to be a harder thing to simulate than a more "roaring" fire - I didn't find anything that could reproduce a candle. Instead, here I am using a "volumetric" technique implemented in javascript by yomotsu, available on github at https://github.com/yomotsu/VolumetricFire. I eyeballed the parameters to get an initial look for the purpose of this experiment, but more work is needed on this, based on a better understanding of how three.js works in general. At this point, I am not sure if it is simply goofy looking in the context of this visualization.
Note that the "speed" of the fire increases slightly the older one is today. I originally had this the other way around - I am not sure which way makes more sense.
The probability of living to a certain age, given that one has lived to one age, is calculated based on the 2010 "period life table" from http://www.ssa.gov/oact/STATS/table4c6.html. There is a separate table for males and females. I still need to go back and double-check the method by which these tables are converted to the needed probabilities here.
Basically, as you make it to older years, the probability increases that you will make it to even older years. So, for example, your life expectancy at 40 is slightly larger than your life expectancy at birth.
The same life table is used independent of the birth year. During the initial animation, the corresponding table for that year should be used, but I haven't gone to go track those down.
An svg linear gradient is defined for the fill for the rectangle representing the future, with stops at each age with a stop-opacity that depends on the probability of living to that age.
I wanted to represent the decreasing probabilities of surviving to a given age by decreasing the opacity of the shape representing the rest of one's life. A linear mapping over the entire range did not seem to work very well, so an empirical piecewise linear mapping is used instead.
WebGL support is needed for the "flame" effect. More browser/devices are supporting WebGL now, but it is not a universal thing (my iPad doesn't support it). When there is no WebGL support, the flames are disabled, but the rest of the visualization should work.
On first opening the visualization after choosing a gender and birth year, the visualization pauses for a moment with the full expected lifespan shown at birth, and then passes through each year until it reaches the current year in a few seconds (the same timestep is used for each year, so the length of time of the initial animation depends on the birth year).
As it performs this animation, the life expectancy increases slightly with each year (a screenshot is shown below). I have noticed that the WebGl flames can stutter a bit as this occurs.
The primary next step is to refine the flame, and to tweak on the visual properties of the shape that represents the "future".
I had initially been using an "oldish" looking font (which looked kind of cool), but am using a more modern font at the moment to improve readability.
I was pleased with how easy it was to integrate the Three.js/WebGL components into a D3 visualization - you just move the canvas around as you need to. There are many things I want to learn about Three.js, and am looking forward to playing with it more.
No comments:
Post a Comment