Drill down pie chart test

100%

Drill down pie chart test

✓ Published0🌍 Public

Last edited Aug 7, 2012

Created on Sep 5, 2013

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.

AI-generated description

Playing with D3.js to get a drill down behavior for a hierarchical data collection represented in pie charts. See live example

Similar vizzes

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

76% match

Loading thumbnail…

test

This pie chart visualizes the distribution of fruit consumption categories, with each slice representing a genre's value from data loaded via `d3.csv` from a remote CSV file. The chart uses `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path shapes, with `d3.scaleOrdinal` assigning categorical colors. Interactive tooltips appear via appended `title` elements, while value labels are positioned at each arc's centroid using `arcPath.centroid()`. A legend and title are rendered within the 600×600 SVG, demonstrating a reusable pie chart function.

Ggreeshmareddy135@gmail.com

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

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

74% match

Loading thumbnail…

Hierarchical Pie Chart

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.

Aadewes

74% match

Loading thumbnail…

Pie Chart

A pie chart displays five categorical values as proportional, colored arcs with hover highlighting and percentage labels. The chart uses d3.layout.pie to compute arc angles and d3.svg.arc to generate SVG paths, with an ordinal color scale for fills. Hovering translates the arc group outward via a transition, while labels rotate to align with each segment’s midpoint. The visualization is built with d3.v3 and renders entirely in SVG.

11Cr18Ni9

74% match

Loading thumbnail…

D3JS Interactive Bar Chart Part 3 (Data Drill Down)

This interactive D3.js bar chart demonstrates data drill-down, allowing users to explore hierarchical data by clicking or hovering on bars to reveal more detailed subcategories. The visualization uses D3 v2’s `d3.scale.ordinal()` for x-axis positioning and `d3.svg.axis()` for rendered axes, with SVG rectangles representing aggregated totals. The code includes jQuery for DOM manipulation and supports both level-0 (top-level) and level-1 (drilled-down) views, mapping caption labels to tick marks. The chart updates dynamically with mouseenter/leave events that alter bar dimensions and styling. Rendering relies on SVG elements, with margins and computed width/height determining the plot area.

TTJPepping

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

73% match