D3 React Gantt Chart

100%

D3 React Gantt Chart

✓ Published0🌍 Public

Last edited Mar 15, 2023

Created on Mar 15, 2023

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

D3 Chart

This example shows a static bar chart built with React and D3.js v4, displaying a simple dataset of nine numeric values as vertical bars. The bars are rendered as SVG rectangles, with heights proportional to the data values and positioned horizontally using a translate transform. The code selects the pre-existing `<svg>` element with the class `bar-chart`, sets its dimensions, and appends rectangles via D3's data join (`enter()` and `append()`). The chart uses `d3.select` and `d3.min` APIs to map values to pixel coordinates.

Aacervantesc

78% match

Loading thumbnail…

Bar chart with React & D3

This example shows a horizontal bar chart of population counts per activity category, using D3 for data loading and scales while React renders the SVG elements. The code fetches CSV data from a GitHub gist via `d3.csv` in a custom `useData` hook, then builds the visualization with `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Custom React components `AxisBottom`, `AxisLeft`, and `Marks` draw the ticks and colored bars, with each bar assigned a color from a small array.

AAditya Khandelwal

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

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

77% match

Loading thumbnail…

D3 and React

Two React components render D3 visualizations side-by-side. A bar chart maps an array of values to SVG rectangles and text labels, using D3's data join with `selectAll`, `enter`, and attribute setters, with colors via HSL strings and classes for high/low values. A second component demonstrates React's managed rendering alongside unmanaged D3 updates, appending HTML elements, merging enter/update selections, and animating appended spans with `transition().duration().delay()`. Both components use `useRef` and `useEffect` to access the DOM, with data generated by `d3.range`.

Ggjonor

77% match

Loading thumbnail…

React Starter

A React component hierarchy wraps D3-generated SVG axes and rectangles to render a horizontal bar chart from a hardcoded object of key-value pairs. The chart maps object keys to an ordinal y-axis via `d3.scaleBand` and values to a linear x-axis via `d3.scaleLinear`, with `d3.axisLeft` and `d3.axisBottom` for ticks. Bars are drawn as SVG `rect` elements that change fill color on click. The code imports `d3` v5 and uses React refs to attach D3 selections within `componentDidMount` and `componentDidUpdate` lifecycle methods.

0007ebey

77% match

Loading thumbnail…

Rendering BAR data with React

This example shows a horizontal bar chart built with React and D3 v6, displaying the first three rows of a CSV dataset. The chart maps each data point’s `Origin` category to the y-axis band scale and its `Cylinders` value to the x-axis linear scale, rendering `<rect>` SVG elements. Data is loaded asynchronously via `d3.csv` into React state using the `useEffect` and `useState` hooks, with the final SVG output managed by ReactDOM. The visualization relies on `scaleBand`, `scaleLinear`, and `max` from D3.

Ppsabela

77% match