Categorized Timeline Using Dates

100%

Categorized Timeline Using Dates

✓ Published0🌍 Public

Last edited Jan 16, 2018

Created on Jan 16, 2018

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Categorized Timeline Using Dates

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.

BBBischof

79% match

Loading thumbnail…

timelines

This example demonstrates a versatile D3 timeline component built with SVG, offering over a dozen variations including simple timelines, circular markers, stacked layouts, and interactive features like hover, click, and scroll events. The code implements a custom `d3.timeline` function that supports configurable axes, colors, labels, tick rotation, relative timepoints, backgrounds, and navigation controls. It uses D3 v3's time scales and formatting, along with jQuery for event handling, to render timelines with rectangles or circles as visual elements. The component also handles complex layouts with stacked rows, axis positioning, and color mapping from data.

IIan

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

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

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

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

72% match

Loading thumbnail…

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

This example displays a medical clinic’s patient flow timeline, showing categories like Waiting, Vital, and Doctor as labeled, color-coded bars positioned along a time axis from 10:10 to 11:30. The visualization also includes a separate SVG legend mapping each category to its assigned color and label. Built with D3.js v3, the chart uses the custom `d3.timeline()` API, which accepts options for stacking, margins, tick formatting, and axis navigation, rendering the timeline as SVG elements with rects and text.

Ssrinivasjavvadi

71% match

Loading thumbnail…

Timeline

A horizontal timeline charts patient flow through stages like Waiting, Vital, and Doctor, with colored bars and labels showing durations. The chart uses a custom `d3.timeline` function built with D3 v3, rendering SVG elements. It stacks rows, applies a 15-minute time axis with `d3.time.format`, and supports custom tick formatting and interactive navigation. Colors are mapped to each stage, and the example demonstrates how to configure margins, stacking, and axis labels for a clear temporal sequence.

Zzeeeeem

71% match