Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

color and size legends

Public visualization

Viewing a saved revision (read-only)

cda2269b7c4f46f5a6acf7401a44d41b

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