100%

Geological Timescale v4

✓ Published0🌍 Public

Last edited Nov 13, 2018

Created on Sep 30, 2017

This interactive geologic timescale visualizes deep Earth history as a colored, multi-level column of proportional time intervals, from eons down to individual epochs. Users can click any interval to zoom and focus on that period, or drag the chart to pan, with concurrent transition animations. The visualization is rendered using D3.js v5’s `d3.partition` and `d3.hierarchy` layout functions, and it retrieves its hierarchical interval data from a JSON file supplied by the Paleobiology Database. The SVG display includes interactive rectangles and tick marks, with color-coded segments and abbreviated labels for navigable exploration.

AI-generated description

geo-timescale

geo-timescale on GitHub

A modular D3.js-based geologic time scale that utilizes data from the Paleobiology Database.

To use, simply include timescale.js and timescale.css in your HTML document, and initialize into the div of your choice with timescale.init("id-of-div").

D3 v5 version

Transtition animations are now concurrent. Unfortunately because the way the new d3.hierarchy partition function works, "interval_hash" no longer works the same way as in the previous version.

Funding

Development supported by NSF EAR-0949416.

Similar vizzes

Loading thumbnail…

Geological Timescale Vertical

A vertical, interactive geological timescale visualizes Earth's history from the Archean to the Quaternary. The chart displays hierarchical time intervals as colored rectangles, sized proportionally to their duration, and uses `d3.partition` to compute the layout. It loads interval data from a JSON file, and users can drag the entire visualization vertically to pan through time. The implementation uses D3 v4, SVG rendering, and a drag behavior from `d3.drag` to translate the scale, with data sourced from the Paleobiology Database.

JJulesBlm

93% match

Loading thumbnail…

Geologic Time

An interactive geologic time scale visualizes the hierarchical relationships between eons, eras, periods, and epochs as colored rectangles. Users can drag horizontally to pan across the timeline, click any interval to zoom, or jump to a named period via the accompanying datalist form. Built with D3 v5, the visualization uses `d3.partition`, `d3.stratify`, and `d3.scaleLinear` to lay out the SVG hierarchy, with drag behavior from `d3.drag` handling panning. Interval names, colors, and start/end times come from a JSON file, and the animated zoom transitions rely on D3's transition capabilities.

JJulesBlm

89% match

Loading thumbnail…

Zoomable Timeline

This zoomable timeline visualizes time-series data across multiple scales, allowing users to explore yearly, weekly, and daily granularities. Built with D3 version 6, it uses axis utilities like `d3.axisTop` and `d3.utcTime` intervals to dynamically adjust tick density based on zoom level. The example provides a reset button and a slider to control the number of years displayed, with the SVG chart updating through a custom timeline function that manages grid lines and formatted labels.

CClaudioTM

70% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

66% match

Loading thumbnail…

Fork of Fork of Fork of Time series - labels - change x,y experiment ticks

This visualization displays temporal database relationships from Snodgrass’s SQL model, using rectangles to map validity and registration intervals on dual time axes. D3 v7’s `scaleTime`, `axisLeft`, and `axisBottom` render the SVG graph, while custom tooltip handlers on mouse events reveal date details. The code derives adjusted end dates for open intervals and computes rectangle widths and heights from the scale domains. Data originates from static JavaScript arrays with ISO date strings, parsed into `Date` objects for plotting.

BBart van Pelt

66% match

Loading thumbnail…

Gist 7e5f8625242bd7a92965c702ed9065d4

This interactive time-series visualization displays oceanographic and atmospheric measurements from the Hakai Institute’s Quadra Island station, fetched live via d3.json from an ERDDAP server. Users can explore multiple parameters—including pCO2, aragonite saturation, temperature, salinity, and pH—through a labeled custom variable list, with a brushable context chart for zooming. Built with d3.v4 and SVG, the visualization incorporates a bisector for date lookup, formatted time axes, and optional threshold lines, while Bootstrap and jQuery handle interface controls.

MMbrownshoes

65% match

Loading thumbnail…

Time based moving graph with no labels

Four time-series data columns—Partner, PCL, GOLAN, and DriveU—scroll horizontally across the SVG canvas, updating continuously. The animated chart uses D3's `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with lines drawn via `line` and `curveBasis` geometry. A `transition` with `easeLinear` animates the sideways movement, clipped by a `clipPath` to reveal new data points. Each line has a distinct color from a `scaleOrdinal` range, and the visualization loads data from a CSV file.

PPiotr Paszek

65% match

Loading thumbnail…

Timeline

This example presents an interactive timeline visualization of temporal data, showing the start and end times for multiple entities (such as people) as horizontal bars. Users can zoom and navigate through the time range using provided controls. The visualization is built with D3.js v5, using SVG for rendering and the `scaleTime` and `scaleOrdinal` APIs for time scaling and color assignment. A dropdown menu, created with a custom D3 component, allows users to filter data, while the timeline supports stacked rows and time axis navigation.

Iianleekq

65% match