Tasty donut

100%

✓ Published0🌍 Public

Last edited Jun 15, 2022

Created on Jun 28, 2021

Forked from donut

A rotating, five-layer donut chart spins continuously in the center of the screen. Each ring segment displays a number and uses a rainbow sequential color scale based on the overall donut's layer count. Built with D3 v6, the visualization creates arcs via `d3.arc` and `d3.pie`, while a CSS animation and a JavaScript interval with `setInterval` rotate the entire SVG group and counter-rotate the text labels.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

Rotating Disks

Three sets of nested donut charts, each composed of three concentric rings colored by CSS named colors from a CSV file, rotate around their shared center. The outermost and innermost rings rotate in opposite directions while the middle ring remains stationary. The rotation is driven by `d3.timer`, and the donut arcs are generated using `d3.arc` and `d3.pie`. The visualization uses React to manage state and render SVG elements, with three identical clusters positioned at different locations on the canvas.

CCurran Kelleher

82% match

Loading thumbnail…

Donut of Rendering Data with React & D3

A donut chart displays CSS named colors as equal-sized slices, with each slice filled by its corresponding hex value. The entire donut rotates continuously, creating a slow animation driven by a React interval updating state. D3’s `arc` and `pie` utilities compute the slice geometries from CSV data loaded via `d3.csv`, while React renders the SVG paths. The visualization uses React hooks (`useState`, `useEffect`, `useRef`) to manage the animation loop and data fetching from a gist URL.

HHarr

80% match

Loading thumbnail…

Untitled

A donut chart displays five values as colored arcs with labels positioned outside the chart. Each label is connected to its corresponding arc by a thin pointer line ending in a small circular marker. The visualization uses d3.pie to compute arc angles and d3.arc for the donut shape, while d3.scaleOrdinal with interpolateHslLong assigns colors. Labels and pointer paths are positioned manually using trigonometry, and SVG markers define the pointer endpoints.

PPiotr Paszek

80% match

Loading thumbnail…

Gist 937986

A single red donut chart fills the entire 800-by-800-pixel SVG canvas, showing five equal slices that together form a complete ring. The visualization uses D3's `d3.layout.pie` to compute the arc angles and `d3.svg.arc` with an inner radius set to 95% of the outer radius, producing a thin, ring-like donut rather than a thick pie. Each slice is filled with the same solid red color, and the data comes from a hardcoded array of five 20s in the sample.coffee file. The rendering approach relies on SVG `path` elements grouped in `<g>` elements, with the entire chart translated to the center of the canvas.

CCaged

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

80% match

Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans

80% match

Loading thumbnail…

Donut Example Re-imagined

A donut chart rendered with React and D3 v5 uses the `d3.arc` and `d3.pie` APIs to display five slices in a ring. A mouth-shaped arc sits at the center using a separate `mouthArc` path. A button labeled "Transform" regenerates random data through `generateData`, updating the chart via React state and D3 selection joins. The component also includes commented-out code for displaying formatted values using `d3.format`.

PPeter Maida

79% match