Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
Ccaydener
Last edited Sep 19, 2019
Created on Sep 19, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types rendered side by side in SVG. A color legend uses `d3.scaleOrdinal` to map fruit categories—apple, lemon, lime, and orange—to distinct hues, with each entry displayed as a filled circle and label. A size legend uses `d3.scaleSqrt` to encode a numeric domain from 0 to 10 through varying circle radii, generating tick values via `sizeScale.ticks`. Both legends are constructed with reusable D3 functions that bind data to groups, updating circle and text elements on enter and merge.

WWarren-Fitzhenry
97% match
Loading thumbnail…

Color and size legends

This example demonstrates two types of chart legends rendered side-by-side in SVG. A color legend uses a d3.scaleOrdinal to map fruit names to distinct colors, with circles and text labels offset vertically. A size legend uses d3.scaleSqrt to map a numeric domain to circle radii, filtering out zero, reversing the tick order, and positioning text labels using the scaled radius plus an offset. Both legends are implemented as reusable functions that manage enter/update/exit selections with D3 v5’s data join.

MMaciek Sitkowski
96% 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
96% 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
96% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend patterns for encoding data. A color legend uses a d3.scaleOrdinal to map categorical fruit names to colored circles, while a size legend employs d3.scaleSqrt to represent numeric values through circle radius, with tick marks generated via sizeScale.ticks. Both legends are built with D3 v5 data joins, appending SVG groups, circles, and text elements with configurable spacing and offsets, rendering in a standalone SVG canvas.

Jjay
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend types rendered as SVG: a color legend mapping ordinal fruit categories to distinct hues, and a size legend using a square-root scale to encode numeric values through circle radii. The color legend uses `d3.scaleOrdinal` with domains for apple, lemon, lime, and orange, while the size legend employs `d3.scaleSqrt` with tick marks generated from the scale. Both legends are built procedurally using custom functions (`colorLegend` and `sizeLegend`) that append grouped circles and text elements, with spacing and offset parameters controlling layout. The visualization is constructed with D3 v5 and rendered entirely in SVG, with styling applied via CSS classes.

TThomas Seberechts
95% match
Loading thumbnail…

Color and Size Legend

This example demonstrates two legend types for visualizing data: a color legend and a size legend created side by side in an SVG. The color legend maps categorical fruit names (apple, lemon, lime, orange) to distinct colors using a d3.scaleOrdinal, while the size legend uses a range of numeric values to create circles of varying radii. Both legends are rendered through d3 data joins, where each group contains a circle and a text label positioned with transform attributes and spacing constants. The visualization uses d3.v5 and employs the colorLegend and sizeLegend custom functions to generate the reusable legend components.

Ssploitfun
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG in D3 v5. The color legend uses `d3.scaleOrdinal` to map categorical fruit names to a custom color range, displaying each swatch with a fixed circle radius and text offset. The size legend uses `d3.scaleSqrt` to map numeric values from 0 to 10 to proportional circle radii, with tick marks generated via `sizeScale.ticks()`. Both legends are positioned within a single SVG and styled through shared CSS classes, highlighting how D3’s data joins and merge patterns update legend elements dynamically.

ZZhang Shengli
95% match