Skip to main content
SimilarExport ZIP
100%

Gantt chart

✓ Published0🌍 Public
Ffmcgomes
Last edited Mar 15, 2023
Created on Mar 15, 2023
Forked from D3 Starter

This Gantt chart displays the time spans of three items, A, B, and C, as horizontal bars along a shared timeline, with each bar’s length representing its duration. The chart uses React with D3 v7, rendering to SVG via a single `<svg>` element. It leverages `d3.scaleTime` and `d3.scaleBand` to map dates and categories to positions, and `d3.axisTop` with yearly ticks to label the time axis. The data comes from a local JSON file read at runtime.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 React Gantt Chart

This D3 React Gantt chart displays project timelines as horizontal bars on a time axis, with each category (A, B, C) mapped to a row via a band scale. It uses d3.scaleTime and d3.scaleBand to position rectangular bars, d3.axisTop for year ticks, and d3.axisLeft for category labels, all rendered as SVG. The React component manages the chart lifecycle with useEffect and useRef, while d3.select manipulates the SVG directly. Data from a JSON array provides start and end dates for each bar.

Ffmcgomes
89% match
Loading thumbnail…

Gantt

This interactive Gantt chart visualizes project tasks, their durations, dependencies, and resource allocation across a timeline. It renders task bars in an SVG, with predecessor links drawn as paths and arrows to show task sequencing. A separate SVG area displays resource usage over time as an area chart, with a selector to switch between resources and an adjustable daily capacity input. The visualization uses d3.v5 for scales, axes, and SVG rendering, alongside custom JavaScript functions for date calculations and table generation from the provided task data.

Mmaxime-plantard
81% 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
79% match
Loading thumbnail…

Gantt Chart Example 1

This example presents a Gantt chart that visualizes the time intervals of multiple named jobs, with each horizontal bar colored by job status (running, succeeded, failed, or killed). The chart is built with React and D3 v4, using an SVG rendering approach. The code defines a reusable `d3.gantt` function that creates the chart, and it includes a `redraw` method, demonstrating animated transitions for updates. The x-axis uses a time scale with `d3.axisBottom`, while the y-axis is a band scale for task names, with bars rendered as SVG rects.

Bbeq95
79% match
Loading thumbnail…

Gantt Chart

A Gantt chart displays the start and end times of three named tasks, each assigned to a person (Óscar, Peter, Johnny), across a single day. Colored bars are positioned along a time axis and grouped by category on a vertical ordinal scale. The visualization is built with the D3.js library, using `d3.time.scale` for the time axis and `d3.svg.axis` for rendering ticks. Task bars animate their width and position through D3 transitions, with an SVG output.

OOscardR
77% match
Loading thumbnail…

Gantt Chart tryout2

This Gantt chart visualization displays three projects with their timelines, phases, and milestones. It uses a timeline layout where each project is positioned vertically, with phases shown as colored bars and milestones as distinct markers positioned according to their dates. The example uses D3 v5 to create an SVG rendering, with `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. A color scale maps project phases using an interpolated color range, and the chart includes animated grid lines and hover tooltips for interactivity. The data is hardcoded in the JavaScript, representing fictional international projects.

Ccjlorentzen@gmail.com
77% match
Loading thumbnail…

Gantt Chart tryout

This example displays a Gantt chart with two distinct datasets. It visualizes project timelines and their phases as colored horizontal bars across a time scale, with milestones marked as points. The code uses D3 v5’s `d3.scaleTime` to map dates to positions, and `d3.timeParse` to convert date strings. The SVG rendering is positioned within an HTML container, with a tooltip (`#tag`) that appears on hover, styled by the included CSS. The chart’s source data is defined in JavaScript arrays for projects and tasks.

Ccjlorentzen@gmail.com
77% match
Loading thumbnail…

Gantt-Chart in D3.js V3

This Gantt chart visualizes a hospital workflow, showing the timing and status of tasks such as "Waiting," "Vital Serving," and "Doctor Serving" across a timeline. Segmented bars represent task durations, with colors indicating status like WAITING or DOCTOR. Built with D3.js V3, it uses `d3.time.scale` and `d3.scale.ordinal` to position bars, and `d3.svg.axis` for time and task labels. Animated transitions via `transition()` and `call(xAxis)` support redrawing when data updates. Data is a static array of start/end dates rendered as SVG rectangles.

Ssrinivasjavvadi
76% match