Skip to main content
SimilarExport ZIP
100%

Project Breakdown

✓ Published1🌍 Public
WWaseem Medhat
Last edited Dec 15, 2020
Created on Dec 3, 2020
Forked from Hello VizHub

This visualization displays a breakdown of time spent on tasks within a project, organized hierarchically by category, task, and item. Three horizontal bands of rectangles, colored by category via `d3.scaleOrdinal`, show cumulative durations positioned with `d3.scaleLinear`, while `d3.scaleBand` lays out the levels. Hovering reveals tooltips from `tippy.js`, and labels show approximate hours per category. The React-based SVG chart loads CSV data using `d3.csv` and aggregates it with `d3.groups`, `d3.sum`, and `d3.cumsum`.

AI-generated description

I tracked the time it took me to do specific tasks for the Forest Plot with Heterogeneity Bands project. This visualizaition displays the data that I recorded.

MIT Licensed

Similar vizzes

Loading thumbnail…

Project Breakdown

The visualization displays a project breakdown using an icicle chart, where each horizontal band represents a hierarchy level (category, task, item). The width of each rectangle encodes the cumulative time spent, with colors differentiating categories via d3.scaleOrdinal. Built with React and d3.v6, it uses d3.groups and d3.sum to aggregate data, d3.scaleLinear for positioning, and renders SVG rectangles that react to hover with opacity changes. The data comes from a CSV file fetched via d3.csv.

MMaxene Graze
89% match
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
76% 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
74% 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
73% 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
72% match
Loading thumbnail…

PNP - Projetos no Prazo

This example presents a static SVG bar chart titled “Projetos no Prazo” (Projects on Schedule), built with React and rendered using D3 v5. It visualizes a project management process divided into four categories—Estrutura, Duração, Simulação, and Priorização—shown as green vertical bars above a gray base layer. The base contains two yellow horizontal segments labeled “Análise” and “Qualidade.” The chart is hardcoded with fixed coordinates and dimensions, using SVG `rect`, `path`, and `text` elements, with no interactive or dynamic data-binding logic applied.

RRubens
72% match
Loading thumbnail…

PNP - Projetos no Prazo

A data-visualization example shows the geometric composition of a project-management chart titled "PNP - Projetos no Prazo," using only basic SVG shapes: a dark blue triangle for the main indicator, four purple vertical pillars, and orange and green horizontal rectangles as foundations. The visualization uses React to render SVG elements, with d3.v5 loaded for potential utility but no explicit D3 API calls. The code defines reusable components for each shape, with colors from a separate cores module and fixed dimensions.

RRubens
72% 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
71% match