Pie Chart

100%

✓ Published0🌍 Public

Last edited Jan 10, 2018

Created on Jan 10, 2018

This example shows a donut pie chart displaying the distribution of Bitcoin ATMs by continent, with five labeled slices and a color-coded legend. The chart visualizes values for North America, Europe, Asia, South America, and Oceania using a static dataset defined in the HTML. A tooltip appears on hover, showing each slice’s label, count, and percentage. Clicking a legend entry disables the corresponding slice via animated transitions using d3.layout.pie, d3.svg.arc, and transition.attrTween, while SVG renders the chart and legend.

AI-generated description

Pie Chart with Zoomable sectors and tooltips

forked from <a href='http://bl.ocks.org/arpitnarechania/'>arpitnarechania</a>'s block: <a href='http://bl.ocks.org/arpitnarechania/577bd1d188d66dd7dffb69340dc2d9c9'>Pie Chart</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c5f772c8bb7e8d16e4dd0dc61e86f22a'>Pie Chart</a>

forked from <a href='http://bl.ocks.org/Ljfernando/'>Ljfernando</a>'s block: <a href='http://bl.ocks.org/Ljfernando/ba12e64add1ae55caf933300c44dfa9e'>Pie Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Pie Chart

A donut chart displays the number of Bitcoin ATMs across five continents, with a legend for toggling categories. Built with D3 v3, it uses `d3.layout.pie` for arc generation and `d3.svg.arc` for the donut shape. Hovering reveals a tooltip with the label, value, and percentage, while clicking a legend item triggers animated transitions via `transition.attrTween` to interpolate arc geometry, disabling or re-enabling slices. The chart is rendered as SVG with custom CSS styling.

LLjfernando

93% match

Loading thumbnail…

Pie Chart

A donut chart displays six data points as animated arcs, with each segment labeled by its data ID. Built with D3 v4, the visualization uses the `d3.pie` layout, `d3.arc` geometry, and a `transition.attrTween` to smoothly interpolate between random values on each update. The SVG is rendered dynamically, with slices colored via `d3.scaleOrdinal` and labels positioned at arc centroids.

MMTClass

75% match

Loading thumbnail…

Fork of Pie Chart Artistes

A donut chart displays the distribution of music genres by percentage, with each slice labeled and colored distinctly. The visualization uses D3.js to load CSV data and render an SVG, employing `d3.pie` and `d3.arc` for the donut geometry, `d3.scaleOrdinal` with a custom color range, and d3-scale-chromatic for color handling. Hovering over a slice reveals a tooltip showing the precise percentage, calculated with `d3.sum`, while mouse events and CSS transitions manage tooltip visibility.

AAnissa Belkelfa

75% match

Loading thumbnail…

pie Chart

This pie chart displays the distribution of world population across six continents, sorted from largest to smallest share. The visualization loads tabular data via `d3.tsv`, aggregates values by continent using `d3.rollup`, and generates SVG arcs with the `d3.pie` and `d3.arc` layouts. A color legend and hover tooltip provide additional context, while slice opacity changes on mouseover enhance interactivity.

AAnurup Reddy

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

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

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

73% match

Loading thumbnail…

Pie Chart Artistes

A donut chart breaks down music genres by count, with each slice labeled and colored to show the proportion of artists per category. The visualization uses D3’s `pie` and `arc` generators to compute slice geometry and paths, while `scaleOrdinal` maps genre names to a custom color palette from `d3-scale-chromatic`. Hovering over a slice reveals a tooltip with the exact percentage, calculated using `sum` over the CSV data. The code reads from `data.csv` and renders the chart as SVG elements with mouseover and mouseout event handlers.

AAnissa Belkelfa

73% match