Skip to main content
SimilarExport ZIP
100%

pieChart

✓ Published3🌍 Public
SSchmittYannic
Last edited Aug 26, 2020
Created on Aug 26, 2020
Forked from neues barchart v3

This example shows a pie chart for absolute frequencies of categorical data, with an animated sweep-in effect for each slice and a dropdown menu to switch between the "note" and "student" columns. It uses React with D3 v5, rendering SVG paths via `d3.pie()` and `d3.arc()`. The animation is driven by `transition.attrTween` with `d3.interpolate` for angle changes. A button-styled tooltip appears on hover, and data is aggregated with `d3.nest()` before being passed to the chart.

AI-generated description

A bare minimum HTML page.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of pieChart

A pie chart displays the absolute frequency of categorical values, initially for student grades, within a React-based visualization. The chart animates its segments using d3.arc and a transition.attrTween, interpolating start and end angles over a 500-millisecond delay per slice. A dropdown menu allows switching between categorical columns (e.g., "note" or "student"), recalculating frequencies via d3.nest().key().rollup() and re-rendering the SVG with d3.select and path elements. Hovering activates tooltips showing each slice's key and value.

Ppreethamkesa
89% match
Loading thumbnail…

bar and pieChart

This interactive visualization lets users explore the absolute frequencies of categorical values within a dataset, specifically looking at student grades and degree types. The main view is a bar chart that can be toggled to a pie chart, with a dropdown menu to select which category to display. Built with React and D3 v5, it uses `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `schemeCategory10` for the bar chart, and `d3.pie`, `d3.arc`, and custom `attrTween` animations for the pie chart. The implementation includes hover tooltips and animated transitions when switching chart types or data columns.

SSchmittYannic
88% match
Loading thumbnail…

barChart and pieChart V3

This example shows how interactive bar charts and pie charts can be built with React and D3 v5, allowing users to switch between chart types and select different categorical columns from a dropdown menu. The visualization displays absolute frequencies of student grades and degree programs, with hover tooltips showing values or percentages, and animated transitions when switching data. It uses D3’s scaleBand, scaleLinear, scaleOrdinal, nest, pie, arc, and axis components, rendered as SVG with transitions and animation delays, plus custom tooltip handling via mouse events.

SSchmittYannic
88% match
Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over

This example shows a donut chart displaying a percentage value, where the foreground arc animates to its final angle using a repeating transition. The arc’s color shifts through a gradient that changes based on the input percentage, with hover effects highlighting the path by increasing its stroke width and color. Built with D3 v5 in a React framework, the visualization uses `d3.arc`, `transition.attrTween` for smooth angle interpolation, and `linearGradient` definitions for the dynamic color stops.

SSchmittYannic
85% match
Loading thumbnail…

barChart and pieChart V2

This interactive visualization lets users explore categorical data through bar and pie charts, dynamically switching between chart types and selecting which data column to aggregate. It displays absolute frequencies for university student grades across different degree programs. The implementation uses React with D3 v5, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal` for the bar chart, and `d3.pie` with `d3.arc` for the pie chart. Both charts feature animated transitions via `transition().duration()`, hover tooltips, and interactive dropdown menus for column selection.

SSchmittYannic
84% 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
84% match
Loading thumbnail…

pie chart for percentage with transition, gradient color and mouse over *changed*

A donut chart displays a single percentage value with a smooth animated transition, using a gradient fill that shifts from red to green as the percentage increases. The chart includes a mouseover effect that highlights the arc and bolds the percentage text. Built with React and D3 v5, the visualization uses SVG paths, `d3.arc` for the donut shape, `transition.attrTween` for the animation, and a linear gradient defined in the SVG `defs` section. The percentage updates are driven by `d3.interval`, with the input data hardcoded as zero.

SSchmittYannic
83% match
Loading thumbnail…

Pie chart with annimation

This interactive pie chart displays six categorical values under three selectable datasets (“Total,” “Option 1,” “Option 2”) with a donut layout and legends. It animates slice arc changes using D3’s `transition` and `attrTween`, interpolating between old and new arc paths when switching datasets via radio buttons. The SVG rendering includes slice paths, label polylines, and tooltips on mouseover, while colors come from `d3.scale.category20()`. The code mixes d3.v4 and d3.v3 APIs, including `d3.layout.pie` and `d3.svg.arc`.

DDDDDDanica
83% match