Project Breakdown

100%

Project Breakdown

✓ Published0🌍 Public

Last edited Dec 4, 2020

Created on Dec 4, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Project Breakdown

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`.

WWaseem Medhat

89% match

Loading thumbnail…

Zoomable Icicle - react

This example shows a zoomable icicle chart for navigating hierarchical data. The visualization presents a treemap-like layout where each category is a vertical slice, and clicking a rectangle zooms into that branch while smoothly animating the view. Built with React and D3 v7, it uses `d3.partition` for layout, `d3.scaleOrdinal` and `d3.interpolateRainbow` for color, and D3’s `transition` API for animated transforms. Data comes from a JSON file hosted on GitHub Gist.

RRasike Abeyratne

77% match

Loading thumbnail…

zoomable-icicle-ccia-js

This interactive visualization is a zoomable icicle chart that displays the hierarchical structure of the "flare" dataset. Users can click on rectangular segments to drill down into nested categories, with the chart smoothly animating the expansion and contraction of branches. The visualization is built with React and D3.js v7, using the `partition` layout to compute rectangle positions and sizes. Each node's rectangle area is proportional to its value, and the color scheme distinguishes different top-level categories.

RRasike Abeyratne

76% match

Loading thumbnail…

Example of zoomable icicle

This zoomable icicle chart displays hierarchical data from the Flare-2 dataset, with rectangles colored by top-level category and sized by value. Users click any rectangle to zoom into that subtree, smoothly animating the layout’s scale and position. Built with D3 v7, it uses `d3.partition()` to compute the icicle layout, `d3.scaleOrdinal` with `interpolateRainbow` for colors, and `d3.json()` to load data. The SVG rendering uses transitions to animate rectangle heights, transforms, and label opacity, with tooltips showing the full ancestor path and formatted values.

JJonathan Kurniawan

75% match

Loading thumbnail…

Fork of Zoomable Icicle

This example shows a zoomable, interactive icicle chart that visualizes a hierarchical dataset, allowing users to click on rectangular segments to drill down into nested categories. The visualization renders as an SVG with smooth animated transitions, where each cell is colored based on its top-level category. The code uses the D3.js v7 library, specifically `partition()`, `hierarchy()`, and `scaleOrdinal()`, along with a data file hosted on GitHub Gist. The JavaScript implementation handles the interactive zooming logic and uses SVG transitions for the 750-millisecond animated updates.

BBen McCarty

74% match

Loading thumbnail…

Fork of ICE-6 Creating Marks And Channels

This example visualizes the marks scored by students against the time they invested in studying. It displays a bar chart with horizontal rectangles representing each student's marks, scaled linearly along the x-axis, while the y-axis uses a band scale for time study categories. The code uses React with hooks (useState, useEffect) to load and parse CSV data, and D3 v5 APIs including scaleBand, scaleLinear, and csv for data fetching. The SVG is rendered via React elements, with grid lines and axis ticks generated using D3's max and format utilities. The visualization includes the top 15 records from the dataset.

NNavaneeth-Ragi

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

73% match

Loading thumbnail…

Zoomable Icicle with Labels and Breadcrumb

This example presents an interactive zoomable icicle chart that visualizes hierarchical biodiversity data, with a breadcrumb trail showing the current path and percentage of the total. The visualization uses D3.js v4 to render SVG rectangles, with foreignObject elements for labels that can be clicked to zoom into a subtree. The breadcrumb trail updates dynamically on click, displaying each ancestor node and the proportion of the total value it represents. The chart uses d3.partition to compute the layout and d3.scaleOrdinal with the Category20c color scheme to differentiate nodes.

Aarun-subba

73% match