Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Color and Size Legends

Public visualization

Viewing a saved revision (read-only)

4e1d670aa0c64fb7bda6dc8c78677003

Color and Size Legends

0 stars0🌍 Public
HHasideluxe
Last edited Jul 31, 2020
Created on Jul 30, 2020

Two reusable D3 legends demonstrate how to encode data through color and size. A color legend maps ordinal fruit names to distinct hues using `scaleOrdinal`, while a size legend translates a quantitative scale from 0 to 10 into circle radii via `scaleSqrt`. Both legends render as SVG groups with labeled ticks, using `selection.merge` to update existing elements efficiently. The examples show legend construction with configurable spacing, text offsets, and tick counts for flexible chart annotations.

AI-generated description