Skip to main content
SimilarExport ZIP
100%

Donuts

✓ Published0🌍 Public
Mmbostock
Last edited Feb 8, 2016
Created on Oct 5, 2010

Three nested donut charts show spending by department—Accounting, Sales, and Consulting—with each ring divided into salary, equipment, travel, and extra costs. The example uses the ProtoVis API within an HTML page, calling `pv.Scale.linear` for angular scales and a `pv.Panel` with `pv.Wedge` marks, sized by inner and outer radii. Labels are centered via an anchored `pv.Label`. Data comes from an inline JavaScript array with static numeric values.

AI-generated description
gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

3D Donut

Two 3D donut charts display randomized sales category data with labeled slices, each rendered as a top surface, outer side, and darker inner side. Using D3 v3 and SVG, the code builds paths via the `Donut3D.draw` function, while a button triggers the `Donut3D.transition` method to smoothly animate slice angles and percentage labels through `attrTween` interpolations.

NNPashaP
73% match
Loading thumbnail…

Donut Chart

This donut chart displays five equal segments, each representing a donut count of 1000 from the Data.json file. The circular visualization uses a ring geometry with an inner radius of 140 and outer radius of 185, with segments colored green, blue, yellow, red, and teal. The visualization is built using D3 version 5, leveraging the `pie` API to compute arc segments and the `arc` API to generate the SVG paths. A `scaleOrdinal` color scale maps the data values to the custom color palette. The chart reads its data asynchronously from a JSON file and renders within an SVG element on an HTML page.

Xxyzcorrupt@gmail.com
72% match
Loading thumbnail…

donut

This donut chart uses D3 version 6 to render a single, five-segment ring where each segment is a wedge of equal value. The visualization employs `d3.arc` with dynamically calculated inner and outer radii based on the segment index, and `d3.pie` to compute the arc geometry. Each wedge is filled with a color from `d3.scaleSequential` using the `d3.interpolateRainbow` palette, and labeled with its data index. The entire SVG group is positioned using a CSS transform, though the code’s intended rotation animation is present but not functional, as the rotation angle is fixed to zero.

MMTR
71% match
Loading thumbnail…

Fork of Donut Chart v2

This donut chart displays proportional data from a JSON file (data.json) with country names and numeric sums, rendered as an SVG using D3.js v4. The visualization uses a pie layout with a half-radius inner hole and divergent color scheme from d3-scale-chromatic. Labels are positioned outside the arcs using polyline connectors and text elements, with the arc generator determining slice geometry and outerArc handling label placement. The example demonstrates D3’s modular approach to building interactive, data-driven graphics.

MMaeva B
71% match
Loading thumbnail…

Fork of Fork of Making an Interactive Pie Chart

This interactive donut chart visualizes income breakdown across three categories—Sales, Dividends, and Interest—using repeated rows from a CSV file. Built with D3 v5, it renders an SVG donut with labeled slices and a hover tooltip displaying each category’s percentage. The code leverages `d3.pie` for arc calculation, `d3.arc` for path geometry, and `d3.scaleOrdinal` for color mapping. Hovering highlights a slice and dynamically positions a tooltip using mouse coordinates.

RRochelle
71% match
Loading thumbnail…

Fork of Pie Chart ICE-7

This example visualizes monthly expenditures by department using a donut-style pie chart, with each slice labeled and a color-coded legend that lists department names alongside their formatted dollar values. The chart is drawn as an SVG using D3 version 5, fetching expense data from a CSV file via `d3.csv`. The code employs `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for segment geometry and color mapping, and `d3.format` for axis tick labels. A legend group is positioned manually with `transform` translations.

Yyaswanthsen
71% match
Loading thumbnail…

Donut Chart

This donut chart displays the population distribution across seven age groups, from under 5 to 65 and older, using a ring of color-coded arcs. The chart is built with D3 v3, loading data from a CSV file via `d3.csv` and rendering SVG paths. It uses `d3.scale.ordinal` for color encoding, `d3.layout.pie` to compute arc angles from the population values, and `d3.svg.arc` to define the ring geometry with an inner and outer radius. Each segment includes a label positioned at the arc’s centroid.

Mmbostock
71% match
Loading thumbnail…

donut chart w. d3-annotations

A donut chart displays six categorical values as proportional slices, with annotations positioned to the left and right of the chart. A center label appears above the visualization, though the annotation rendering is commented out, leaving only red translucent circles marking annotation anchor points. The chart uses the d3-annotation library alongside d3.v4, building the pie and arcs with `d3.pie()` and `d3.arc()`. A `d3.forceSimulation` with collision and X-axis forces arranges the right-side annotation positions, while the data is hardcoded as an array of value-label-color objects.

PPatrick Wojda
71% match