Zoomable Pie Chart

100%

Zoomable Pie Chart

✓ Published0🌍 Public

Last edited Jun 9, 2017

Created on Jun 5, 2017

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.

AI-generated description

http://bl.ocks.org/mbostock/5100636

Click on any arc to zoom in, and click on the center circle to zoom out.

forked from <a href='http://bl.ocks.org/maybelinot/'>maybelinot</a>'s block: <a href='http://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099'>Zoomable Sunburst on d3.js v4</a>

gpl-3.0 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

82% match

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization presents a hierarchical dataset as a set of nested circles, where each circle represents a node and its size reflects the node's value. Clicking a circle zooms in to focus on that branch, while clicking the background returns to the root view, with smooth animated transitions. Built with D3 v4, it uses `d3.pack` for circle-packing layout, `d3.hierarchy` for tree processing, and `d3.transition` with `interpolateZoom` for the zooming effect. The flare.json file supplies the data, which is rendered as SVG elements with hover highlighting and color gradients based on depth.

PPragyagarg

81% match

Loading thumbnail…

D3 v5 Zoomable Sunburst

This zoomable sunburst visualization displays hierarchical data from a JSON file using a radial partition layout. Clicking any arc smoothly zooms into that subtree, while clicking the center circle returns to the root. The visualization uses D3 v5’s `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs, with color mapping via `d3.scaleOrdinal` and animation through `transition.attrTween`. SVG rendering with interactive transitions highlights the relationships between nested data categories.

Llucaele

81% match

Loading thumbnail…

Zoomable Sunburst with Labels

This interactive sunburst chart displays hierarchical data with arc labels, allowing users to click any arc to zoom into that subtree, click the center circle to zoom out, or click the canvas to reset. The visualization uses a D3.js v4 partition layout with linear and square-root scales, rendering SVG paths and text elements. It employs `d3.hierarchy`, `d3.arc`, and animated transitions via `transition.attrTween`, while labels are positioned along the arcs using `textPath` elements. The data comes from a JSON file of the Flare dataset, and text is hidden when it does not fit within an arc segment.

TThanaporn-sk

81% match

Loading thumbnail…

Pie chart with annimation

This interactive pie chart displays six categorical values under three selectable datasets (“Total,” “Option 1,” “Option 2”) with a donut layout and legends. It animates slice arc changes using D3’s `transition` and `attrTween`, interpolating between old and new arc paths when switching datasets via radio buttons. The SVG rendering includes slice paths, label polylines, and tooltips on mouseover, while colors come from `d3.scale.category20()`. The code mixes d3.v4 and d3.v3 APIs, including `d3.layout.pie` and `d3.svg.arc`.

DDDDDDanica

81% match

Loading thumbnail…

Zoomable Circle Packing

A zoomable circle packing visualization displays a hierarchical dataset as nested circles, where each circle's size corresponds to a numeric value. Clicking a circle zooms into that branch, expanding its children while hiding others, and clicking the background returns to the root. Built with D3 version 3, it uses `d3.layout.pack` to compute the circle layout and `d3.scale.linear` for positioning. The view animates via `transition.attr` over 750 milliseconds, updating circle positions and radii. The code uses the `flare.json` dataset and renders with SVG elements, including circles and text labels.

PPacsangon

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

80% match

Loading thumbnail…

Zoomable Circle Packing

This example visualizes a hierarchical dataset as nested circles, with each circle’s size proportional to a value and color indicating depth. Clicking any circle smoothly zooms to that node, re-scaling the layout to center and enlarge its children. The visualization uses `d3.layout.pack` and `d3.scale.linear` for positioning and color, with SVG transitions animating circle radii and label opacity. It renders `flare.json` data, a common D3 hierarchy, and applies `d3.interpolateHcl` for color interpolation.

PP15GitHubStudent

79% match