Skip to main content
๐ŸŒ Public

Share visualization

Send this visualization to others.

Color and Size Legends

Public visualization

Color and Size Legends

0 stars0๐ŸŒ Public
Aannadehtiarova
Last edited Feb 2, 2021
Created on Feb 2, 2021

This example demonstrates two legend styles for D3 visualizations: a color legend mapping ordinal categories to colors, and a size legend mapping a square-root scale to circle radii. The color legend displays four fruit labels next to colored circles, while the size legend shows five tick values with circles whose areas scale with the data. Both legends are built as reusable SVG components using D3's selection API, with `scaleOrdinal` and `scaleSqrt` defining the mappings. The code uses `.call()` to invoke the legend functions and `merge()` to handle updates efficiently.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed