Circles and lines

100%

Circles and lines

✓ Published0🌍 Public

Last edited Jan 26, 2021

Created on Jan 26, 2021

Two categorical legends, each repeating the same orange, green, yellow, and red color scale, display colored circles beside black lines. A separate size legend shows circles whose radii correspond to numeric tick values. The example demonstrates reusable legend components built with d3.scaleOrdinal, d3.scaleSqrt, and custom SVG rendering in d3.v5.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colored circles, while the size legend shows five circular markers scaled by magnitude using `d3.scaleSqrt`. Both components render as SVG groups with nested circles and text labels, utilizing D3 v5 data joins. The legends are positioned manually within an SVG canvas, with text offset from circle centers for readability.

JJuyeonee

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

84% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components built with D3 v5: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative data. The color legend renders colored circles with domain labels, while the size legend displays circles scaled proportionally to tick values with corresponding text offsets. Both legends are implemented as modular functions that append SVG groups and circles, using D3’s selection and merge pattern to handle updates efficiently.

AAegon95

84% match

Loading thumbnail…

Color and Size Legends

Two custom reusable legend components in D3 v5 display categorical color scales with colored circles and quantitative size scales with scaled circles. The color legend uses `scaleOrdinal` with fixed domain values like apple and lemon, while the size legend applies `scaleSqrt` with generated ticks. Both render as SVG groups with positioned circles and text labels, demonstrating generic legend creation patterns independent of any particular chart.

IIsabel

84% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two legend styles rendered side by side in SVG. A color legend uses a d3.scaleOrdinal to map categorical fruit names to distinct hues, with circles and offset labels. A size legend employs d3.scaleSqrt to map a continuous numeric domain to circle radii, generating ticks via sizeScale.ticks. Both legends are built with reusable functions that bind data to SVG groups, circles, and text elements, with styling applied through CSS classes.

Ccaydener

84% match

Loading thumbnail…

Legends

This example demonstrates two distinct legend styles: a color legend using an ordinal scale for categorical data and a size legend using a square-root scale for quantitative data. The color legend maps fruit names to distinct colors via `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to translate numeric ticks into varying circle radii. Both legends are rendered as SVG groups using D3's selection and merging API, with circles and text positioned via the `attr('transform', ...)` method. The page integrates custom gradients defined in the SVG defs, though they are not actively applied to the legend marks.

SSharvariPhadke

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

VVineel Gannu

84% match