Skip to main content
SimilarExport ZIP
100%

Pie chart in React & D3 - with Legend

✓ Published0🌍 Public
BbeauMarko
Last edited Feb 13, 2021
Created on Feb 12, 2021

A React and D3 donut chart visualizes budget allocations across five categories, with a legend mapping category names to a color scale interpolated between coral and crimson. The `pie` and `arc` generators compute slice geometry, while `scaleOrdinal` assigns colors from the interpolated range. Percentages appear on slices via `arc.centroid`, and the `ColorLegend` component renders interactive-free color swatches with tick spacing. The chart uses SVG rendering with `d3.interpolateRgb` for gradient transitions and `format` for numeric labels, based on static data in the `donThemes` array.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Pie chart in React & D3 - donations data

This example shows a donut chart of donation distribution across five categories—Health, Support, Education, Poverty reduction, and Other—with each slice labeled by its percentage. The visualization is built with React functional components and D3 v6, using `d3.pie()` to compute arc angles and `d3.arc()` to generate SVG path geometry. Slice colors derive from a categorical interpolation via `d3.interpolateRgb`, linking the data’s category order to a warm-to-cool gradient. The chart renders as SVG, with the React state and component structure managing the mapping from data to visual elements.

BbeauMarko
89% match
Loading thumbnail…

Pie chart with react

A pie chart displays the relative frequency of named CSS colors, with each slice filled by its corresponding RGB hex value. The visualization loads CSV data via `d3.csv` and uses React's `useState` and `useEffect` hooks to manage asynchronous data fetching and component state. D3's `pie` and `arc` generators compute the slice geometry, which React renders as SVG `<path>` elements. The example demonstrates unidirectional data flow and mouse-event readiness within a React-D3 integration.

IIlgar Akalın
86% 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
85% match
Loading thumbnail…

Pie Chart Rendering Data with React and D3 - CSS Named Colors

This example uses React and D3 to render a pie chart of CSS named colors, with each slice colored by its corresponding hex value. D3’s `csv` loader fetches color data from a GitHub gist, while the `pie` and `arc` generators compute the slice angles and SVG paths. React manages the component state and renders the SVG, updating from a loading message to the visualization once data arrives. The chart displays all named colors as equal-weight slices radiating from the center, creating a full circular burst.

AAriana
85% match
Loading thumbnail…

Pie Chart React & d3

A pie chart renders a color wheel from a CSV file of named colors, using React state to manage the asynchronous data loading. The static chart displays each color as an equally sized slice, with its fill set to the corresponding RGB hex value from the data. Built with React and D3 v7, the code uses `d3.csv` to fetch the data and `d3.pie` with `d3.arc` to generate the SVG paths. The visualization is rendered as an SVG element, centered on a 960x500 canvas.

Kkbrookshire420
84% match
Loading thumbnail…

Pie chart using data loaded with React and D3

This example displays a pie chart where each slice represents a named CSS color from a dataset loaded via `d3.csv`. The chart renders as SVG using React components, with `d3.pie()` computing the arc angles and `d3.arc()` generating the path shapes. React state manages the asynchronous data loading, and each slice’s fill color directly uses the `RGB hex value` from the CSV data.

HHeidi Stockton
84% match
Loading thumbnail…

Pie chart

A pie chart displays the distribution of CSS named colors, with each slice colored according to its corresponding hex value. The visualization loads a CSV dataset using `d3.csv` and computes the pie layout with `d3.pie`, assigning each record an equal value. React renders the resulting arcs as SVG paths using `d3.arc`, positioned at the center of a 960×500 viewport. The chart uses D3 v5 and React 16.9, with all slices sharing a common radius and no inner gap.

NNikithakatta30
84% match
Loading thumbnail…

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

A React and D3 pie chart renders four slices with a color scale interpolated from #eaaf79 to #bc3358 using d3.interpolateRgb. The chart uses d3.pie() and d3.arc() to compute and draw each SVG path, with inner and outer radii defining a donut shape. A secondary component defines a checkered color ramp from #0F8C79 to #f2f2f2, though it is commented out. Unused legend data for five named categories is declared but not rendered.

Yyingzhe-z
84% match