Color and Size Legends

Color and Size Legends

Two customizable legends demonstrate how D3 v5 encodes data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend employs `scaleSqrt` to represent numerical values through circle radii. Both legends are constructed through reusable functions that bind data to SVG groups, with legends rendered as circles and text labels. The color legend applies `attr("fill", colorScale)`, while the size legend filters zero values from its ticks and spaces circles vertically.

Jjay

Color and Size Legends

This example demonstrates two reusable legend components rendered with SVG: a color legend for ordinal data and a size legend for quantitative data. The color legend maps fruit names to distinct colors, while the size legend uses `d3.scaleSqrt` to encode numeric values through circle radii. Both legends use D3 v5’s data join pattern, with Enter and merge selections to update ticks. The size legend calculates tick values via `scale.ticks` and filters out zero.

RResl411

Color and Size Legends.js

Two reusable D3 legend components demonstrate how to encode data through color and size. The color legend uses `scaleOrdinal` to map fruit categories to distinct hues, while the size legend uses `scaleSqrt` with tick marks to represent numeric values. Both render as SVG groups with circles and text labels, updating through D3's data join pattern. The examples show how legends can be built using `selection.call` with custom functions and `merge` for enter/update transitions.

NNeepaB

Color and Size Legends

This example demonstrates two legends: a color legend for ordinal data and a size legend for quantitative data. The color legend uses `d3.scaleOrdinal` to map fruit names to colors, while the size legend uses `d3.scaleSqrt` with five ticks to map numeric values to circle radii. Both legends are rendered as SVG groups using reusable functions that handle enter, update, and exit selections. The code relies on D3 v5’s `selection.call`, `selection.merge`, and scale methods to create interactive-looking, standalone legend components.

Ggregosaure

Color and Size Legends

Two reusable legend components demonstrate color and size encoding in D3 v5. The color legend uses `scaleOrdinal` to map fruit categories to distinct colors with fixed-radius circles, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends render as SVG groups with tick marks, using D3’s data join pattern and `.call()` to apply each component. The size legend filters out zero values and reverses tick order, with text offset dynamically calculated from each circle’s radius.

KKaavya Lakshmanan

Color and Size Legends

This example demonstrates how D3 legends can encode data through color and size. Two separate legends are rendered with SVG: a color legend uses an ordinal scale to map fruit categories to distinct hues, while a size legend uses a square-root scale to represent numeric values with scaled circle radii. The code builds reusable legend components using D3’s data join pattern, applying scales like `scaleOrdinal` and `scaleSqrt`, with manual spacing and text offsets for tick labels.

Ddaigokawabe

Color and Size Legend

Two reusable D3 legends demonstrate how to encode data through color and size. The color legend uses `d3.scaleOrdinal` to map fruit names to categorical colors, while the size legend uses `d3.scaleSqrt` to map numeric values to circle radii. Both legends are implemented as custom D3 functions that append SVG circles and text elements, using `.merge()` for efficient updates and `.exit().remove()` for cleanup. The rendering is entirely SVG-based within a single `<svg>` element, styled with CSS classes.

EEdoardoRegini

Color and Size Legends

This example demonstrates how to create reusable color and size legends in D3 v5. It uses two custom functions, `colorLegend` and `sizeLegend`, to render ordinal color scales and square-root size scales as SVG groups. The color legend maps fruit categories to distinct fills, while the size legend displays tick values with proportional circle radii. Both legends use D3’s selection joins and scale APIs (`scaleOrdinal`, `scaleSqrt`) to update efficiently.

Ooptimizeresume