Skip to main content
SimilarExport ZIP
100%

Swimlane Chart

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

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.

AI-generated description

forked from <a href='http://bl.ocks.org/renecnielsen/'>renecnielsen</a>'s block: <a href='http://bl.ocks.org/renecnielsen/9753502'>Swimlane</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
86% match
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
86% 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
85% 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…

Time Line

This timeline visualization displays the projected start and end dates for a series of project phases, from Induction through Tag, spanning late 2019 into early 2020. The chart uses an SVG canvas with D3 v5’s `scaleBand` for the categorical phase labels and `scaleLinear` for the date range. Data is loaded from a CSV file. The code builds a horizontal bar chart, using `axisBottom` for the time axis and custom tick formatting, and applies a reusable group `g` to position elements within specified margins.

GGeolffrey S Mena
72% match
Loading thumbnail…

Gantt Chart

This Gantt chart visualizes project tasks, including development, coding, promotion, and celebration phases, as horizontal bars positioned along a linear time scale. The chart uses D3 v5 to parse dates with `d3.timeParse`, scale time with `d3.scaleTime`, and render colored rectangles within an SVG container. Task categories are distinguished by a gradient color scale using `d3.scaleLinear` with HCL interpolation. Hovering over a task reveals a tooltip with its name and duration details, while the grid and labels are also generated with D3.

JJoker-tr
70% match