D3 Color and Size Legends

100%

D3 Color and Size Legends

✓ Published1🌍 Public

Last edited Jan 3, 2024

Created on Jan 3, 2024

Forked from D3 General Update Pattern (Singular Elements)

This example demonstrates D3 color and size legends through an interactive fruit bowl visualization. Apple and lemon icons are rendered as SVG circles with red and yellow fills via `d3.scaleOrdinal`, while their radii vary between 50 and 25 pixels. The code uses a general update pattern with enter/merge/exit selections to animate changes in the fruit array over time, including removals and type substitutions. Static legends for color and size scales are created alongside the visualizations.

AI-generated description

Color and Size Legends

Topics covered:

Creating a color legend component
Encoding area using a square root scale
Computing ticks from size scale
Creating a size legend component
Tweaking the styles

MIT Licensed

Similar vizzes

Loading thumbnail…

Color and Size Legends

Two fruits, apples and lemons, appear as colored circles inside a rounded bowl, with size and color encoding fruit type. D3’s `scaleOrdinal` maps apples to red and a 50-pixel radius, lemons to yellow and 30 pixels. New fruit groups animate in, growing from radius zero via a one-second `transition`, while exiting groups are removed. The static SVG renders the 600-by-300 bowl as a rounded rectangle, with labels positioned below each circle.

Ddanielchamone

91% match

Loading thumbnail…

Color and Size Legends

This example demonstrates how color and size can encode categorical differences in data, using a simple fruit bowl visualization. It shows apples and lemons as circles, where color distinguishes fruit type and radius encodes size, with legends implied through the shapes themselves. The code uses d3.scaleOrdinal for both color and radius mappings, and builds the SVG scene with d3-selection methods. The visualization is rendered using D3 v5, with fruit data drawn as circles and text labels inside a rounded rect bowl.

Hhugomell

91% match

Loading thumbnail…

Colour and Size Legends

Animated fruit icons show how ordinal color and size scales encode categorical data. In this D3 v5 example, apples and lemons appear as red and yellow circles whose radius reflects a separate size scale. The `colorLegend` function uses the data join pattern, animating new circles from radius zero through `transition().duration(1000)`, while exits are removed. SVG rendering and the `scaleOrdinal` API handle the legend mappings.

WWarren-Fitzhenry

91% match

Loading thumbnail…

Color and Size Legends

This example presents two interactive legends built with D3.js v5. A categorical color legend maps fruit names—apple, lemon, orange, and lime—to distinct colors using `d3.scaleOrdinal()`, while a sequential size legend uses `d3.scaleSqrt()` to represent numeric values from 0 to 10 with varying circle radii. The code employs D3's `transition()` method to animate the circles’ radii from zero to their final sizes, and both legends are rendered as SVG groups with tick marks, circles, and text labels.

EEdward-Elric233

90% match

Loading thumbnail…

Color and size legends - test

This example demonstrates a static SVG visualization of fruit types in a bowl, using both color and size to distinguish between apples and lemons. It renders fruit as circles with radius and fill color determined by category, alongside text labels for each fruit. The code uses d3.scaleOrdinal for both color and radius scales, and builds the scene through d3 selection and merging operations in the `fruitBowl` function.

MMukund Khandelwal

90% match

Loading thumbnail…

Color and Size Legends

A row of fruit shapes demonstrates how D3.js ordinal scales map categorical data to visual channels. The `scaleOrdinal` function assigns colors and radii to apples and lemons, while circles and text labels update through data joins. As the simulation runs, fruits are removed or replaced, triggering enter, update, and exit transitions that animate position, size, and color changes. Clicking a fruit selects it, highlighting it with a black stroke. The example uses D3 v5 and renders with SVG elements and transitions.

Iinroadings

90% match

Loading thumbnail…

Color and Size Legends

Two fruits, an apple and a lemon, are drawn inside a rounded rectangle bowl using D3 v7 and SVG. The example maps fruit type to both a categorical color scale and a categorical radius scale, using `scaleOrdinal` with explicit domains and ranges. Circle elements receive fill and radius attributes from these scales, while text labels appear below each fruit. The positions are computed from the array index, and the bowl itself is a styled rectangle behind the fruit groups.

Ggabrielribeirob

90% match

Loading thumbnail…

Color and size legends

A legend displays a color scale for four fruit categories—apple, lemon, lime, and orange—as colored circles with matching text labels. Built with D3 v5, the example uses `scaleOrdinal` to map domain values to specific colors and a custom `colorLegend` function that binds data to SVG groups via `selection.selectAll` and `enter()`. The legend is rendered with circle radius, spacing, and text offset as configurable props, demonstrating reusable legend components in SVG.

Xxiaoma1002

90% match