Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
VVineel Gannu
Last edited Jul 23, 2020
Created on Jul 22, 2020

This example demonstrates two reusable legend components rendered as SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps categorical values like "apple" and "lemon" to distinct colors, while the size legend uses d3.scaleSqrt to encode numeric ticks as proportional circle radii. Both legends are built with D3 v5 data joins, using selection.enter and merge to update groups, circles, and text. The code exports modular functions from colorLegend.js and sizeLegend.js, with styling applied via CSS classes like .tick.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends use D3 v5’s data join pattern, with Enter and merge selections to update ticks. The size legend calculates tick values via `scale.ticks` and filters out zero.

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

Color and Size Legends

This example demonstrates two reusable legend components rendered side by side in SVG. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct fill colors, with labeled circles spaced vertically. The size legend uses `scaleSqrt` to encode numeric values in circle radius, showing five ticks from 0 to 10 with semi-transparent black fills. Both legends are built with D3 v5’s `selection.call()`, `scaleOrdinal`, and `scaleSqrt`, positioning groups via translate transforms and entering/exiting DOM nodes dynamically. The code exports `colorLegend` and `sizeLegend` as functions for modular reuse.

ZZhang Shengli
96% 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 for D3 visualizations: a color legend mapping ordinal categories (apple, lemon, lime, orange) to distinct hues, and a size legend using a square-root scale to represent numeric values. The color legend renders colored circles with labels, while the size legend positions circles of varying radii with tick marks. Both use SVG groups and the `selection.merge` pattern for enter-update-exit handling, with styling applied via the `.tick` class.

Eexcalibur1987
95% match
Loading thumbnail…

Color and size legends

This example demonstrates two custom SVG legends: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct hues using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to translate numeric values into circle radii. Both legends are rendered as SVG groups with circles and text labels, positioned via transform attributes. The reusable functions colorLegend and sizeLegend accept configuration props like spacing and textOffset, and the size legend uses d3.scaleSqrt.ticks to generate labeled values.

AAjit Singh
95% match
Loading thumbnail…

Colour and Size Legends

This example demonstrates two reusable legend components for D3 v5 visualizations: an ordinal color legend and a quantitative size legend. The color legend maps fruit categories to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to transform numeric values into circle radii. Both components render as SVG groups with tick marks and labels, using data joins and enter/merge/exit patterns for dynamic updates. The size legend generates ticks via the scale’s `ticks` method, filtering out zero, and positions circle centers according to the scaled radius.

JJordan Chiu
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