Swimlane using d3.js

100%

Swimlane using d3.js

✓ Published0🌍 Public

Last edited Aug 18, 2016

Created on Aug 17, 2016

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.

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>

gpl-3.0 Licensed

Similar vizzes

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

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

67% match

Loading thumbnail…

Fork of Playing with D3 and Gantt

This interactive Gantt chart visualizes time intervals for a list of countries across a shared timeline. It displays each country as a horizontal lane with bars representing its start and end dates, alongside a smaller overview chart for navigation. The visualization uses D3 v6 with SVG rendering and includes a brush component for selecting time ranges, which updates the main chart’s visible extent. Data is hardcoded in the `getData.js` module, and the implementation relies on D3 scales, axes, and transition-based animations.

Ffilipwydra

67% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

66% match

Loading thumbnail…

simple line chart from dataset _ Final version

This example shows a monthly time series of twelve data points from a local dataset, with a single black polyline connecting values, labeled x-axis dates, and a large final-value annotation. It also adds light-gray circular markers that turn red on hover, displaying the current value and a dashed vertical guide line. Built with D3 v4, it uses `d3.scaleTime` for the date axis, `d3.scaleLinear` for values, `d3.line` to generate the path, and SVG elements rendered via the code. The dataset is loaded with `d3.json` from a static file, and all interaction logic resides in `mouseover` and `mouseout` event handlers.

EElisaDnr

65% match

Loading thumbnail…

d3.js line chart with multiple lines and points

This example shows two multi-series line charts overlaid in a single SVG, with each line distinguished by its own path and circular data points. It demonstrates how to map linear scales to x- and y-axes, render gridlines and tick labels, and add interactive hover effects that enlarge points on mouseover. The code uses D3.js v3 APIs including `d3.svg.line()`, `d3.scale.linear()`, and selection methods like `append`, `attr`, and `on`. The data is a hardcoded array of two numeric arrays, with axes and points generated programmatically from the same scales.

CCaged

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

63% match

Loading thumbnail…

d3 | reusable heatmap calendar

This calendar heatmap visualizes daily activity amounts across multiple years using a reusable D3.js component. The chart displays years in separate horizontal bands, with each column representing a week and each cell a day, colored by a diverging linear scale from light pink to red based on the amount value. Month boundaries are marked with paths, and weekday/month labels support orientation. Data is loaded from JSON, mapped to calendar days, and rendered as SVG rectangles within a margin-based layout. The chart supports interactivity via a hover dispatch event.

CCBasis

63% match