Skip to main content
100%

Swimlane using d3.js

✓ Published0🌍 Public
Aaniston
Last edited May 8, 2018
Created on May 8, 2018

This visualization presents a swimlane chart built with d3.js (v2) that displays time-based tasks across multiple horizontal lanes. It features a main chart with detailed lane labels and a mini overview chart with a brush for navigation. Each task is rendered as a colored bar positioned by start and end times, with green and gray styling distinguishing past and future items. A blue vertical line marks the current date. The mini chart provides a zoomed-out context, allowing users to brush a region and update the main chart’s time scale. The lanes are generated from random data and separated by horizontal lines, with month labels and tick marks on the top axis and day labels on the bottom axis. The visualization is designed for Gantt-style scheduling and timeline tracking.

AI-generated description

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

mit Licensed

Similar vizzes

Loading thumbnail…

Swimlane using d3.js

This visualization presents a time-based swimlane chart built with D3 v2, showing project tasks across multiple horizontal lanes. The main chart displays colored rectangles for each item, with green indicating past tasks and gray representing future ones, while a blue vertical line marks today's date. A smaller overview chart below provides a zoomed-out context with a brush for selecting a time range, which updates the main chart's x-axis accordingly. The layout includes two levels of time axes (daily and monthly/weekly labels) and lane labels on the left, with the mini chart enabling navigation and filtering of the detailed view. Data is generated by the randomData.js script, which creates lanes and items with start/end dates, handling overlap by stacking items into sublanes.

Aamundo
96% 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
93% match
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
91% 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
90% 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
87% 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
72% 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
72% 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
72% match