Skip to main content
SimilarExport ZIP
100%

Color and size legends

✓ Published1🌍 Public
JJason-Manbodh
Last edited Jun 4, 2020
Created on Jun 4, 2020

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components for mapping data values to visual encodings: a color legend for ordinal categories and a size legend for quantitative values. The color legend displays colored circles for fruits, while the size legend uses scaled circle radii to represent numeric values. Built with D3 v5, the code defines reusable functions `colorLegend` and `sizeLegend` that use `scaleOrdinal`, `scaleSqrt`, and selection joins to render SVG elements dynamically.

JJason-Manbodh
100% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components: a color legend for ordinal data and a size legend for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend maps numeric values to circle radii. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with reusable functions `colorLegend` and `sizeLegend` that bind data to SVG groups. Circles and text labels are positioned via transforms, with tick values generated by `sizeScale.ticks(numTicks)`. The SVG rendering includes configurable spacing, text offsets, and fill styles.

SSophia Murage
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 types of legend encodings for data visualization: a color legend mapping ordinal categories to hues, and a size legend scaling circles according to a square-root scale. The color legend displays fruit names with distinct colors, while the size legend shows numeric ticks with proportional circle radii. Built with D3 v5, the visualization uses `selectAll` and `.enter().append()` to construct SVG groups, circles, and text elements. Custom `colorLegend` and `sizeLegend` functions control the layout, with positioning handled via `attr('transform', ...)` and scales defined by `scaleOrdinal` and `scaleSqrt`.

VVaggelisKlt
95% 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
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

This example demonstrates two legends for mapping data to visual encodings. A color legend uses a d3.scaleOrdinal scale to map categorical fruit names to distinct colors, while a size legend uses a d3.scaleSqrt scale to map a numeric range to circle radii. The legends are custom reusable components, created with d3.selection and appended to an SVG canvas, with each tick rendered as a group containing a circle and a text label.

Aarths-glitch
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