Skip to main content
SimilarExport ZIP
100%

Color and Size Legends.js

✓ Published0🌍 Public
Xxsg13
Last edited Dec 31, 2020
Created on Dec 31, 2020

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

Two reusable D3 v5 legend components render categorical and quantitative scales side by side in SVG. A color legend uses `scaleOrdinal` to map fruit names to colored circles, while a size legend uses `scaleSqrt` with `ticks` to display varying radii for a numeric domain. Both components handle enter, update, and exit selections via `selection.data`, `merge`, and exit removal, positioning circles and labels with spacing and text offsets.

ZZ-Richard
95% match
Loading thumbnail…

Color and Size Legends.js

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.

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

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in an SVG: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend built from a square-root scale with circular marks sized proportionally to tick values. Both legends use D3 v5’s selection joins to update enter and exit states. The color legend calls `scaleOrdinal`. The size legend uses `scaleSqrt.ticks()` for tick generation.

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

Color and Size Legends

This example demonstrates two custom legend components rendered as SVG: a color legend using a d3 ordinal scale mapping fruit names to colors, and a size legend using a d3 square-root scale mapping numeric values to circle radii. The color legend places equally sized circles with labels, while the size legend shows varying circle sizes with tick values generated by `sizeScale.ticks()`. Both rely on D3’s data join pattern (`selectAll().data().enter()`) with explicit `spacing` and `textOffset` props for layout, and are called via the `selection.call()` method.

Iianleekq
94% match