Fractal Pie Chart

100%

Fractal Pie Chart

✓ Published0🌍 Public

Last edited Apr 21, 2017

Created on Mar 28, 2017

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.

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>

forked from <a href='http://bl.ocks.org/curran/'>curran</a>'s block: <a href='http://bl.ocks.org/curran/2aafab81bb2029e1f4f24d258b790ce4'>Fractal Pie Chart</a>

mit Licensed

Similar vizzes

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

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

93% 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…

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

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

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

79% match

Loading thumbnail…

Basic Pie Layout

This example shows a basic pie chart built with D3.js, where each slice’s size corresponds to the radius value of a circle in a static dataset. The code uses `d3.pie()` to compute the angular layout and `d3.arc()` to generate the SVG path for each slice, with the chart centered via a transform and colored by the data’s fill property. A data join binds the arcs to `path` elements, creating a responsive visualization that redraws on container resize.

CCurran Kelleher

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

79% match