Skip to main content
100%

donut chart with tooltip and legend

✓ Published0🌍 Public
Aallyraza
Last edited Oct 10, 2017
Created on Oct 10, 2017

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/56b15b919de4d073a48677bd2f89e274'>gauge with gradient</a>

mit Licensed

Similar vizzes

Loading thumbnail…

d3 donut with legend horizontal

A d3.v4 donut chart displays three categorical values as proportional arcs, each colored via `d3.scaleOrdinal` with the `d3.schemeCategory20b` palette. Below the donut, a horizontal legend places colored squares and text labels, dynamically positioned using each label’s `getBBox()` width to avoid overlap. The chart uses `d3.pie` and `d3.arc` to generate the SVG paths, with margins configured around a 400×300 pixel canvas. Data is hardcoded as objects with `label` and `value` properties, and the visualization is rendered entirely with SVG elements in the browser.

Aallyraza
89% match
Loading thumbnail…

Reusable Donut Chart in D3 v4

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.

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

Untitled

A donut chart displays five values as colored arcs with labels positioned outside the chart. Each label is connected to its corresponding arc by a thin pointer line ending in a small circular marker. The visualization uses d3.pie to compute arc angles and d3.arc for the donut shape, while d3.scaleOrdinal with interpolateHslLong assigns colors. Labels and pointer paths are positioned manually using trigonometry, and SVG markers define the pointer endpoints.

PPiotr Paszek
83% match
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
83% match
Loading thumbnail…

Untitled

A donut chart displays three categorical values—Country, City, and Continent—with proportional arcs colored via a categorical scale. A legend aligns beneath the chart, using text labels and colored rectangles. The code builds the visualization with d3.pie and d3.arc, and positions legend items by measuring each group’s bounding box width. The chart is rendered as SVG on an HTML page using React-style class syntax, with margins and a fixed outer size.

AAndrea Mignone
83% match