Skip to main content
SimilarExport ZIP
100%

legend

✓ Published0🌍 Public
MMTClass
Last edited Mar 6, 2017
Created on Mar 6, 2017

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.

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/f76ab293be25bea76f562cd0546d0650'>fresh block</a>

mit Licensed

Similar vizzes

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

Legend

This example demonstrates a reusable categorical color legend with colored circles and matching text labels for fruit categories. Using D3 v5, the `colorLegend` function creates a group per domain value, binds circles and text, and positions them with a vertical spacing transform. A `scaleOrdinal` maps the domain to a color range, with the legend called via `selection.call()`. The SVG rendering applies styled ticks and circle strokes from an external stylesheet.

Rrigt
84% match
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
83% match
Loading thumbnail…

Color legend

A custom color legend displays four ordinal categories—apple, lemon, lime, and orange—as colored circles or squares, rendered with D3 v7's `scaleOrdinal` for domain and range mapping. The legend component supports configurable shapes, spacing, and offsets, using SVG `g`, `rect`, `circle`, and `text` elements. The example demonstrates a reusable legend pattern with enter/merge/exit updates, invoked via `.call(colorLegend.render, {square: false})` to show circular swatches with labels.

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

Color and Size Legends

This example demonstrates how to build a color legend using D3 v5, displaying categories apple, lemon, limes, and orange with distinct colors and circular markers. The visualization uses a custom `colorLegend` function that binds ordinal scale domain values to groups, appending circles and text labels with specified spacing and offsets. The code imports `select` and `scaleOrdinal` from D3, applies the legend to an SVG canvas, and sets explicit styling for text, circles, and background in CSS.

Jjay
82% 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
82% match