Skip to main content
SimilarExport ZIP
100%

Pie Chart

✓ Published1🌍 Public
0007ebey
Last edited Dec 9, 2020
Created on Aug 5, 2020

This interactive pie chart displays fruit counts across five regions—East, West, North, South, and Central—loaded from a TSV file. Built with React and D3 v5, it uses `d3.pie`, `d3.arc`, and `d3.nest` to aggregate data, with SVG paths and labels animated via `transition.attrTween`. A radio-button option component, rendered with D3 selections, lets viewers switch between fruit categories, redrawing the chart with a Tableau10 color scale.

AI-generated description

Chart with animation and labels, written to look like react js

MIT Licensed

Similar vizzes

Loading thumbnail…

Pie Chart

This example shows an interactive pie chart that displays fruit quantities by region, with radio buttons to switch between fruit types. The chart renders as an SVG using React and D3 v5, employing `d3.pie` and `d3.arc` to generate the donut-shaped paths with an inner radius of 200 and outer radius of 300. Color encoding is handled by `d3.scaleOrdinal` with the Tableau10 scheme, while `d3.nest` groups the tab-separated fruit data, which originates from the World Bank population dataset.

SSchmittYannic
91% match
Loading thumbnail…

Pie chart

This interactive pie chart visualizes regional apple and orange counts from a static JSON dataset, with radio buttons toggling between fruit types. The donut chart updates its arcs using `d3.pie` and `d3.arc`, while `transition.attrTween` animates shape changes. A legend built with SVG circles and text labels shows region names and colors from a `d3.scaleOrdinal` palette. The rendering uses D3.js (v5) with SVG and includes a 2-second delayed arc transition after each update.

Rrlia0010
86% match
Loading thumbnail…

Pie chart

The visualization displays two interactive pie charts comparing apple and orange counts across five regions, with a toggleable radio interface to switch datasets. Built with D3.js (v5.16.0), it renders an animated SVG donut chart using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` color scales. Legends appear as colored dots and labels beside the chart. On dataset change, arcs transition smoothly via `transition.attrTween` with interpolation, and a delayed auto-animation replays the arc tweens every two seconds. Data is loaded asynchronously from `data.json` via `d3.json`.

KKrister
84% match
Loading thumbnail…

Pie Chart Update, V

This example shows an animated pie chart that updates when the user selects a fruit type via radio buttons. The chart uses a data-join with a key function to smoothly transition arcs between states, preserving the identity of each region’s slice. Built with d3.v3, it leverages `d3.layout.pie`, `d3.svg.arc`, and `transition.attrTween` to interpolate arc geometry over 750 milliseconds. The data comes from a TSV file, nested by fruit with `d3.nest`, and the SVG paths animate by finding neighboring arcs to minimize movement.

Mmbostock
84% match
Loading thumbnail…

Pie chart

This interactive pie chart, built with D3.js, visualizes the regional distribution of apple and orange counts. A radio-button form lets the viewer toggle between the two datasets, triggering a smooth animated transition of the chart's arcs. The visualization includes a legend with colored dots and labels to identify each region. It uses D3's `pie`, `arc`, and `transition.attrTween` APIs to render the SVG and animate the changes.

MMelina
84% match
Loading thumbnail…

Pie Chart

This pie chart displays country population data from a TSV file, with radio buttons for selecting different indicators. It uses d3.pie and d3.arc to compute and draw the SVG arc paths, with an animated transition that interpolates the fill color via transition.attrTween and adjusts the inner radius. The chart is built with React, leveraging d3.scaleOrdinal with schemeTableau10 for color scaling, and d3.nest to group entries by indicator.

NNaveenaS12
84% match
Loading thumbnail…

Pie Chart Update, IV

This example demonstrates animated updates to a pie chart using D3’s data-join with a key function, switching between fruit categories. A set of radio buttons lets the user choose a fruit, and the chart’s arcs smoothly transition to reflect the regional counts for that fruit. The visualization renders as SVG, using `d3.layout.pie` and `d3.svg.arc` to compute and draw the arcs, while `d3.nest` groups the tab-separated dataset by fruit. Arcs are added, removed, and repositioned via `path.enter()`, `path.exit()`, and `path.attr("d", arc)`, with colors assigned by `d3.scale.category20()`.

Mmbostock
83% 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
82% match