Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
TToooooooT
Last edited Sep 18, 2022
Created on Sep 18, 2022

Two legend components built with D3.js v7 appear in a single SVG scene. The color legend uses `d3.scaleOrdinal` to map fruit names—apple, lemon, lime, orange—to distinct hues, with each tick rendered as a circle and label. The size legend employs `d3.scaleSqrt` to map numeric values from 0 to 10 into circle radii, showing five ticks. Both legends are constructed via reusable JavaScript modules that append `g` elements and merge enter/exit selections, with CSS styling the tick text and circle strokes.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

The example demonstrates two reusable legend components rendered as SVG: a color legend mapping fruit names to ordinal colors, and a size legend using a square-root scale with circular marks. Both legends are built with D3 v5, using `scaleOrdinal`, `scaleSqrt`, data joins with `selection.enter()`, and merge operations to update tick groups. The color legend draws lines labeled with fruit names, while the size legend displays circles sized by the scale with tick text offset by radius. Styling is applied via CSS classes for tick text and circle strokes.

Sshawnsrk
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend uses a square-root scale to map numeric values to circle radii. Both legends are built with D3 v5, using `scaleOrdinal` and `scaleSqrt`, with custom functions that handle enter/merge/exit selections. The code imports `select` from D3 and renders the legends via the `call` method.

MMichał Szumnarski
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components built with D3 v5 and rendered as SVG. A color legend uses `scaleOrdinal` to map fruit categories to distinct circle fills, while a size legend employs `scaleSqrt` with `ticks()` to encode numeric values as varying circle radii. Both legends bind data to grouped `<g>` elements, applying enter/merge/exit selections for dynamic updates. The code defines reusable functions `colorLegend` and `sizeLegend`, called via `.call()`, with text labels positioned using `textOffset`.

AAndreas Loew
93% match
Loading thumbnail…

Color and Size Legends.js

Two reusable legend components render D3 scales as SVG groups. A color legend maps ordinal fruit categories to circle fills using `scaleOrdinal`, while a size legend uses `scaleSqrt` with `ticks()` to generate circle radii. Both employ the enter-merge-exit pattern and rely on `selection.call()` to attach legends to the SVG. Text labels and circles are styled via CSS.

Xxsg13
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for visualizing color and size encodings in D3 v5. The color legend displays a categorical scale with fruit names (apple, lemon, lime, orange) using distinct colors, while the size legend uses a square-root scale to represent numeric values from 0 to 10 with proportional circle radii. Both legends are rendered as SVG groups with tick marks, using D3’s selection joins and scales (`scaleOrdinal`, `scaleSqrt`). Circles and text labels are positioned dynamically based on spacing and scale values, with styles defined in external CSS.

Jjesramyep1263
93% match
Loading thumbnail…

Color and size legends

Two adjacent legends illustrate how to construct reusable D3 legend components. A color legend uses `d3.scaleOrdinal` with fruit types mapped to red, yellow, orange, and green, rendering circles with corresponding fills and text labels. A size legend uses `d3.scaleSqrt` to map values 0–10 to circle radii, with ticks generated via `sizeScale.ticks` and positioned by cumulative spacing. Both legends are appended as SVG groups, with enter/merge/exit selections managing dynamic updates.

Aarieltonglet
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types rendered side by side in SVG. A color legend uses `d3.scaleOrdinal` to map fruit categories—apple, lemon, lime, and orange—to distinct hues, with each entry displayed as a filled circle and label. A size legend uses `d3.scaleSqrt` to encode a numeric domain from 0 to 10 through varying circle radii, generating tick values via `sizeScale.ticks`. Both legends are constructed with reusable D3 functions that bind data to groups, updating circle and text elements on enter and merge.

WWarren-Fitzhenry
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend using an ordinal scale mapping fruit categories to distinct colors, and a size legend using a square-root scale to encode numeric values through circle area. The color legend displays evenly spaced colored circles with labels, while the size legend computes ticks via `sizeScale.ticks()`, filters out zero, and reverses their order. Both components are built with D3 v5, using `selection.merge()`, `enter()`, and `exit()` patterns to handle dynamic updates, and accept configuration props such as spacing, text offset, and circle styling.

JJames Malvern
93% match