Skip to main content
SimilarExport ZIP
100%

Color and Size legend

✓ Published4🌍 Public
Ppplomith
Last edited Mar 20, 2021
Created on Mar 17, 2021

This example demonstrates two reusable legend components for scatterplots: a color legend using an ordinal scale and a size legend using a square-root scale. The color legend maps fruit names to red, yellow, green, and orange circles, while the size legend displays five circular ticks sized proportionally to values from 0 to 10. Both are built with D3 v5, using `d3.scaleOrdinal`, `d3.scaleSqrt`, and the enter-merge-exit pattern to bind SVG groups, circles, and text elements.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for scatter plots: a color legend for ordinal scales and a size legend for square-root scales. The color legend displays categorical fruit labels with colored circles, while the size legend uses nested circles of varying radii to represent numeric values. Both legends are implemented as reusable functions using `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3’s data join pattern with enter/merge/exit. The SVGs are rendered with `d3.select` and `.call()`, with text labels positioned using transactional offsets.

Lliyaxuanliyaxuan
96% 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
95% 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
95% 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
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered with D3 v5: a color legend for ordinal scales and a size legend for square-root scales. The color legend maps fruit categories to distinct colors, while the size legend visualizes numeric values using scaled circle radii. Both components use D3 selections and data joins to update legends dynamically. The code relies on `scaleOrdinal`, `scaleSqrt`, `scale.ticks`, and custom group elements with SVG circles and text labels, styled via CSS classes.

MMinwoo Pak
95% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components rendered as SVG: a color legend using an ordinal scale mapping fruit categories to distinct colors, and a size legend using a square-root scale to encode numeric values through circle area. The color legend displays evenly spaced colored circles with labels, while the size legend computes ticks via `sizeScale.ticks()`, filters out zero, and reverses their order. Both components are built with D3 v5, using `selection.merge()`, `enter()`, and `exit()` patterns to handle dynamic updates, and accept configuration props such as spacing, text offset, and circle styling.

JJames Malvern
94% match
Loading thumbnail…

Color and Size legends

This example demonstrates two reusable legend components for scatterplot-style visualizations. A color legend maps ordinal domain values (apple, lemon, lime, orange) to a d3.scaleOrdinal color range, while a size legend uses d3.scaleSqrt to encode numeric ticks as proportional circle radii. Both legends are implemented as functions that bind SVG groups with enter/merge/exit selections, positioning circles and text labels with custom spacing and offsets. The SVG rendering uses D3 v6 APIs including selection.call, selection.merge, and scale.ticks.

JJuyeonee
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend for ordinal scales and a size legend for quantitative scales. The color legend maps fruit names to distinct colors using `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric ticks as proportional circle radii. Both legends are rendered as SVG groups with circles and text, using `.call()` to apply the component functions. The size legend filters out zero values and reverses tick order to display larger circles first.

Nnkohdatavis
94% match