playground #2

100%

✓ Published0🌍 Public

Last edited Jul 24, 2021

Created on Jul 24, 2021

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.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

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

84% match

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

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

83% match

Loading thumbnail…

Pie chart in React & D3 - 1st attempt

This example shows a donut-style pie chart built as a React component, with four slices colored along a gradient from orange to deep pink using `d3.interpolateRgb`. It relies on `d3.pie()` to compute the slice angles and `d3.arc()` with both inner and outer radii to generate SVG `<path>` elements. The chart is rendered inside a `<g>` group translated to the center of an SVG canvas, with a commented-out companion component that would draw color swatches via `d3.interpolateRgb` for testing.

BbeauMarko

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

82% match

Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza

82% match

Loading thumbnail…

Fork of Pie chart in React & D3 - 1st attempt

This example presents a React and D3-based pie chart with four slices, rendered as SVG paths. The pie segments are colored using a color gradient interpolation between warm tones, applied proportionally across the slices. The chart positions a donut-like ring with an inner radius of 180 and an outer radius of 250, centered within a 960 by 500 pixel viewport. The implementation combines React components with d3’s `pie` and `arc` functions to compute the slice geometry, alongside `d3.interpolateRgb` for color transitions. A separate, commented-out `Check` component demonstrates an alternative color interpolation approach.

Yyingzhe-z

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

81% match