Color and size legends

100%

Color and size legends

✓ Published0🌍 Public

Last edited Jan 10, 2021

Created on Jan 7, 2021

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.

AI-generated description

An example including some commonly used features of SVG.

MIT Licensed

Similar vizzes

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

96% match

Loading thumbnail…

Color and size legends

This example demonstrates two custom legend components: a color legend for ordinal data and a size legend for quantitative data. The color legend displays four fruit categories with distinct colors, while the size legend maps numeric values to circle radii. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with reusable functions `colorLegend` and `sizeLegend` that bind data to SVG groups. Circles and text labels are positioned via transforms, with tick values generated by `sizeScale.ticks(numTicks)`. The SVG rendering includes configurable spacing, text offsets, and fill styles.

SSophia Murage

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct types of legends for D3 visualizations: a color legend using an ordinal scale and a size legend using a square-root scale. The color legend maps categorical fruit names to specific colors, while the size legend displays numeric ticks with proportionally scaled circles. Built with d3.scaleOrdinal and d3.scaleSqrt, the code renders SVG groups containing circles and text elements. The reusable legend functions (colorLegend and sizeLegend) accept configuration props for spacing, radius, and text offset, showing how to build modular, customizable legend components.

JJorge Amado Soria Ramirez

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

95% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable D3.js legend components: a color legend for ordinal scales and a size legend for quantitative scales. The color legend displays four fruit categories with distinct colors, while the size legend uses a square-root scale with four reversed ticks. Both legends are implemented as custom D3.js functions that accept an SVG group and configuration props, using d3.scaleOrdinal and d3.scaleSqrt. The SVG rendering includes labeled circles with custom spacing and text offsets, styled via CSS with sans-serif fonts and black stroke outlines.

LLeora Wenger

95% match

Loading thumbnail…

colour and size legends

This example demonstrates two separate SVG legends: a color legend using an ordinal scale mapping fruit names to distinct colors, and a size legend using a square-root scale with circular marks whose radii encode numeric values. The color legend renders colored circles for each category, while the size legend displays five ticks with proportional circle sizes and labels offset by the scaled radius. Both legends use reusable functions (`colorLegend` and `sizeLegend`) built with D3 v5, leveraging `selectAll`, `enter`, `merge`, and `exit` for data joins, with SVG elements styled via CSS.

KKurt J Nilsen

95% match

Loading thumbnail…

Color and Size Legends

This example shows two custom legends for visualizing categorical and quantitative data: a color legend mapping fruit names to distinct colors, and a size legend mapping numeric values to circle radii using d3.scaleOrdinal and d3.scaleSqrt. The legends are rendered as SVG groups with circles and text labels, positioned via transform attributes. The code uses d3-selection’s enter/merge/exit pattern to bind data and update elements, with custom functions colorLegend and sizeLegend defining the layout and spacing.

Jjlongwellchc

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

95% match