Size Legend

100%

✓ Published0🌍 Public

Last edited Jul 30, 2020

Created on Jul 30, 2020

A legend displays a square-root size scale mapping values from 0 to 10 to circle radii. Five tick marks, filtered to exclude zero and reversed, render as grey circles with opacity proportional to their value. Using d3.scaleSqrt and selection joins, the legend positions each tick vertically and labels it with green text. SVG rendering with D3 v5 shows the encoded relationship between circle area and numeric data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends: a color legend for ordinal categories (apple, lemon, lime, orange) and a size legend for a square-root scale mapping values 0–10 to circle radii. Both legends use SVG groups with tick marks, rendered via D3 v6’s `scaleOrdinal` and `scaleSqrt`, and are constructed through reusable functions that append circles and labels with dynamic positioning. The color legend assigns categorical colors, while the size legend computes tick values using `sizeScale.ticks`, filters out zero, and reverses the order. Styling is applied through CSS classes for text and circle strokes.

HHe Jianfeng

85% match

Loading thumbnail…

Color & Size Legends

This example demonstrates two types of chart legends: a color legend mapping ordinal data (apple, orange, lemon) to a d3.scaleOrdinal color scale, and a size legend using d3.scaleSqrt to map a numeric range from 0 to 10 to circle radii. Both legends are rendered as SVG groups, with each tick containing a circle and label. The code utilizes d3.selection, d3.transition, and the .merge() API to animate legend updates over 1000ms, shrinking exiting circles and repositioning entries when the underlying scales change. The size legend positions its ticks horizontally, offsetting each by its radius to avoid overlap.

AAmar Nath Yogi

85% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend designs for SVG visualizations: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to represent numeric values through circle radii. The color legend renders four labeled circles with custom spacing, while the size legend generates five ticks with varying circle sizes and text offsets. Both legends are built using D3 v5 data joins, scaleOrdinal, scaleSqrt, and explicit enter/merge/exit patterns, with styling applied through CSS classes on tick groups.

0007ebey

85% match

Loading thumbnail…

Color and Size Legend

This example demonstrates two reusable D3 legend components: an ordinal color legend and a square-root size legend, rendered side-by-side in an SVG. The color legend maps five categorical domain values to a spectral color palette, with labeled circles spaced vertically, while the size legend encodes numeric ticks with scaled circle radii and translucent fills. Both use D3 v5 data joins (`selection.enter`, `.merge`) and scales (`scaleOrdinal`, `scaleSqrt`), and are invoked via the `.call()` method with custom props for radius, spacing, and text offset.

KKainsli

84% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types: a color legend with ordinal categories for fruits and a size legend with a square-root scale mapping numeric values to circle radii. Using D3 v5, it renders SVG circles and text labels, with the color legend employing `scaleOrdinal` and the size legend using `scaleSqrt` with tick generation. The size legend positions circles based on cumulative radius sums with spacing, while both legends use reusable functions (`colorLegend` and `sizeLegend`) called via D3’s selection `.call()` pattern.

GGuillaume Calmettes

84% 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

83% match

Loading thumbnail…

Color and Size Legend

Two reusable D3 legend components render side by side in an SVG: a color legend for a categorical scale (scaleOrdinal with apple, lemon, orange, kiwi) and a size legend for a square-root scale (scaleSqrt for 0–10). Each legend positions circles and text with data-driven transforms, and the size legend filters out zero ticks and uses D3’s `ticks()` to generate intervals. The React-wrapped code updates selections via enter/merge/exit patterns, with styling from external CSS.

Ddacoylo

83% match

Loading thumbnail…

Colour and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend displaying an ordinal scale with fruit names and assigned colors, and a size legend using a square-root scale to map numeric values to circle radii. The code uses D3 v5 APIs including `scaleOrdinal`, `scaleSqrt`, and `selection.call` to bind the legend functions. Each legend updates through data joins, with circles and text elements positioned using transform attributes and spacing constants.

Jjrodg

83% match