Color and Size Legends

100%

Color and Size Legends

✓ Published0🌍 Public

Last edited Aug 22, 2019

Created on Aug 22, 2019

This example demonstrates two legend types for scatterplot-style data: a color legend mapping categorical values to distinct hues, and a size legend using a square-root scale to encode continuous numeric magnitudes. Both legends render as SVG groups containing circles and text labels, with the color legend using `d3.scaleOrdinal` and the size legend using `d3.scaleSqrt` with tick generation from `sizeScale.ticks`. The legends are positioned manually via SVG transforms and styled with CSS classes for the tick marks.

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

94% match

Loading thumbnail…

Color and Size Legends

This example illustrates two distinct legend types for scatterplots using D3 v5 and SVG rendering. It combines a categorical color legend with an ordinal scale, showing fruit names mapped to distinct hues, and a quantitative size legend using a square-root scale for proportional circles. The size legend generates ticks from the scale and positions text offset by each circle’s radius. Both legends are built with reusable functions that append and update `g` elements, demonstrating a consistent pattern for interactive legend components.

Ssemiramiss2020

94% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend types for different data encodings: a color legend with categorical swatches for fruits and a size legend with scaled circles for numeric values. Built with D3 v5, it renders SVG elements using reusable functions `colorLegend` and `sizeLegend`. The color legend uses `scaleOrdinal` with discrete colors, while the size legend employs `scaleSqrt` and generates ticks via `sizeScale.ticks()`. Both legends position circles and text labels with explicit spacing and offset values.

CCassie

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

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two types of legends for scatterplot-like data. A color legend uses an ordinal scale to map fruit names to distinct colors, displayed with evenly spaced circles and labels. A size legend uses a square-root scale to map numeric values to circle radii, showing larger circles at the top with tick marks. Both legends are built with D3 v6 selections, using `.enter().append()`, `.merge()`, and `.exit()` to manage groups, with SVG circles and text rendered in an HTML page.

EEllednera

93% match

Loading thumbnail…

Color and size legends

This example demonstrates two separate legends: a color legend for categorical data (plum, lemon, limes, oranges) and a size legend for quantitative data on a square-root scale. The color legend maps ordinal domains to fixed palette values, while the size legend generates five tick values using `scaleSqrt` and filters out zero. Both legends are built with reusable D3 v5 functions that append SVG groups containing circles and text, with spacing and text offsets passed as props. The rendering uses `selection.enter` and `selection.merge` to manage dynamic updates.

Bbencestubnya

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations. The color legend maps a categorical color scale to labeled circles, while the size legend uses a square-root scale to vary circle radii across numeric ticks. Both legends are implemented as custom D3 functions (`colorLegend` and `sizeLegend`) that append SVG groups with circles and text. The code uses `d3.scaleOrdinal` and `d3.scaleSqrt` to define the scales, and the rendering is done with SVG elements on a 960×500 canvas.

Hhenry1987

93% match

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for scatterplot-style visualizations: a color legend for ordinal categories and a size legend for quantitative values. The color legend maps fruit names to distinct hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` to encode numeric ticks as proportional circle radii. Both legends are rendered as SVG groups via data joins, with circles and text labels. The code uses `d3-selection` methods like `selectAll`, `enter`, and `merge` to manage updates, and `d3.ticks` to generate tick values.

NNaveenaS12

93% match