Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
PPragyagarg
Last edited Dec 13, 2018
Created on Dec 13, 2018

Two donut charts display randomly generated sales data for five product tiers, each slice filled with a radial gradient that darkens toward the edge for a subtle 3D effect. A "Change Data" button triggers animated transitions using `gradPie.transition`, which relies on D3 v3’s `transition.attrTween` and an interpolated arc path (`d3.svg.arc`). The custom `gradientPie.js` library builds gradients via SVG `radialGradient` elements and updates both charts simultaneously in 750 milliseconds, demonstrating reusable pie-chart logic with smooth data updates.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Gradient Pie

Two donut charts render randomized sales data with radial gradients that simulate a three-dimensional effect. The example draws two pie charts with D3 v3, using SVG `radialGradient` definitions to shade each arc from its assigned color to black. A button triggers `gradPie.transition`, which animates both charts to new random values via `transition.attrTween` and `d3.interpolate` on each path's arc geometry. The layout comes from `d3.layout.pie`, while gradients are created programmatically from each data point's color field.

NNPashaP
89% match
Loading thumbnail…

Pie charts labels

This variation of a donut chart demonstrates how to label each slice with text and leader lines that extend outward. A button click triggers a transition to new random data, with all elements—arcs, labels, and polylines—smoothly animating to their new positions. The visualization uses D3.js v3, employing `d3.layout.pie` for the pie layout, `d3.svg.arc` for the donut and outer arcs, and `transition.attrTween` with `d3.interpolate` to morph values. Text labels are positioned via `outerArc.centroid` and aligned left or right based on the slice’s mid-angle.

FFrissAnalytics
81% match
Loading thumbnail…

3D Donut

Two 3D donut charts display randomized sales category data with labeled slices, each rendered as a top surface, outer side, and darker inner side. Using D3 v3 and SVG, the code builds paths via the `Donut3D.draw` function, while a button triggers the `Donut3D.transition` method to smoothly animate slice angles and percentage labels through `attrTween` interpolations.

NNPashaP
81% match
Loading thumbnail…

fresh block

This example shows a simple pie chart visualizing three data values (10, 20, 100) as proportional slices. The chart uses an SVG rendering with D3 v4, creating arcs with a white stroke separation. Colors are assigned via a categorical ordinal scale with a muted three-color palette. The pie layout uses `d3.pie` with null sorting, while `d3.arc` defines the slice geometry, keeping the label text commented out. The visualization is static, with the data hardcoded in the script.

KKacieW
81% match
Loading thumbnail…

Amazing pie

An animated donut chart displays eight arcs sized by the Fibonacci sequence, with proportional segments revealed through a sweeping transition. The visualization uses D3 v4’s `d3.pie` layout with padding, `d3.arc` for outer, inner, and corner radii, and a custom `arcTween` function via `transition.attrTween` to interpolate each arc’s start and end angles. A categorical color scale from `d3.scaleOrdinal(d3.schemeCategory10)` fills the segments, rendered as SVG paths within a centered group.

DDDDDDanica
80% match
Loading thumbnail…

fresh block

This example presents a donut chart displaying the age distribution of a population, with each slice colored and labeled by age group. The chart is created using D3 v4, employing the `d3.pie` function to compute arc segments and the `d3.arc` API for rendering both the chart's path and label positioning. Data is loaded from a CSV file with columns for age and population, and the ordinal color scale assigns distinct colors to each category. The visualization renders as an SVG element, with white text labels placed at the centroid of each arc for clarity.

JJennKempCodes
80% match
Loading thumbnail…

fresh block

A donut chart displays the value and percentage for eight iPad models, with each wedge colored by a categorical scale and connected to a labeled callout line. The visualization uses D3 v3’s `d3.layout.pie` and `d3.svg.arc` to generate the arcs, while a custom `relax` function iteratively adjusts overlapping text labels, shifting their `y` positions and updating the corresponding line endpoints to reduce clutter. The code mixes D3 v3 and v4 scripts, rendering to SVG.

KKacieW
79% match
Loading thumbnail…

http://stackoverflow.com/questions/32510101/d3-why-is-enter-selection-not-showing-any-transition-for-a-donut-chart?noredirect=1#comment52896340_32510101

This example demonstrates a dynamic donut chart that updates its data every 750 milliseconds, with smooth animated transitions for the arc segments and labels. The visualization uses D3.js 3.5.6 to render SVG paths and text, employing `d3.layout.pie` for data binding and `transition.attrTween` with a custom pie tween to interpolate start and end angles. A color scale assigns each category a distinct hue, while a center text element displays the total sum. The code includes custom label rotation logic to keep text readable around the ring.

FFrissAnalytics
79% match