Skip to main content
SimilarExport ZIP
100%

Gantt

✓ Published0🌍 Public
Mmaxime-plantard
Last edited Aug 24, 2020
Created on Aug 24, 2020
Forked from HTML Starter

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.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

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

Gantt2

This visualization displays a Gantt chart tracking the timing and status of recurring software tasks, such as "Reload License Monitor" and "Reload Operations Monitor," over a single day. Each horizontal bar represents a task execution, colored green for successful completions and red for failures, with a tooltip on hover revealing task details. Using D3 v7, the code builds the chart with `scaleTime` for the time axis, `scaleBand` for task categories, and `axisLeft`/`axisBottom` for gridlines. Data comes from a static JavaScript array, rendered as SVG rectangles with text labels.

RRoman Polulekh
83% match
Loading thumbnail…

Gantt Chart

This Gantt chart displays the timeline of five tasks, with each horizontal bar representing the duration from its start to end date. Green bars show the completed portion of each task, while red overlays indicate the remaining work based on a progress percentage. The visualization uses D3.js with an ordinal y-axis for task categories and a time-based x-axis for dates. Hovering over any bar segment reveals a tooltip showing the task name, date range, and completion percentage via mouse events. The chart includes a legend distinguishing completed from remaining statuses.

SShehroze Aamer
82% match
Loading thumbnail…

Gant Diagramm

This Gantt chart visualizes task start and end times over a 24-hour period, with each horizontal bar colored green or red based on task status (Status "1" or "0"). The visualization uses D3.js v7 with SVG rendering, employing `d3.scaleTime` for the time axis, `d3.scaleBand` for task categories, and `d3.axisBottom`/`d3.axisLeft` for axes. Bar positions and widths derive from parsed time strings via `d3.timeParse`, while hover interactions display task details in an HTML tooltip. The data is hardcoded in the script, showing repeated reloads of License and Operations Monitors.

RRoman Polulekh
82% match
Loading thumbnail…

Gantt chart

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.

Ffmcgomes
81% 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…

Fork of Gantt2 (overlapping titles)

This example visualizes a Gantt chart with horizontal bars representing task durations, colored green or red by status, and includes overlapping time labels for tasks sharing the same start time. It uses D3 v7 to load CSV data, scaleTime for the x-axis, scaleBand for task categories, and SVG rendering with axisLeft and axisBottom. The code filters out labels that collide horizontally, and adds a tooltip on mouseover showing task details.

RRoman Polulekh
78% 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
78% match