Pie Chart

100%

✓ Published0🌍 Public

Last edited Jan 10, 2018

Created on Jan 10, 2018

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

Pie Chart

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.

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

81% match

Loading thumbnail…

donut chart

This donut chart displays three proportional values as colored arc segments, with percentage labels positioned outside the chart. The visualization uses D3 v4’s `d3.pie()` and `d3.arc()` functions to compute segment angles and paths, rendering the SVG chart dynamically. An interactive element positions HTML labels via absolute styling, calculating their coordinates from the arc centroids and canvas dimensions. The static data is embedded in the code, with colors and suffixes defined per segment. Bare bones and functional, it demonstrates a simple, clean alternative to a standard pie chart.

PPatrick Wojda

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

78% match

Loading thumbnail…

Donut-Pie Chart

This donut-pie chart visualizes hierarchical data from a CSV file, showing current statuses in the outer donut ring and prior statuses in the inner pie, with color coding for New, Open, Reopened, and Closed categories. Built with d3.v3, it uses `d3.layout.pie`, `d3.svg.arc`, and `d3.nest` to aggregate and structure the data, rendering as SVG. The outer arc and inner wedge paths are styled with distinct radii, and labels are positioned via arc centroids.

TThanaporn-sk

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

77% match

Loading thumbnail…

Pie chart with labels

This pie chart displays three categories (A, B, C) as a donut, with each slice labeled by its numeric value and connected to the slice via a thin pointer line. Built with D3 v3, it uses `d3.layout.pie` to compute angles, `d3.svg.arc` with an inner radius for the donut shape, and `d3.scale.category20` for slice colors. Labels are positioned outside the chart using trigonometry on start and end angles, with anchors adjusted based on text bounding boxes. The data is hardcoded in the script.

DDDDDDanica

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

77% match