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
Jjlspangl
Last edited Sep 30, 2021
Created on Sep 29, 2021

This example demonstrates how to build separate color and size legends in D3 v5. The color legend uses a `scaleOrdinal` with a domain of fruit names mapped to distinct colors, while the size legend uses `scaleSqrt` to map numeric values to circle radii. Both legends are rendered as SVG groups via reusable functions that append circles and text labels. The size legend calculates tick values using `sizeScale.ticks(numTicks)` and positions text based on each circle’s radius plus an offset.

AI-generated description

Comments

Sign in to join the discussion.

MIT Licensed