Fork of Gantt2 (overlapping titles)

100%

Fork of Gantt2 (overlapping titles)

✓ Published0🌍 Public

Last edited Dec 27, 2022

Created on Dec 21, 2022

Forked from Gantt2

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

80% match

Loading thumbnail…

Fork of MedData - TimeLine TT

This fork of MedData displays a Gantt chart timeline for task scheduling, with colored bars representing task categories like development, coding, and promotion across a time scale. The visualization uses d3.timeScale and d3.timeFormat to map dates, while d3.scaleLinear with interpolateHcl generates the color gradient. The SVG rendering includes a grid background, task rectangles with rounded corners, and text labels positioned within each bar. A separate line chart component appears to be present in the code structure.

Ppplomith

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

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

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

78% 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…

Fork of Playing with D3 and Gantt

This fork of “Playing with D3 and Gantt” presents an interactive Gantt chart tracking date ranges for a list of countries. It displays horizontal bars on a timeline, with a brushed mini-map below for zooming and a vertical current-line indicator. The visualization uses D3 v6 APIs including `scaleTime`, `scaleLinear`, `brushX`, `axisBottom`, and SVG transitions. Country data is hardcoded in a separate module, and the chart responds to window resizing while supporting mouseover tooltips via appended HTML divs.

Mmxd

77% match