Skip to main content
SimilarExport ZIP
100%

Donut Example

✓ Published1🌍 Public
PPeter Maida
Last edited Oct 28, 2020
Created on Oct 27, 2020

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.

AI-generated description

Animated Pie chart taken from this website.

MIT Licensed

Similar vizzes

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
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
87% 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
86% match
Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07
85% match
Loading thumbnail…

React Starter with Pie

This example demonstrates a donut chart built with React and D3, displaying a small categorical dataset with five segments. It uses D3’s `pie` and `arc` functions to compute the angular positions and draw the SVG paths, while `scaleOrdinal` assigns a fixed color palette to each category. The chart is rendered inside a React component, with D3’s `select` and `append` methods managing the SVG elements directly within the React-rendered container. The code also includes a separate `useData` hook for loading CSV data, though the pie chart itself uses inline dummy data.

PPeter Maida
85% 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
85% match
Loading thumbnail…

D3 Donut Chart

This D3 Donut Chart visualizes categorical sales data loaded from a remote CSV file, rendering each category as a colored arc segment around a hollow center. The chart uses React hooks (`useState`, `useEffect`) to fetch and store the data, then builds the visualization with D3's `pie()` and `arc()` functions inside an SVG element. Each path is generated by the `pieArc` generator with an inner radius of 100 and outer radius of 200, with fill colors assigned from the dataset’s `color` field. The view displays a simple loading state while the CSV is being fetched.

JJack Elsey
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
84% match