Donut-Pie Chart

100%

Donut-Pie Chart

✓ Published0🌍 Public

Last edited Jan 12, 2016

Created on Jan 11, 2016

This donut-pie chart combines two D3 v3 pie layouts to show hierarchical proportions of issue statuses: the outer donut ring displays the current status totals, while the inner pie wedges break down each prior status within those totals. Both layers share an ordinal color scale mapping statuses—New, Open, Reopened, Closed—and use `d3.svg.arc` for rendering SVG paths. Data is loaded from a CSV file and processed with `d3.nest` and rollup to aggregate counts by current status before sorting.

AI-generated description

Donut chart circumscribing a pie chart--used for displaying parts of a whole with hierarchical data.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/3887193'>Donut Chart</a>

Similar vizzes

Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk

91% match

Loading thumbnail…

Fork of Making an Interactive Pie Chart

This interactive donut chart displays the proportion of three project statuses—Not started, Started but not completed, and Completed—using a color-coded SVG pie layout. Hovering over a slice highlights it and reveals a tooltip showing the exact percentage of that status. The visualization uses d3.pie and d3.arc to generate the donut geometry, with d3.scaleOrdinal mapping status names to colors. Data is loaded from a CSV file, and mouseover events update the tooltip’s position and computed percentage.

SshanLU999

83% match

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda

82% match

Loading thumbnail…

Pie chart

This pie chart example shows a donut-shaped chart with a solid orange center, rendered as an SVG using D3 v5. The chart displays four data segments (10, 20, 30, 60) with a color scale based on `d3.scaleOrdinal`, while radio buttons allow switching between apple and orange datasets (though only the orange dataset is actively rendered). The visualization uses `d3.arc()` to generate both the outer ring and inner circle paths, with the chart positioned at three-fifths of the SVG height.

JJoachimSchaeffer

82% match

Loading thumbnail…

Pie Chart

A donut chart displays six data points as animated arcs, with each segment labeled by its data ID. Built with D3 v4, the visualization uses the `d3.pie` layout, `d3.arc` geometry, and a `transition.attrTween` to smoothly interpolate between random values on each update. The SVG is rendered dynamically, with slices colored via `d3.scaleOrdinal` and labels positioned at arc centroids.

MMTClass

81% match

Loading thumbnail…

pie

A donut chart displays the distribution of votes among four options, with each arc segment sized proportionally to its vote count. The visualization uses d3.js v4 to compute arc paths via `d3.pie` and render them as SVG paths with a white stroke, while text labels positioned along the outer radius identify each option. Data is hardcoded as a JavaScript array, and colors are assigned randomly using `d3.scaleOrdinal` with the `schemeCategory20` palette.

RRonolibert

81% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

81% match

Loading thumbnail…

Pie Multiples

Four small donut charts display proportional breakdowns for each row of a two-dimensional numeric array. D3 v3’s `d3.layout.pie` computes arc angles, while `d3.svg.arc` renders the path shapes. Each chart uses an inner and outer radius, with colors assigned by index from `d3.scale.category20c()`. The SVG elements are generated per row, and the totals for each row differ.

Mmbostock

81% match