Color and Size Legend

100%

Color and Size Legend

✓ Published0🌍 Public

Last edited May 8, 2020

Created on May 8, 2020

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.

AI-generated description

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

95% match

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

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

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct types of legends for data visualization: a color legend and a size legend. The color legend maps categorical fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with proportional circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned using `attr('transform', ...)`. The code employs D3 v5's selection and merge methods to efficiently update the legends, and the circles are styled with a black stroke for visual clarity.

MMihir Sawant

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

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

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

94% match