Skip to main content
SimilarExport ZIP
100%

Color & Size Legends

✓ Published1🌍 Public
AAmar Nath Yogi
Last edited Jan 31, 2020
Created on Jan 22, 2020

This example demonstrates two types of chart legends: a color legend mapping ordinal data (apple, orange, lemon) to a d3.scaleOrdinal color scale, and a size legend using d3.scaleSqrt to map a numeric range from 0 to 10 to circle radii. Both legends are rendered as SVG groups, with each tick containing a circle and label. The code utilizes d3.selection, d3.transition, and the .merge() API to animate legend updates over 1000ms, shrinking exiting circles and repositioning entries when the underlying scales change. The size legend positions its ticks horizontally, offsetting each by its radius to avoid overlap.

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 demonstrates two distinct types of chart legends created with D3.js v5: a color legend using an ordinal scale mapping fruit names to specific colors, and a size legend using a square-root scale to map numeric tick values to circle radii. Both legends are rendered as SVG groups, with circles and text labels positioned programmatically via `attr('transform')` calls. The color legend uses `scaleOrdinal` for categorical colors, while the size legend uses `scaleSqrt` and `ticks()` to generate evenly spaced, non-zero values, with circles filled using a semi-transparent black.

Ppanmenghan
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct custom legends for both color and size encodings in D3 v5 with SVG rendering. The color legend displays four ordinal categories—apple, lemon, lime, and orange—using d3.scaleOrdinal, while the size legend uses d3.scaleSqrt to map numeric tick values to circle radii. Both legends use reusable functions that bind data to groups, append circles and text, and position them with translate transforms.

CCurran Kelleher
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two distinct legend techniques for encoding data values. The color legend maps ordinal categories like "apple" and "lemon" to distinct colors using `d3.scaleOrdinal`. The size legend uses `d3.scaleSqrt` to translate a continuous numeric range from 0 to 10 into proportional circle radii, with tick labels derived from the scale's `.ticks()` method. Both legends are built as custom SVG components that render groups of circles and text, with the size legend's circles using a semi-transparent fill. The code relies on D3 v5's selection and merge APIs, and the `d3.select` function, to efficiently create and update the SVG elements.

RRubens
93% 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
93% match
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
93% 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
93% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two types of chart legends: a color legend for ordinal categories (apple, lemon, lime, orange) and a size legend for a continuous square-root scale. Interactive selection works through clicking any object to highlight its identity. The visualization uses D3 v5 with `scaleOrdinal`, `scaleSqrt`, and the `tick` pattern for legend construction, rendering SVG circles and text. Both legends are composed using the data-join pattern with `.enter()` and `.merge()` to update groups.

MMatthiasVanCampen
92% match