Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
SSkyBTW
Last edited Feb 22, 2018
Created on Feb 22, 2018

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.

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 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
95% 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
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
78% 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
78% match
Loading thumbnail…

Activity 7_question1

This example shows a donut chart of categorical sales data, with each slice labeled by category and a legend on the left. Hovering over a slice displays a tooltip with the percentage share of the total sales. The code uses D3 v7 with `d3.pie` and `d3.arc` to generate the pie geometry, and `d3.scaleOrdinal` with `schemeCategory10` for colors. Data is loaded as CSV from a GitHub gist, and the SVG is rendered with a centered group and a 200-pixel right margin for the legend.

Vvenkatdinesh5010@gmail.com
78% 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.

深深度碎片
77% match
Loading thumbnail…

legend

This example displays a four-category ordinal legend for values from “Insignificant” to “High,” rendered as colored squares with adjacent text labels inside an SVG. It uses a custom `d3.legend()` function built with `d3.scaleOrdinal` to map domain values to color ranges, and appends the legend to a blank SVG canvas via a D3 selection. The legend’s position and colors are configurable through `.translate()` and `.colors()`, and a callback logs “Done!” after rendering. The code includes a separate `d3.legend.js` file and relies on D3 v4.

MMTClass
77% match
Loading thumbnail…

Labels

This example shows a donut chart with value labels placed outside the arcs, connected by thin pointer lines with circular endpoints. The code uses d3.pie and d3.arc to compute arc geometry and render SVG paths, while label positions are calculated from each slice’s mid-angle. d3.scaleOrdinal with d3.interpolateHslLong assigns colors, and text elements are positioned using bounding-box measurements to place pointers correctly. The dataset is a static array of five numbers (apples), rendered entirely with SVG in d3 v6.

PPiotr Paszek
77% match