Fractal Pie Chart

100%

Fractal Pie Chart

✓ Published0🌍 Public

Last edited Mar 27, 2017

Created on Mar 26, 2017

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.

AI-generated description

Finally after having sketched out this visualization idea in notebooks for years, it has come into reality. This example highlights the utility of d3-component for recursive visualization components.

The idea here is to extend the notion of a pie chart to represent hierarchical data. Each slice gets expanded into a "sub-pie" whose area is equal to the area of the slice. The sub-pie slices get broken out recursively.

Have some fun and play with it on Blockbuilder!

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2252732&f=0&b=16777215" border="0" height="18" width="83" alt="web counter"></a></div>

mit Licensed

Similar vizzes

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

94% match

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

90% match

Loading thumbnail…

pie

A pie chart displays eight proportional segments with values from the Fibonacci sequence (1, 1, 2, 3, 5, 8, 13, 21). D3 v4’s `d3.pie()` computes the arc angles, while `d3.arc()` generates the SVG path for each slice with an inner radius of 0 and outer radius of 100. A `d3.scaleOrdinal` with `d3.schemeCategory10` assigns categorical colors, and white strokes separate the segments. The chart is rendered as static SVG elements, translated to position (200, 200) within the viewport.

EEranM6

78% match

Loading thumbnail…

D3 Piechart - with labels

This example shows a pie chart of fruit quantities, with each slice labeled by its fruit name. The chart uses the `d3.pie()` generator to compute arc data, and `d3.arc()` with inner and outer radii to create a donut-like shape. Slice paths are rendered in orange with white strokes, and labels are positioned at each arc’s centroid using `arcGenerator.centroid(d)`. Data is hard-coded in the JavaScript, and the visualization is drawn as SVG within an HTML page, styled by CSS.

SSubhendu Karmakar

77% match

Loading thumbnail…

Pie Explode

A pie chart of fruit counts from a CSV file explodes into separated slices when the page loads, with each category rendered as an individual SVG path. The visualization uses d3.layout.pie to compute slice geometry, d3.svg.arc to define the pie shape, and d3.scale.category20 for color encoding by fruit name. A transition with a 2-second duration and 500-millisecond delay animates the slices outward via a custom explode function that calculates translation offsets from each slice's midpoint angle. The data comes from the included fruit.csv, and the rendering relies on SVG with d3.v3.

DDarienLiang

77% match

Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

76% match

Loading thumbnail…

Shapes: Pie Example

This example displays a small pie chart built from an array of seven numeric values, with each slice sized proportionally to its value. The visualization uses D3 v4’s `d3.scaleOrdinal` with the `d3.schemaCategory10` color palette to assign distinct colors to each segment. The chart is rendered as an SVG element, where the arcs are generated using the `d3.arc` API with an inner radius of zero and an outer radius of ten, and angles are computed via `d3.pie()` before being passed to the arc’s start and end angle functions. The data itself is hard-coded in the script, and the code originates from a gist by DanielAguirre, structured for use with Blockbuilder.

DDanielAguirre

76% match

Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of a categorical variable, using colored slices to represent each category's share of the whole. The example renders a fixed dummy dataset (`{a: 9, b: 20, c:30, d:8, e:12}`) as SVG paths, with each slice's angle determined by `d3.pie` and its geometry drawn via `d3.arc`. Colors come from `d3.scaleOrdinal` with a manually specified palette, and the chart is centered within a 450×450 pixel canvas. The code uses the D3.js v4 library, appending the visualization to a `<div>` and styling slices with black strokes and 0.7 opacity.

Hhanulik.ondrej@gmail.com

76% match