Skip to main content
100%

Hierarchical Pie Chart

✓ Published0🌍 Public
Aadewes
Last edited Feb 4, 2013
Created on Feb 4, 2013

This hierarchical pie chart visualizes the file and directory structure of a Flask project. Each ring level represents a directory depth, and the angular extent of each slice is proportional to the number of lines and bytes in that file or folder. Clicking a slice triggers an animated rebasing that zooms into the selected hierarchy level, recalculating angles and radii to make that slice the new root. Hovering reveals a legend with details, and the SVG uses smooth transitions to adjust arcs, illustrating the nested codebase composition.

AI-generated description

Similar vizzes

Loading thumbnail…

Animated Fractal Pie Chart

This animated fractal pie chart displays a nested hierarchy of slices, where each slice recursively contains its own children, creating a visually intricate pattern with overlapping, scaled-down pie segments. The animation reveals the recursive structure by smoothly rotating and scaling each nested group. Built with D3 v4 and the d3-component library, the visualization renders with SVG elements whose transforms are animated over time. It recursively generates data using a set of fixed ratios and uses `d3.pie` and `d3.arc` for slice geometry, with a custom `d3.timer` to drive the animated transform sequence.

CCurran Kelleher
76% match
Loading thumbnail…

Fractal Pie Chart

This visualization extends the pie chart to display hierarchical data, where each slice expands into a sub-pie with an area equal to its own. The recursion creates a fractal-like structure, revealing multiple levels of the data's nested composition. Built with D3 v4 and the d3-component library, the code defines recursive `d3.component` types (`fractal`, `slice`, `connector`) to render SVG paths and lines. The data is generated procedurally with a function that subdivides values into fixed ratios, and parameters like `stemSize` and `stemWeight` control the layout of the recursive connectors.

CCurran Kelleher
76% match
Loading thumbnail…

Rotating Animated Fractal Pie Chart

This rotating animated fractal pie chart recursively subdivides each pie slice into smaller slices, creating a deeply layered, spiraling visual effect. The animation continuously rotates each level of the hierarchy, while scaling down slice size and stroke thickness through SVG transforms. The code uses D3 v4 with the d3-component library, building the structure via d3.pie, d3.arc, and d3.timer for the animation loop. The data is procedurally generated with fixed child ratios, and the rendering emphasizes aesthetic appearance over exact area preservation.

Aamtur8
75% match
Loading thumbnail…

Fractal Pie Chart

This visualization extends the familiar pie chart to display hierarchical data through recursive sub-pies, where each slice’s area equals that of its parent slice. Built with D3 v4 and the `d3-component` library, it uses recursive `d3.component` definitions for slices, connectors, and grouped fractals, with `arc.outerRadius()` and angular calculations to compute child radii. The SVG output uses the `pie()` and `arc()` APIs to render proportional slices, with `rotate()` and `translate()` transforms positioning each recursive level. The sample data is generated procedurally using fixed child ratios that divide each value until a small epsilon threshold.

TThanaporn-sk
75% match
Loading thumbnail…

Drill down pie chart test

Drill-down pie chart test is a hierarchical data visualization that shows multi-level categories as nested pie charts, where clicking a sector reveals its sub-categories while the header updates to show the current parent path. The example generates synthetic random data with up to 15 parent sectors, each containing up to 15 children with color-shaded variants. Built with D3 v2, it uses `d3.layout.pie` for the angular layout, `d3.svg.arc` for path generation, and animated transitions via `transition.attrTween` to smoothly redraw sectors when drilling down. Radial gradients per category and a shadow filter enhance the SVG rendering, with all interaction handled through click events on the sector paths.

Aalessioalex
74% match
Loading thumbnail…

Zoomable Pie Chart

This zoomable pie chart allows users to explore a hierarchical dataset by clicking on arcs to zoom into nested levels, and clicking the center circle to zoom out. The visualization uses D3 v4's partition layout, with arcs representing nested data values from a JSON file. The chart is rendered using scalable vector graphics (SVG) with animated transitions, employing `d3.scaleLinear` for angular scaling and `d3.scaleSqrt` for radial sizing. Interactions trigger custom tween functions to smoothly interpolate arc geometries.

SSpaceActuary
73% match
Loading thumbnail…

Fractal Pie Chart Art

This visualization shows a recursive fractal pattern composed of nested pie chart slices, where each slice is subdivided into smaller slices until reaching a minimum size. The code uses D3 v4 with the d3-component library to create reusable components for slices, connectors, and the recursive fractal group. The pie layout uses d3.pie with custom start and end angles, while d3.arc renders each path. Child radii are calculated based on slice area ratios, and connectors draw stems between parent and child arcs. The generated data follows a fixed ratio hierarchy, rendered as SVG in a single viewport.

CCurran Kelleher
73% match
Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk
72% match