Donut Example Re-imagined

100%

Donut Example Re-imagined

✓ Published2🌍 Public

Last edited Oct 28, 2020

Created on Oct 28, 2020

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

AI-generated description

Animated Pie chart taken from this website.

MIT Licensed

Similar vizzes

Loading thumbnail…

Donut Example

A donut chart displays five randomly generated numeric values as proportional arcs, with each slice labeled by its value in white text. The visualization updates its data on button press or when the data reference changes, demonstrating a React hook-based update pattern. Built with D3 v5 and React, the `Pie` component uses `d3.pie()` for arc generation, `d3.arc()` with configurable inner and outer radii, and a `scaleOrdinal` color scheme. SVG rendering occurs within a React component using `useRef` and `useEffect` hooks to manage the D3 selection lifecycle.

PPeter Maida

90% match

Loading thumbnail…

Donut Example Re-imagined and Broken

This example re-imagines a standard D3 donut chart as a playful face, rendered as an SVG path that forms a mouth arc, while the pie slices remain unjoined and broken due to missing data-binding logic. The React component uses D3 v5’s `d3.pie` and `d3.arc` to compute and render arcs, with `d3.scaleOrdinal` for colors and `d3.format` for labels. Data comes from a CSV of firearm, suicide, and alcohol-related deaths, loaded via `d3.csv` in a custom `useData` hook.

PPeter Maida

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

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

83% match

Loading thumbnail…

playground #2

This example shows a donut chart with three randomly sized and colored slices rendered as SVG paths. The code uses React to build the component, while D3 v7 provides the `pie` generator and `arc` generator to compute the angular layout and path geometry. Slice values come from `d3.randomUniform`, and each color is generated as a random hexadecimal string. The chart is centered in a fixed 900 by 600 viewport with an inner radius of 60 and outer radius of 200.

Bbart

83% match

Loading thumbnail…

Rendering data with react and D3

A donut chart renders the CSS named colors dataset, loaded from a GitHub gist as CSV, with each color name represented by a slice colored by its RGB hex value. The React component uses the `useState` and `useEffect` hooks to fetch and store the data asynchronously, then maps it through D3's `pie()` layout and `arc()` generator to produce SVG paths. All slices have equal value, creating a uniform ring, and the chart appears at the center of a 960×500 SVG canvas.

KKIRRAN P L

82% match

Loading thumbnail…

Donut Example Re-imagined 2 Final Week

This example shows an interactive pie chart built with React and D3 v5 that visualizes firearm, suicide, and alcohol-related death data from a CSV file. The chart displays a semi-circular arc for the mouth, while the pie slices represent data grouped by sex, with distinct colors from the `d3.schemeCategory10` palette. The code uses `d3.pie()` for the arc generation and `d3.arc()` for rendering, with a button to trigger data transformations. The visualization runs entirely in SVG, with data loaded asynchronously via `d3.csv` and rendered through React hooks and the D3 selection API.

PPeter Maida

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

82% match