Life & Supercontinents: an interactive atlas and visual essay

Creating a timelapse of Earth’s supercontinents and evolutionary history in an educational tool that pairs an interactive globe with a timeline of key events

Roles

  • Design
  • Coding
  • Writing

As a dinosaur enthusiast since childhood, I had read a lot about the Earth’s history. I was familiar with the different geological periods, past supercontinents, and the evolution of different branches of life, but I had rarely seen them together in a timeline starting from the formation of Earth. I decided to build a tool to show the evolution of life and the continents together.

Ancient Earth is a similar tool, but I wanted to show a more complete view of paleomaps and evolutionary history, as well as make it easy to move around different points in time. I also wanted to provide more context on the significance of each event

This was a personal project that combined my skills in interaction design, UI design, coding, and many hours of research and writing.

Methods

Concept sketches

The key features I wanted include were:

I started with some sketches to get a sense of how much information can fit on the screen.

Sketch of UI in portrait format Sketch of UI in landscape format with various inset charts
Early explorations of the UI’s information density at various screen sizes

Design direction

Since the main focus was visualising the movement of the continents, I went with a style that would pay homage to Alfred Wegener’s paper proposing the idea of continental drift. I gathered publications from the era and took inspiration from their treatment of type in different contexts, from body to display to labels.

Excerpts containing display type, body text, and labels
Excerpts from “The Origin of the Continents” by Alfred Wegener, a main source of inspiration for the design
Text set in Philibert and Computer Modern
Font selections: Philibert’s chunky and uneven forms resemble some display type of the era, but also call back to the ruggedness of the continents; Computer Modern is a revival of the typeface style commonly used in scientific papers of the era. The nonhumanist vertical axis of the letterforms allude to the rejection of human qualities

I also looked at contemporary industrial design to study their design elements. One major difference was the physicality of controls, which are often large levers or buttons with substantial travel distance. This was a necessity given the mechanical nature of products from the era, but it also had the benefit of clearly signifying to the user how they can interact with the interface.

Camera with black body, silver levers, and trim and labels in gold Adding machine with various levers in black, silver, and red Typewriter with black body and gold keys Fan with black blades and gold grill
Image search results of products from the era: Black and gold is a common colour scheme. Controls tend to be buttons with a lot of physical travel.

Accessible colour palette

Products from the era often used a black and gold colour scheme. Black was a common base colour, which works well in this tool for representing the dark background of space. Gold was a popular accent colour, which I reserved for consistently indicating interactive elements. I also included brown in the colour palette, to be used only in association with geological elements. Gold is a difficult colour to emulate on screen, and works much better when used in contrast with the brown.

Given the complexity of the UI, it was helpful to have a large palette of colours to create visual separation as well as relationships between the different elements. To ensure sufficient contrast, I used Huetone to select a gamette of shades for each hue. The tool helps calculate contrast values between every swatch pairing. It supports the proposed ASPC specification, which is designed to fix some of the flaws in the current WCAG contrast algorithm.

Huetone interface showing a colour palette’s contrast values and how they map along the hue, chroma, and luminance dimensions Screenshot from Life & Supercontinents, with interactive elements in shades of gold overlapping elements in various shades of grey and brown
Huetone visualises contrasts within a colour palette, which was important in designing a UI with many adjacent and overlapping elements.

Map design

Books and research papers are usually limited to showing flat, static maps. Unfortunately, all 2D projections of the globe inherently suffer from distortions of sizes and distances, especially at the edges. For this interactive tool, I wanted to use a rotatable 3D globe, which is immensely more helpful for understanding unfamiliar landmasses.

One main disadvantage of a globe is the limited view to one hemisphere at a time. With so many continental plates drifting around in different directions in the vast oceans, users could easily get lost trying to figure out where to turn the globe. I implemented two ways to orient users to land: auto-rotating to each supercontinent, or tracking the movements of specific continents.

Scotese’s raster maps go as far back as 750 million years ago. For the older reconstructions, I had to create a custom map design to maintain a consistent look and feel between different sources. I generated the maps based on Euler rotations data published in the latest research papers. They specify the displacement of each continental plate, some in terms of nested rotations relative to other moving plates. To convert them into mappable data, I created a custom tool for calculating the chained rotations.

Rectangular map primarily covered by water, with a landmass stretched along the bottom and sides
Pannotia’s position by the south pole means it is distorted beyond recognition when presented in the standard equirectangular projection.
When viewed as a globe, only half of the Earth is visible at a time. To avoid the need to constantly rotate the globe, users can track a continent’s movements throughout time.

Globe implementation

I implemented the globe using a combination of D3.js and WebGL. D3 is a well-established data visualisation library with a module for handling spherical geometry, but I needed to use a WebGL shader to render the roughly 100 raster maps efficiently, without slowing down the page scroll. To further improve performance, I implemented update throttling and low-resolution pre-renders.

I also developed custom globe rotation controls that have the tactility of spinning a real globe. Most globe implementations on the web translate user movements to rotations at a constant rate. This makes drags near the poles drift significantly from the contact point on the globe, due to the different tangential speeds at different distances from the rotational axis. For this implementation, I developed a custom algorithm to ensure the cursor stays at the same point on the globe while dragging.

In many implementations of interactive globes on the web, the point of contact drifts relative to the globe, especially near the poles.
This implementation emulates the physicality of rotating a globe in real life – with the cursor staying at the same point on the globe.

Research & data visualisation design

The most time-consuming aspect of this project was the research and writing. Evidence for early events are harder to find, leading to inconsistent timelines between different interpretations of data. In order to construct a cohesive narrative, I had to read through many research papers and reference only a select few.

Showing all of Earth’s history in one timeline proved to be a design challenge. Evidence of complex multicellular life only dates back to the most recent fifth of Earth’s history, while fossil evidence of prior life is significantly scarcer. To avoid crowding the history of all plants and animals in a small sliver of the timeline, many textbooks use a logarithmic scale that compresses timespans the further back in time you go. However, I wanted to show time on a linear scale, since it is much easier for humans to comprehend. I decided to use a magnified timeline for the most recent events before zooming out to clearly show its scale relative to the entire history of Earth.

The timeline transitions to a different magnification level for pre-Cambrian events, to accommodate the lower density of information available while preserving the intuitiveness of a linear scale.

Results

Try it out: Life & Supercontinents

Life & Supercontinents in desktop and mobile view
Life & Supercontinents works in your browser, compatible with various devices.