Skip to main content
100%

T-minus Time

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Dec 4, 2015

This example shows a rocket-launch countdown timeline spanning one minute before and five minutes after a specified epoch, with axis labels formatted as T-minus and T-plus relative times. The visualization uses two UTC time scales in d3.v3: a primary scale for positioning in absolute time and a translated scale solely to compute tick values relative to the epoch. The SVG axis is rendered with d3.svg.axis and a custom tickFormat function, while toRelative and toAbsolute convert between the two time spaces.

AI-generated description

Although we think of time as absolute—a specific moment—computers typically represent time relative to a particular epoch. The most common epoch is the Unix epoch of 00:00:00 UTC on January 1, 1970.

Sometimes, however, we may want to display time relative to a particular event, such as T-minus time for a rocket launch. This example demonstrates how to go back and forth betwen the two time spaces, converting standard UTC times to relative times. Note that we want to compute the axis ticks relative to the epoch, too. Since the relative time space is simply a translation of the absolute time space (i.e., both have exactly 24 hours a day), a second translated time scale can be used to compute the ticks while keeping the primary time scale in absolute time.

gpl-3.0 Licensed

Similar vizzes