Skip to main content
SimilarExport ZIP
100%

Color and Size legends

✓ Published0🌍 Public
JJuyeonee
Last edited Jul 21, 2021
Created on Jul 20, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components for D3 visualizations: a color legend mapping ordinal categories (apple, lemon, lime, orange) to distinct hues, and a size legend using a square-root scale to represent numeric values. The color legend renders colored circles with labels, while the size legend positions circles of varying radii with tick marks. Both use SVG groups and the `selection.merge` pattern for enter-update-exit handling, with styling applied via the `.tick` class.

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

Color and Size legend

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.

Ppplomith
94% 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
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for D3 visualizations: a color legend matching ordinal categories to specific colors, and a size legend using a square-root scale to map numeric values to circle radii. The color legend renders labeled circles for fruits like apple and lemon, while the size legend displays five tick marks with proportional circle sizes. Both legends are built using D3 v7’s selection-merging API, appending SVG `<g>` groups to position circles and text labels with translated transforms.

Yyejichun@naver.com
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components in D3 v5: a color legend and a size legend. The color legend maps categorical domain values like ‘apple’ and ‘lemon’ to distinct fill colors using `scaleOrdinal`, while the size legend visualizes a continuous numeric range with `scaleSqrt`, rendering circles whose radii grow proportionally. Both legends use SVG groups and the enter–update–exit pattern to bind data, with ticks and text labels positioned via transform attributes. The size legend filters out zero and reverses tick order for clarity.

MMunTatt Yap
94% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two custom legend components for visualizing color and size encodings in D3 v5. The color legend displays a categorical scale with fruit names (apple, lemon, lime, orange) using distinct colors, while the size legend uses a square-root scale to represent numeric values from 0 to 10 with proportional circle radii. Both legends are rendered as SVG groups with tick marks, using D3’s selection joins and scales (`scaleOrdinal`, `scaleSqrt`). Circles and text labels are positioned dynamically based on spacing and scale values, with styles defined in external CSS.

Jjesramyep1263
94% match