Skip to main content
SimilarExport ZIP
100%

Swimlane using d3.js

✓ Published0🌍 Public
TThanaporn-sk
Last edited Jun 8, 2019
Created on Jun 8, 2019

A swimlane timeline charts randomly generated work items across labeled lanes, color-coding each item as past or future relative to the current date. The main chart uses a D3 time scale with Sunday and month tick marks, while a smaller overview panel provides a zoomable navigation brush. The code updates D3 v2 to v4, replacing legacy APIs with `d3.scaleTime`, `d3.axisBottom`, and `d3.axisTop` for time-based axes and rendering. Items are positioned using linear y-scales per lane, with lanes automatically subdivided to avoid overlapping intervals.

AI-generated description

A new Swimlane Timeline version

  • d3.v2 -> d3.v4

forked from <a href='http://bl.ocks.org/fmassicano/'>fmassicano</a>'s block: <a href='http://bl.ocks.org/fmassicano/c1be96f1ec4ceba4c6fe0439b8306fbb'>Swimlane Chart using d3.js</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Swimlane using d3.js

This example shows a swimlane chart that visualizes overlapping work items across horizontal lanes over time, with a main chart and a mini overview for brushing and navigation. Randomly generated data is arranged into sublanes to avoid collisions, and items are colored green for past tasks or gray for future ones. The code uses d3.v2 scales, axes, time formatting, and a brush to synchronize the mini and main views. Lane labels, grid lines, and a blue today line highlight temporal context.

TThanaporn-sk
94% match
Loading thumbnail…

Swimlane using d3.js

This swimlane chart displays multiple lanes of time-based work items, with a main interactive chart linked to a mini overview for brushing and navigation. Items are color-coded by whether they are in the past or future relative to the current date. The visualization is built with D3.js v2 and uses `d3.time.scale`, `d3.svg.axis`, and `d3.svg.brush` to handle time axes and selection. Data is randomly generated by a helper script, producing lane assignments and start/end dates.

BBBischof
92% match
Loading thumbnail…

Swimlane Chart

This swimlane chart displays project phases across six horizontal lanes, with each item rendered as a colored bar positioned along a timeline from 0 to 2000. The visualization uses a main chart for detailed viewing and a miniature overview below, linked through a brush for navigation. Built with D3.js v3 and SVG, the code employs linear scales, clip paths, and brush interactions to map item start and end times onto lane positions. Data is hardcoded in JavaScript, with lane and item styling defined through external CSS classes.

TThanaporn-sk
86% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
76% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
76% match
Loading thumbnail…

Timelines Chart

This example demonstrates a swimlane-style timelines chart for visualizing multiple time-series groups, where each line is divided into colored segments. Segments are colored using a continuous heatmap scale or, in this instance, a categorical ordinal scale, with randomly generated labels from A to Z. The visualization arranges time-series into six distinct groups and allows interactive exploration through zooming and a brushable timeline at the bottom. Built with the `TimelinesChart()` D3 component from the `timelines-chart` library, it processes randomly generated data produced by the `getRandomData` function in `random-data.js`.

TThanaporn-sk
76% match
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
68% 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