Fork of Color and Size Legends

Fork of Color and Size Legends

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 displays circles for apple, lemon, lime, and orange, while the size legend uses a square-root scale with five ticks. Both use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with `selection.merge` to update entries efficiently. The components are defined as JavaScript modules and called via `.call()`, with styling applied through CSS classes.

Vvivianaaai@qq.com

Fork of Color and Size Legends

This example demonstrates reusable legend components for both ordinal color scales and quantitative size scales. The color legend renders colored circles with labels for fruit categories, while the size legend displays circles scaled by magnitude using a square-root scale. Both legends are implemented as custom D3 functions that bind data to SVG groups, using `selection.enter()` and `selection.merge()` for updates. The code utilizes `d3.scaleOrdinal`, `d3.scaleSqrt`, and `scale.ticks()` to generate tick values for the size legend.

MMajaha21

Fork of Color and Size Legends2

This example demonstrates two reusable legend components for D3 v5: a color legend using an ordinal scale mapping fruit names to colors, and a size legend using a square-root scale with five ticks. Both render as SVG groups with circles and text labels, positioned via transforms. The colorLegend component encodes categorical data with colored circles, while the sizeLegend uses scaled circle radii and offsets text based on each value’s radius. The code imports `scaleOrdinal` and `scaleSqrt` from D3, and uses selection joins to update or remove legend items dynamically.

Jjlspangl

Fork of Color and Size Legends

This example demonstrates reusable legend components for both ordinal color scales and quantitative size scales, rendered as SVG. The color legend uses `d3.scaleOrdinal` to map fruit categories to colors, while the size legend uses `d3.scaleSqrt` to map numeric tick values to circle radii. Both legends are drawn using custom selection-based functions that append SVG groups, circles, and text elements with d3’s selection API. The code runs in d3 v5 and renders within a single SVG element.

Ssrinathsethumadhavan

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

Fork of Color and Size Legends - Component Experiment

This example shows two legends rendered side-by-side in an SVG: one for ordinal color scales and one for square-root size scales. The color legend maps fruit categories to distinct fills, while the size legend displays circular marks scaled by numeric tick values. Both legends are built as reusable component functions that receive parameters via `Object.assign` properties, following the “Towards Reusable Charts” pattern. The code uses d3.v5 APIs including `scaleOrdinal`, `scaleSqrt`, and selection methods like `.call()`, `.enter()`, and `.merge()` to bind data and update the visualization.

AAnthony Zornig

Fork of Color and Size Legends

This example demonstrates two reusable legend components rendered side-by-side: a color legend for ordinal data (apple, lemon, lime, orange, kivi) and a size legend for a square-root scale ranging from 0 to 10. The color legend displays colored circles with labels, while the size legend uses semi-transparent black circles of varying radii. Both are built with D3 v5’s `scaleOrdinal`, `scaleSqrt`, and `selection.call()`, generating SVG groups with circle and text elements styled via CSS classes.

RRolftest

Fork of Color and Size Legends

This example demonstrates two common legend types: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to map numeric values to circle radii. The SVG renderings use d3’s selection API (`selection.selectAll`, `selection.enter`) and custom legend modules (`colorLegend`, `sizeLegend`) that generate tick groups with shapes and labels. The color legend uses `scaleOrdinal` with explicit color ranges, while the size legend calls `scaleSqrt.ticks()` to compute interval breaks, with circles stylized via CSS.

RRunxin Shao