Skip to main content
SimilarExport ZIP
100%

Categorized Timeline Using Dates

✓ Published0🌍 Public
BBBischof
Last edited Aug 17, 2016
Created on Aug 17, 2016

This example shows US military conflicts from 1776 to 1876, divided into separate horizontal lanes by category: colonial, Native, European, Latin American, and internal wars. Each event is drawn as a rectangle positioned along a shared date scale, with overlapping events automatically stacked within each lane. The visualization uses the d3.layout.timeline plugin to compute lane assignments and band positions, while d3.scale.ordinal maps conflict categories to a fixed color palette. Data comes from a CSV file listing each war’s start and end dates and its sphere of influence.

AI-generated description

An example of d3.layout.timeline that shows wars the United States has been involved in during its first 100 years (from Wikipedia). Events have been categorized and rendered in separate lanes for colonial wars, native wars, internal wars, wars involving European powers, and wars in Latin America.

forked from <a href='http://bl.ocks.org/emeeks/'>emeeks</a>'s block: <a href='http://bl.ocks.org/emeeks/3184af35f4937d878ac0'>d3.layout.timeline categorized timelines</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Categorized Timeline Using Dates

This example demonstrates a categorized timeline using the d3.layout.timeline plugin, displaying events grouped into four distinct lanes (PROD, INT, DEV, SBX) based on their sphere attribute. The visualization uses an SVG rendering with a color scale mapping each category to a distinct color, and the timeline layout automatically assigns rows to overlapping date ranges within each category. The data shown comes from a CSV of deployment events, and the timeline is filtered to a specific date range. The example highlights how d3.layout.timeline can organize categorical temporal data into swimlanes while maintaining clear visual separation between groups.

CCBasis
79% match
Loading thumbnail…

Timeline

This timeline displays yearly data from 2008 to 2020, showing the number of lines and the ratio of non-NA values as colored bars. The visualization uses a linear scale for both axes, with bars colored from red to green based on the ratio, and includes an interactive tooltip that reveals exact values on hover. Rendered as an SVG animation, the example loads D3 via UNPKG and imports functions like `scaleLinear`, `axisBottom`, and `axisLeft` from the D3 module, with data provided inline as an array of objects.

MMauradion
65% 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
65% match
Loading thumbnail…

timeline

The timeline example displays a vertical list of years, from 2013 down to 1981, with the most recent year labeled "Now." It shows a sequence of dated entries, each linked to a map zoom level and some with geographic coordinates. The visualization uses a custom HTML template with list items, where each entry carries attributes like `zoom`, `lat`, and `lon`. The code relies on plain HTML and CSS classes for styling and interaction, with no external JavaScript libraries like D3 or Three.js evident. The data source is a Gist, and the rendering approach is a static list of clickable year labels.

5534N
64% match
Loading thumbnail…

Timeline

This example shows an interactive timeline of events, rendered as numbered circles positioned along a horizontal line. Each circle represents a data point with a label, and hovering highlights the corresponding event. The visualization is built with React and rendered to SVG, using D3’s `d3.scaleTime` and `d3.axisBottom` to construct the time axis. Data is loaded from the European Parliament’s open data portal, and the layout is calculated with a custom React component that maps event dates to x-coordinates.

Aannesmets
64% match
Loading thumbnail…

Timeline with 2 streams and events

A hand-drawn style timeline plots education and work history as two horizontal streams on opposite sides of a central axis, with personal events marked as vertical dashes below. The SVG visualization uses D3.js for scales, axes, and data binding, while Rough.js renders the sketch-like aesthetic. Labels for each period identify employers and degrees, and event annotations include dates and short descriptions. The code defines data arrays for education, work, and events, mapping them to time-encoded positions along the x-axis.

PPatrick Wojda
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
Loading thumbnail…

Bar chart

This example shows a horizontal timeline of events for different crews, with colored bars marking periods of work, stops, and idle time. The code loads data from a CSV file and uses D3’s `scaleTime`, `scaleBand`, and `scaleOrdinal` to map dates, categories, and colors, while `axisBottom` renders the time axis. The SVG is sized at 960 by 120 pixels, and rectangles are filled with green via CSS, though the visible chart only displays the empty axes scaffolding.

GGeolffrey S Mena
64% match