Skip to main content
SimilarExport ZIP
100%

color and size legends

✓ Published0🌍 Public
Ssheafallick
Last edited Dec 16, 2022
Created on Dec 16, 2022

Two D3 legend components display color and size scales side-by-side in a single SVG. The color legend uses `scaleOrdinal` with named fruit categories and a `colorLegend` function, while the size legend uses `scaleSqrt` and a `sizeLegend` function. Both legends generate groups with circles and text labels, positioned via `spacing` and `textOffset`. The size scale filters out zero values and uses `ticks` to determine displayed values.

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

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for quantitative scales. The color legend maps fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric ticks as proportional circle radii. Both legends are rendered as SVG groups with circles and text, using `.call()` to apply the component functions. The size legend filters out zero values and reverses tick order to display larger circles first.

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

Color and Size Legends

Two legends created with D3 v5 are rendered as SVG. The color legend uses a categorical ordinal scale to map fruit categories to colored circles. The size legend uses a square-root scale to map data ticks to circle radii, with a reversed tick order to display larger values first. Both legends are built dynamically using D3's selection and merge APIs within `colorLegend` and `sizeLegend` functions.

MMajaha21
93% match
Loading thumbnail…

Color and Size Legends

Two customizable legends demonstrate how D3 v5 encodes data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to represent numerical values through circle radii. Both legends are constructed through reusable functions that bind data to SVG groups, with legends rendered as circles and text labels. The color legend applies `attr("fill", colorScale)`, while the size legend filters zero values from its ticks and spaces circles vertically.

Jjay
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