Skip to main content
SimilarExport ZIP
100%

Legend!

✓ Published0🌍 Public
Jjrodgh
Last edited Jul 20, 2020
Created on Jul 13, 2020

A custom legend displays a quantile color scale mapping six population values from 0.1 to 300 million to a sequential blue palette. The `d3.scaleQuantile` and `d3.formatPrefix` APIs generate rounded tick labels beneath rounded rectangular swatches. Each legend group is positioned via SVG transforms appended through D3’s data join pattern, with the entire visualization rendered as an SVG in a 960×500 viewport.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Legends

This example demonstrates two distinct legend styles: a color legend using an ordinal scale for categorical data and a size legend using a square-root scale for quantitative data. The color legend maps fruit names to distinct colors via `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to translate numeric ticks into varying circle radii. Both legends are rendered as SVG groups using D3's selection and merging API, with circles and text positioned via the `attr('transform', ...)` method. The page integrates custom gradients defined in the SVG defs, though they are not actively applied to the legend marks.

SSharvariPhadke
80% match
Loading thumbnail…

Legend

This example shows a simple categorical color legend using two circular swatches labeled "OW2DWL" and "OW2DSWL," rendered as SVG within a 960-by-500 pixel canvas. The legend is built with the D3 v5 library, using `scaleOrdinal` to map the two domain categories to orange and blue fills. A reusable `colorLegend` function appends groups, circles, and text elements, positioning them vertically with a spacing offset and applying a text offset for labels. The visualization demonstrates a straightforward, declarative approach to creating a static legend with a minimal data set.

SShane Carey
80% 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
80% match
Loading thumbnail…

color and size lengend

This example demonstrates two legends: a categorical color legend for fruits like apples and lemons, and a quantitative size legend for population data. The color legend uses `d3.scaleOrdinal` to assign fixed colors, while the size legend uses `d3.scaleSqrt` to map numeric ticks to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned via translation. The code uses `selection.selectAll` and `.merge` for incremental updates, and the size legend filters out the zero tick. The data source is a CSV listing country populations, though only the legend scales are visualized here.

HHillKinsh
79% match
Loading thumbnail…

Legend and colors

This example demonstrates how to build reusable legends for mapping data values to visual encodings. A color legend uses an ordinal scale with fruit names and distinct hues, while a size legend applies a square-root scale to represent numeric ticks with circles of varying radii. The code defines `d3.scaleOrdinal()` and `d3.scaleSqrt()` with SVG rendering, and updates legends through enter/merge/exit selections. Both legends are generated as reusable functions called via `.call()`, with circles and text positioned using `spacing` and `textOffset` parameters.

Ppaularl
78% match
Loading thumbnail…

Legend experimenting

This example demonstrates how to build reusable color and size legends for D3 visualizations. It shows a color legend using d3.scaleOrdinal with fruit categories mapped to distinct colors, alongside a size legend using d3.scaleSqrt. The legends are rendered as SVG groups, with the color legend drawing rectangles and the size legend drawing circles. The code uses D3 v5’s selection.join pattern, custom legend components exported from separate modules, and explicit spacing and offset parameters to control layout within an SVG canvas.

MMaciek Sitkowski
78% match
Loading thumbnail…

Color and Size Legend

This example demonstrates two custom legend components built with D3 v5: a categorical color legend for fruit categories and a quantitative size legend for a numeric scale. The color legend maps ordinal domain values to a range of colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to translate tick values into circle radii. Both legends render as SVG groups with circles and text labels, with spacing and offsets applied via `attr("transform")` and positioned within an `svg` element.

KKazushige Okuma
78% match
Loading thumbnail…

Color Legends

A color legend maps ordinal categories to hues, displaying two large circular swatches for "apple" and "lemon" against a white background. The `d3.scaleOrdinal` assigns red and yellow, while a custom `colorLegend` function binds the scale's domain to SVG groups. Circles and text labels are appended and updated via enter/merge/exit selections, with transform positions calculated from array index and a fixed height. The example demonstrates reusable D3 v5 code for building legends with dynamic scaling.

AAli Ahmed
78% match