Skip to main content
SimilarExport ZIP
100%

Swimlane using d3.js

✓ Published0🌍 Public
TThanaporn-sk
Last edited Mar 9, 2017
Created on Mar 9, 2017

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.

AI-generated description

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

mit Licensed

Similar vizzes

Loading thumbnail…

Swimlane using d3.js

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.

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
91% 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
73% 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
73% 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
73% match
Loading thumbnail…

Swim Lanes (vertical)

This vertical swim lane diagram uses GoJS to organize workflow stages into labeled pools and lanes, with lanes that can be collapsed or resized by dragging. A custom `GridLayout` aligns lane lengths, while the `LaneResizingTool` enforces minimum sizes and synchronizes all lanes when one is lengthened. The diagram supports dragging nodes between lanes and relayouts the pools dynamically after any modification.

JJoker-tr
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
67% match