Skip to main content
100%

Reusable Donut Chart in D3 v4

✓ Published0🌍 Public
Aabrown004
Last edited Oct 7, 2019
Created on Apr 29, 2018

A reusable donut chart for D3 v4 displays the distribution of inspection outcomes across six categories, with percentage labels connected to each slice. The code uses `d3.pie` to compute slice angles, `d3.arc` for the donut geometry, and `d3.scaleOrdinal` with `schemeCategory20` for coloring. Hovering over a slice or label triggers a custom tooltip rendered as an SVG circle, while `d3.format` handles numeric and percentage formatting. The chart is built from a TSV dataset and styled with CSS drop shadows and label lines.

AI-generated description

forked from <a href='http://bl.ocks.org/mbhall88/'>mbhall88</a>'s block: <a href='http://bl.ocks.org/mbhall88/b2504f8f3e384de4ff2b9dfa60f325e2'>A static, reusable donut chart for D3.js v4.</a>

forked from <a href='http://bl.ocks.org/Thanaporn-sk/'>Thanaporn-sk</a>'s block: <a href='http://bl.ocks.org/Thanaporn-sk/d57656bb56a99e615c9d60540d2491f7'>A static, reusable donut chart for D3.js v4.</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Reusable Donut Chart in D3 v4

This donut chart displays species probability data from a TSV file, with each slice colored by species and labeled with its percentage. The chart is implemented as a reusable D3.js v4 function, using `d3.pie()` to compute slice angles, `d3.arc()` for rendering with configurable corner radius and padding, and `d3.scaleOrdinal()` with a categorical color scheme. Hovering over a slice or its label shows a tooltip with the species name and percentage in the donut’s center—a feature built from D3’s selection and event handling. The SVG output includes text labels and connecting polylines, styled via CSS.

TThanaporn-sk
90% match
Loading thumbnail…

Reusable Donut Chart in D3 v4

This reusable donut chart, built with D3 v4, displays the probability distribution of bacterial species in a sample. It renders an interactive SVG donut with labeled slices and connecting lines, and shows a tooltip in the center when hovering over a slice or species name. The chart is implemented as a reusable function using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, with data loaded from a tab-separated values file. It features animated transitions and customizable parameters like corner radius and pad angle.

EEndNight95
90% match
Loading thumbnail…

donut chart with tooltip and legend

This donut chart displays four categorical values as colored arcs, with a legend mapping each label to its corresponding color and a tooltip that follows the mouse to show the current cursor coordinates. Built with D3 v4, it uses `d3.pie` and `d3.arc` to generate the donut geometry, `d3.scaleOrdinal` with `d3.schemeCategory20c` for coloring, and `d3.scaleBand` to position the legend items. The SVG renders the arcs and legend, while a custom tooltip div appears on mouseover, updates its text via `d3.event.pageX` and `pageY`, and hides on mouseout.

Aallyraza
86% 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
86% match
Loading thumbnail…

donut chart w. d3-annotations

A donut chart displays six categorical values as proportional slices, with annotations positioned to the left and right of the chart. A center label appears above the visualization, though the annotation rendering is commented out, leaving only red translucent circles marking annotation anchor points. The chart uses the d3-annotation library alongside d3.v4, building the pie and arcs with `d3.pie()` and `d3.arc()`. A `d3.forceSimulation` with collision and X-axis forces arranges the right-side annotation positions, while the data is hardcoded as an array of value-label-color objects.

PPatrick Wojda
85% match
Loading thumbnail…

Untitled

This example shows a donut chart that visualizes a small dataset of five categorical values, with each slice colored distinctly and separated by black strokes. The chart uses D3.js version 6, where `d3.pie()` computes the arc angles from the data and `d3.arc()` generates the SVG path geometries with an inner radius creating the donut hole. A color scale via `d3.scaleOrdinal()` maps each category to a unique color, while the SVG rendering is sized and centered within a fixed 450×450 viewport. The slices are semi-transparent and rendered as SVG path elements appended to a grouped container.

Nnicolekevans
84% match
Loading thumbnail…

Donut Chart D3

This interactive donut chart displays categorical data as colored arcs, with a hover effect that enlarges the selected segment. Built with React and rendered as SVG, it uses D3’s `pie` generator to compute arc paths and `scaleOrdinal` for the yellow, red, blue, and green color mapping. On mouse enter, the corresponding arc is redrawn with a larger `arc` radius, while a separate `hoveredArc` path is drawn beneath. The data is hardcoded as an array of `x` and `y` values.

SSiddharthMittal07
84% match
Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

This example shows the distribution of language popularity as a donut chart, aggregating the six largest categories into labeled slices and grouping all remaining categories into a single "others" slice. It uses d3.pie and d3.arc to generate the SVG paths, with an ordinal color scale from d3-scale-chromatic (schemeDark2) for slice fills. Labels and connecting polylines are positioned using outerArc.centroid and conditional text-anchor logic based on mid-angle, with data loaded from data.json via d3.json.

SSuzie1022susu
84% match