This is an interactive timeline project I programmed to explore the relationship between the distant past, the far future, and the present moment. My goal was to help better understand our size and place in the temporal dimension of our universe.
The project was inspired by Charles and Ray Eames' short film "Powers of Ten" (1968), which was based on Kees Boeke's book "Cosmic View: The Universe in 40 Jumps" (1957).
I noticed that displaying data over a very wide range of values is usually done with a logarithmic scale. While functional, this often distorts the visualization and doesn't always make intuitive sense. For this visualization, I wanted to display the data linearly at any given point in time but allow the viewer to manipulate the field of view logarithmically.
Similar to how programs like Google Earth provide a better sense of spatial scale by allowing users to zoom in and out, I hope this program can help build a better mental map of the time that surrounds us.
The timeline moves from left to right, from the past into the future. I chose this direction because it is the dominant reading direction in most cultures and fits desktop screens better than a bottom-to-top vertical orientation.
There are two scales visible. The bottom scale shifts between common units we use daily (seconds, minutes, hours, years), while the top stationary scale uses only the SI unit "second" with scientific notation for numbers that are too large or small for standard prefixes.
Dragging allows you to change the field of view. The logic tries to keep the point under your cursor stable, but as you approach zero, the dragging shifts the field of view linearly. This prevents all points from snapping to zero instantly.
The vertical line at zero represents the present—an axis of symmetry between past and future. You can drag this axis, but it will always stay in view. Clicking the center box on this axis toggles between two modes:
- Relative Mode: The axis stays at zero with negative numbers to the left and positive to the right.
- Real-time Mode: The axis locks to the current Gregorian date and time, causing the timeline to move leftward with every passing millisecond.
To visualize our standard cyclical time units (like the rotation of clock hands or the revolution of the earth), I draw waves on the axis. These waves are composed of smaller waves representing smaller units, following the waves of the next largest unit.
I've included a few different ways to visualize datasets, which are loaded from CSV tables. You can switch between these datasets by hovering over the central axis.
Time Spans
Durations, such as the average human lifespan or the half-life of Uranium-235, are drawn as rectangles. Because spans don't always have a fixed starting point, they stay centered on the screen unless the "Now" axis moves outside their range.
Cyclical Events
For repeating events like the Moon's orbital period or a Galactic year, I use sine waves. The wave starts at the axis, with a wavelength matching the cycle time. As the frequency shrinks, the amplitude decreases until it fades away.
Geological Time
I included a list of geological eons, eras, periods, and epochs. These appear when they are in the relevant view and are color-coded according to the International Commission on Stratigraphy.
Time Points
Specific events, like the Moon landing or the predicted erosion of Niagara Falls, are marked with pins. If an event has a duration, it uses a pin with two needles marking the start and end.
Image Sequences
I also experimented with image sequences to depict change over time, such as tectonic plate shifts. These move along the timeline and can be dragged to scrub through the sequence.
I originally used Processing (Java) to write the prototype and later switched to the p5.js JavaScript library to implement it for the web.