Skip to main content
SimilarExport ZIP
100%

Color and Size Legends.js

✓ Published0🌍 Public
NNeepaB
Last edited Dec 28, 2020
Created on Dec 25, 2020

Two reusable D3 legend components demonstrate how to encode data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend uses `scaleSqrt` with tick marks to represent numeric values. Both render as SVG groups with circles and text labels, updating through D3's data join pattern. The examples show how legends can be built using `selection.call` with custom functions and `merge` for enter/update transitions.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

Two reusable legend components demonstrate color and size encoding in D3 v5. The color legend uses `scaleOrdinal` to map fruit categories to distinct colors with fixed-radius circles, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends render as SVG groups with tick marks, using D3’s data join pattern and `.call()` to apply each component. The size legend filters out zero values and reverses tick order, with text offset dynamically calculated from each circle’s radius.

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

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

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

Color and Size Legends

The example demonstrates two reusable legend components rendered in SVG: a color legend built with `d3.scaleOrdinal` mapping fruit names to categorical colors, and a size legend using `d3.scaleSqrt` for continuous numeric values with circular markers. Both legends are generated through custom functions that bind data to groups, with the color legend encoding categories via circle fill and the size legend varying circle radius. The code relies on D3 v5 selections, `.enter()`, and `.merge()` patterns to update the legends dynamically.

Zzhangfa
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom D3.js legend components rendered as SVG. A color legend uses `scaleOrdinal` with categorical domains to map fruit names to distinct colors, while a size legend uses `scaleSqrt` to map a numeric range to circle radii. Both legends are built by dynamically appending `g` groups with circle and text elements, using D3's enter/merge/exit pattern for updates. The code relies on D3 v5 selection methods and scale APIs to generate the visual encodings.

PPabloReyesBetanzo
95% match
Loading thumbnail…

Color and Size Legends

Two reusable D3 legends demonstrate how to encode data through color and size. A color legend maps ordinal fruit names to distinct hues using `scaleOrdinal`, while a size legend translates a quantitative scale from 0 to 10 into circle radii via `scaleSqrt`. Both legends render as SVG groups with labeled ticks, using `selection.merge` to update existing elements efficiently. The examples show legend construction with configurable spacing, text offsets, and tick counts for flexible chart annotations.

HHasideluxe
95% 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
94% match