Pie chart

100%

✓ Published0🌍 Public

Last edited Jun 15, 2020

Created on Jun 15, 2020

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.

AI-generated description

Making a pie chart based on: https://bl.ocks.org/adamjanes/5e53cfa2ef3d3f05828020315a3ba18c/22619fa86de2045b6eeb4060e747c5076569ec47

MIT Licensed

Similar vizzes

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

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

93% match

Loading thumbnail…

Pie chart

A pie chart displays the proportional breakdown of four hardcoded values, with a color legend assigned via a radio button group offering apples or oranges datasets. The visualization renders as an SVG donut using D3 v5's `d3.pie()` and `d3.arc()` generators, with an ordinal color scale mapping categories to distinct hues. The chart draws all arcs at once from a fixed data array, and changing the dataset radio button does not trigger a re-render, as only the initial render function is called.

Ssathishkanna11

85% match

Loading thumbnail…

Pie chart

This pie chart example shows a donut-shaped chart with a solid orange center, rendered as an SVG using D3 v5. The chart displays four data segments (10, 20, 30, 60) with a color scale based on `d3.scaleOrdinal`, while radio buttons allow switching between apple and orange datasets (though only the orange dataset is actively rendered). The visualization uses `d3.arc()` to generate both the outer ring and inner circle paths, with the chart positioned at three-fifths of the SVG height.

JJoachimSchaeffer

84% match

Loading thumbnail…

Pie chart

This interactive pie chart visualizes age-group distributions for six U.S. states, toggling between "apples" and "oranges" datasets via radio buttons. Built with D3.js v5, it uses `d3.pie` to compute arc angles, `d3.arc` for rendering donut segments, and `transition.attrTween` with an arc interpolation function to animate updates smoothly. A legend of colored dots and labels appears alongside the chart, with each state’s age categories mapped to a categorical color scale. The data loads from a local JSON file, and the SVG renders with styled strokes and transitions.

FfaRriaN

84% match

Loading thumbnail…

Pie Chart

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.

0007ebey

84% match

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

84% match

Loading thumbnail…

Pie Chart Update, I

This example shows an interactive donut chart whose displayed metric changes when the user selects a radio button. The chart initially renders apple counts from a TSV file, then after two seconds automatically switches to orange counts, updating the arc angles accordingly. Using D3 v3, the code employs `d3.layout.pie` and `d3.svg.arc` to compute and draw SVG path arcs, while the `change` event handler redefines the pie’s value function and redraws the arcs. A `color` scale from `d3.scale.category20` assigns distinct fills to each segment.

Mmbostock

83% match