Skip to main content
SimilarExport ZIP
100%

Color and Size Legends

✓ Published0🌍 Public
MMatthiasVanCampen
Last edited Feb 13, 2020
Created on Feb 13, 2020
Forked from Fruitsalad

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.

AI-generated description

Click Any Object to select it's identity

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

Color and Size Legends

This example demonstrates how to construct two distinct legends for visualizing data: a color legend for ordinal values and a size legend for quantitative values. The color legend displays categories like apple, lemon, lime, and orange using colored rectangles, while the size legend uses scaled circles representing numeric ticks. The visualization is built with D3 v5, employing `scaleOrdinal` for colors and `scaleSqrt` for sizing, with SVG rendering and custom reusable legend components.

AAegon95
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 & Size Legends

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.

AAmar Nath Yogi
92% 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
92% 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
92% match
Loading thumbnail…

Color and Size Legends

This example demonstrates two common legend types for D3 visualizations: an ordinal color legend for categories and a square-root size legend for quantitative values. The color legend maps fruit names to distinct colors, while the size legend encodes numeric values using proportional circle radii. Both legends are rendered as SVG groups using reusable functions that leverage D3's `scaleOrdinal`, `scaleSqrt`, and `selection.join` pattern for enter/update/exit handling.

Ssakhabutdinov
92% 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
92% match