Geological Timescale Vertical

100%

Geological Timescale Vertical

✓ Published0🌍 Public

Last edited Nov 6, 2017

Created on Nov 5, 2017

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.

AI-generated description

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").

Still needs some minor tweaking.

Adapted from John J Czaplewski’s http://bl.ocks.org/jczaplew/7546689. Updated to d3.js v4 and made vertical by me.

gpl-3.0 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…

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

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

68% 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…

Interactive Visualization (One Menu) - Earthquake Data

This interactive visualization displays earthquake data from 1900 to 1999, combining a world map and a bar chart. The map uses `d3.geoMercator` and `d3.geoPath` to render earthquake locations as circles, with radius representing Richter magnitude. The bar chart aggregates total deaths by region, updating via a dropdown menu that filters data by twenty-year intervals. Both SVG visualizations share the same dataset, loaded from a CSV file, and employ D3 v7’s data-join and transition methods for updates.

JJunying Li

64% match

Loading thumbnail…

Timelines Chart

This timelines chart shows multiple parallel time-series, grouped into distinct sections, with each segment colored to represent a value. The visualization supports both heatmap-style continuous coloring and categorical qualitative coloring. Users can explore the data by zooming and panning, or scrubbing through a timeline brush at the bottom. The example uses the `timelines-chart` D3 component, populating it with randomly generated data via the `getRandomData` function, which constructs groups, labels, and time ranges.

MMNoichl

64% match

Loading thumbnail…

Main visualization

This visualization displays traces over time as a vertical timeline, with each trace’s duration represented by a black horizontal bar positioned by start time. Background rectangles color-code traces by sequence length, while clicking a bar opens a popup showing trace details. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to render SVG rectangles, with axes and popup interactivity driven by `axisBottom`, `axisLeft`, and DOM event handlers. Data comes from a CSV file containing trace numbers, start/end times, and activity sequences.

NNikki-gea

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

64% match