Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
PPabloReyesBetanzo
Last edited Nov 11, 2018
Created on Nov 9, 2018

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

ZZhang Shengli
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for a D3.js SVG visualization. The first legend uses a categorical color scale (`scaleOrdinal`) to map fruit names to specific colors, with circles and text labels generated by a custom `colorLegend` function. The second legend uses a square-root size scale (`scaleSqrt`) to map numeric values from 0 to 10 to varying circle radii, with ticks and labels created by a `sizeLegend` function. Both legends are built by appending groups and elements to the SVG, using D3's selection and merge methods to handle updates.

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

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

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

Color and Size Legends

This example demonstrates how D3 legends can encode data through color and size. Two separate legends are rendered with SVG: a color legend uses an ordinal scale to map fruit categories to distinct hues, while a size legend uses a square-root scale to represent numeric values with scaled circle radii. The code builds reusable legend components using D3’s data join pattern, applying scales like `scaleOrdinal` and `scaleSqrt`, with manual spacing and text offsets for tick labels.

Ddaigokawabe
95% match