Geologic Time

100%

✓ Published0🌍 Public

Last edited Sep 8, 2019

Created on Sep 8, 2019

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.

AI-generated description

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

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

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

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

71% match

Loading thumbnail…

D3-timeline in D3.js V3 ref from (jiahuang)

This example visualizes a timeline with stacked horizontal bars representing different stages of a process, such as waiting, vital checks, and doctor visits, with each segment color-coded and labeled by duration. The D3.js V3 timeline plugin renders the data as SVG rectangles on a time axis with 15-minute tick intervals and supports interactive navigation through chevron controls. The visualization uses `d3.time.format` for tick labeling and accepts data in a structured format with starting and ending times, demonstrating how to build a customizable, event-based timeline with D3.

Vvillagef

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

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

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

68% match