Skip to main content
100%

d3 donut with legend horizontal

✓ Published0🌍 Public
Aallyraza
Last edited Nov 26, 2017
Created on Nov 22, 2017

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

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…

D3.js Step by Step: Step 3 - Adding a Legend

This example demonstrates a donut chart whose legend identifies each slice by category label, such as “A: <= 0.25 acres” and “G: 5000+ acres.” The chart is rendered as SVG using D3.js v4, with `d3.pie` and `d3.arc` generating the donut shape and `d3.scaleOrdinal` assigning colors from `d3.schemeCategory20`. The legend is built by appending a `g` element for each color domain entry, adding a colored `rect` and a `text` label, and positioning them vertically. All data counts are zero, so the chart displays an empty donut with its legend intact.

SSkyBTW
85% match
Loading thumbnail…

D3.js Step by Step: Step 3 - Adding a Legend

This example demonstrates a donut chart with a legend, showing seven categorical labels with zero counts. The visualization uses D3 v4 to generate SVG paths via `d3.arc` and `d3.pie`, with a categorical color scale from `d3.scaleOrdinal(d3.schemeCategory20)`. A legend is added on the left side, positioning colored rectangles and text labels using the same color scale’s domain. The code manually calculates legend offsets based on fixed rectangle sizes and spacing, rendering the static dataset without interaction.

SSkyBTW
85% match
Loading thumbnail…

Untitled

This example shows a donut chart with labels connected by polylines, using dummy data with eight categories where three have value one and five have value nine. The chart uses d3.pie and d3.arc to generate slices with a donut hole, while d3.scaleOrdinal and d3.schemeDark2 assign colors. Labels are positioned outside the chart using outerArc centroids, with text-anchor adjusted based on the slice angle for left or right alignment. The SVG rendering includes semi-transparent fills and white stroke separations.

SSampras Dsouza
85% 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
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