100%

Geological Timescale v4

✓ Published0🌍 Public

Last edited Jan 13, 2020

Created on Jan 13, 2020

This interactive visualization presents the geologic timescale as a horizontally scrollable, zoomable column chart. Users can click on a time interval to expand it into smaller subdivisions, revealing the full hierarchy from eons down to stages. The chart is built with D3 v5, using the `d3.partition()` layout on a hierarchical structure loaded from a JSON file. Data comes from the Paleobiology Database. Rectangles are colored by interval and animated concurrently as the hierarchy is navigated, with drag-to-pan functionality for exploring the timescale.

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.

forked from <a href='http://bl.ocks.org/JulesBlm/'>JulesBlm</a>'s block: <a href='http://bl.ocks.org/JulesBlm/a25026573de31ea91a2a779d3366929b'>Geological Timescale v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Geological Timescale v4

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.

JJulesBlm

93% match

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

90% 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

85% 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

71% match

Loading thumbnail…

Document

This example shows multiple randomly generated time-series line charts, each with a y-axis label and colored lines. Users can brush to zoom into a time range and drag to pan across the data, with a clip path preventing overflow. The visualization is built with D3 v4, using `d3.brush`, `d3.drag`, `d3.scaleTime`, and `d3.voronoi` for hover interactions, rendered as SVG with animated updates.

TThanaporn-sk

68% match

Loading thumbnail…

[popup text]

An interactive sunburst chart visualizes the hierarchical structure of the Bible, showing books within major sections. Users can toggle between two sizing modes: linear, where each outer slice represents a single book, and grouped, where slice size reflects the number of chapters per book. The chart uses d3.partition and d3.arc for geometry, with d3.hierarchy for data structuring. Labels smoothly track their arc centroids via custom tween functions (arcTweenPath and arcTweenText), fading out when arcs become too small. The visualization randomly selects from seven color schemes and is rendered using SVG with D3 transitions.

TThanaporn-sk

68% match

Loading thumbnail…

timeline chart with zoom

This timeline chart displays 15 vehicle intervals from their start to end dates, with each vehicle assigned to its own horizontal SVG band. The visualization uses D3v4’s time scale, axis, nesting, and zoom behavior, which is applied to a full-page overlay rect; panning and zooming rescale the x-axis and updates each band’s rectangle positions and widths via the zoom transform. Data is generated randomly in `data.js`, and the tooltip shows the raw date strings on hover.

TThanaporn-sk

67% match

Loading thumbnail…

Zoomable Icicle

This interactive visualization displays a hierarchical dataset using an icicle chart, where nested rectangles represent the flare data’s categories and subcategories. Clicking a rectangle zooms into that level, while clicking the top bar returns to the previous view. The chart is built with D3 v3, using `d3.layout.partition` to compute the layout and `d3.scale.linear` for the x and y coordinates. Animated transitions, driven by `rect.transition()` with a 750-millisecond duration, smoothly rescale the rectangle positions and sizes, with colors assigned via `d3.scale.category20c()` based on parent keys.

TThanaporn-sk

67% match