Rotating Animated Fractal Pie Chart

100%

Rotating Animated Fractal Pie Chart

✓ Published0🌍 Public

Last edited May 1, 2017

Created on May 1, 2017

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.

AI-generated description

made at the Graphiques dégénérés meetup @ChambreBlanche http://www.chambreblanche.qc.ca/

An iteration on <a href='http://bl.ocks.org/curran/2aafab81bb2029e1f4f24d258b790ce4'>Fractal Pie Chart</a> where the scaling is done using transforms (so the outline thickness also decreases with depth) and with animation. This variation violates the condition that the area of each child should be equal to the area of the parent slice, for the sake of pretty appearance. This variation also has loads more pies, for the real "fractal effect"!

This is a stop along the way for trying to actually visualize data with this technique. The main problem with the first iteration is that pies overlap each other. This experiment shows that to minimize overlap, it looks like setting the largest slice at a 45 degree angle minimizes overlap.

Uses d3-component.

<div align="center"><a href="http://www.simplehitcounter.com" target="_blank"><img src="http://simplehitcounter.com/hit.php?uid=2252722&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/57d3608636fa0515b5f1b84f606d939a'>Animated Fractal Pie Chart</a>

mit Licensed

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

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

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

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

87% match

Loading thumbnail…

Dynamic pie chart

A dynamic pie chart renders five slices whose sizes and positions regenerate randomly every four seconds. D3 transitions animate the arc paths and percentage labels smoothly between states, using `attrTween` and `d3.arc` to interpolate start and end angles. The visualization updates in real time, with labels repositioned via centroid calculations and colors assigned through a sequential scale with the `interpolatePlasma` color scheme.

AAlireza-Dezfoolian

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

81% match

Loading thumbnail…

Pie Chart II

A pie chart animates its slices outward on hover. The example uses D3 v3 with SVG and animation. Each slice’s path is drawn with `d3.svg.arc`, and hovering triggers a transition via `transition.attrTween`, interpolating the slice’s `outerRadius` to expand it. The dataset is a simple array of five values, with percentages displayed as rotated text labels. The code is adapted from Mike Bostock’s “Extending Arcs” block and was built with Blockbuilder.

11Cr18Ni9

80% match

Loading thumbnail…

Arc Corners II

Animated pie charts cycle through a transition where each slice’s corner radius and inner radius morph between sharp and rounded, and the gaps between slices alternately collapse and expand. The visualization uses the Fibonacci sequence as its data. Built with d3.v3, it relies on the `d3.layout.pie` and `d3.svg.arc` APIs, rendered as SVG paths, with a cubic-in-out easing function driving the 2.5-second animation loop.

Mmbostock

80% match