Skip to main content
SimilarExport ZIP
100%

Key themes - pie chart

✓ Published1🌍 Public
Kkragovic
Last edited Apr 21, 2021
Created on Apr 12, 2021

This example visualizes survey responses on key themes important to Serbian citizens, combining a donut pie chart with a color-coded legend and a supplementary data table. The pie chart aggregates responses for predefined themes like COVID-19, healthcare, and education, while grouping all remaining themes into an "Ostalo" (Other) category. Built with React and D3 v6, it uses `d3.pie()` and `d3.arc()` to generate the SVG slices, `d3.scaleOrdinal` for the color scale, and `d3.csv()` to load the dataset.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Refactored key themes pie chart

A pie chart displays the proportion of Serbian citizens prioritizing five key themes: support for marginalized groups, poverty reduction, COVID-19, healthcare, and education. The chart uses a D3 pie generator and arc shape, colored via a D3 ordinal scale with varying orange and teal opacity. A React legend lists each theme with its percentage, while a separate HTML table, populated through D3 grouping and custom data reshaping, summarizes all non-key themes by their proportion intervals (e.g., 0-1%, 1-3%). Data comes from a CSV file loaded with d3.csv.

Kkragovic
91% match
Loading thumbnail…

Fork of Pie chart for report

This interactive donut chart displays the proportional sizes of five oblasts, with a legend showing each region’s percentage value. A menu allows the user to switch between plotting population, total, COVID, or other data categories, which updates the arc sizes and legend percentages accordingly. The visualization is built with React, rendering SVG paths generated by d3.pie and d3.arc, while d3.scaleOrdinal maps region names to colors. An unused helper embeds d3.interpolateRgb for a color gradient, and the menu responds to click events.

BbeauMarko
75% match
Loading thumbnail…

Pie chart

This visualization presents the distribution of survey respondents across different age groups using a pie chart. The chart is rendered as an SVG using React and D3 v5, with each section colored distinctly and labeled with a data value. Data is loaded asynchronously from a CSV file using `d3.csv`. The code constructs the pie using `d3.pie`, generates arcs with `d3.arc`, and applies colors via `d3.scaleOrdinal`. A legend, created with SVG `<rect>` and `<text>` elements, maps each color to its age group and member count.

VVineela Reddy
74% match
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
73% match
Loading thumbnail…

Pie chart for report

This example presents a pie chart that visualizes population data for three continents (Africa, Europe, and Australia), with each slice labeled by continent name. The chart is built using React components and D3.js v6, specifically leveraging `d3.pie()` to compute slice angles, `d3.arc()` to generate SVG paths, and `d3.interpolateRgb()` to apply a color gradient from deep red to light orange. The SVG rendering includes slices with calculated centroids using `arc.centroid()` for text positioning, while the unused `Check` component demonstrates a separate color-scale experiment.

BbeauMarko
72% match
Loading thumbnail…

Pie chart in React & D3 - with Legend

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.

BbeauMarko
72% match
Loading thumbnail…

Fork of Pie chart

A donut chart displays the distribution of survey respondents across different age groups, with each segment colored distinctly and labeled with its corresponding value. Legends on the right identify each age group and its member count. The visualization uses D3 v5’s `pie` and `arc` generators to compute segment paths, `scaleOrdinal` for color mapping, and `format` for number formatting. Data is fetched as CSV from a GitHub gist, and the SVG is rendered within a React component.

VVineela Reddy
72% match
Loading thumbnail…

Visualizing data with React & D3

A donut chart displays the proportional distribution of CSS named colors, with each color category represented as a slice of the pie. The visualization loads tabular data from a CSV file using the `d3.csv` utility, stores it in React state via `useState` and `useEffect`, and renders each slice as an SVG path. The chart uses the `d3.pie` layout and `d3.arc` generator to compute the arc geometry, while React maps over the data to create the path elements with the color's hex value as the fill.

MMarco Malvicini
71% match