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

100%

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

✓ Published0🌍 Public

Last edited Feb 19, 2018

Created on Feb 19, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

95% match

Loading thumbnail…

D3: Pie layout

This example shows a donut chart built with D3.js, displaying six numeric values as colored arc segments arranged around a central hole. Each segment is labeled with its corresponding value, positioned at the centroid of the arc. The visualization uses the `d3.pie()` layout to compute the angles and `d3.arc()` to generate the SVG path shapes, with an ordinal color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`) assigning colors. Data is hardcoded as an array, and all rendering is done via SVG elements in d3.v4.

深深度碎片

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

79% match

Loading thumbnail…

Donut Chart - Default Labels

This example shows a donut chart where each slice is labeled with an animal name, with the text placed along the arc starting at each slice’s beginning. The chart uses D3.js version 3.5.6, with `d3.svg.arc` for the donut slices and `d3.layout.pie` to compute the arc angles from a hardcoded dataset of eight animal values. Color is assigned via a linear scale with an HCL interpolator, and labels are rendered using SVG `<textPath>` elements referencing the arc paths. The data is embedded directly in the script rather than loaded from an external file.

SShuanWu

79% match

Loading thumbnail…

D3 Layouts - Pie charts

This example shows a donut-shaped pie chart that visualizes a small dataset of six numeric values. The chart is rendered as an SVG, with each value displayed as a white label at the centroid of its corresponding arc. The code uses D3’s `pie` layout generator to compute the arc segments, `d3.arc` to define the ring’s inner and outer radii, and `d3.scaleOrdinal` with `d3.schemeCategory10` to assign categorical colors. The chart is drawn using D3’s select/append API on a blank HTML page.

KKaustav Sen

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

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

79% match

Loading thumbnail…

Untitled

This example shows a donut chart of population data by age group, with a legend positioned to the right of the chart. The visualization uses D3 v3’s `d3.svg.arc` and `d3.layout.pie` to compute the arc paths, while a custom `d3.legend` function (defined in `d3.legend.js`) generates the legend from `data-legend` attributes attached to each arc path. Each slice is filled with a categorical color from an ordinal scale (`d3.scale.ordinal`), and the legend displays matching colors and age labels. Data is loaded from a CSV file.

TTharun2022

78% match