Gist 937986

100%

✓ Published0🌍 Public

Last edited Apr 22, 2011

Created on Apr 22, 2011

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.

AI-generated description

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

84% match

Loading thumbnail…

Gist 1077277

This example shows a small donut chart that visualizes three named data points (Tom, Sally, John) with their corresponding numeric values, using a 400 by 400 pixel SVG canvas. The chart renders each slice with a distinct color from the categorical color scale, and labels each slice with its value formatted to two decimal places. The visualization is built with D3.js version 1.25.0, specifically using the `d3.layout.pie` for the pie layout and `d3.svg.arc` to define the donut's inner and outer radii. A click handler logs the data object of a clicked slice to the console. The data is hardcoded in the script, with no external source.

CCaged

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

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

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

80% match

Loading thumbnail…

Tasty 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.

MMTR

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

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica

79% match