Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Colour and Size Legends

Public visualization

Viewing a saved revision (read-only)

c0cc7cb438ee4807a32cb59b689b6431

Colour and Size Legends

0 stars0🌍 Public
MMuhammad Jarir Kanji
Last edited Dec 19, 2020
Created on Dec 18, 2020

This example demonstrates how to create legends for both color and size scales in D3. A color legend displays four fruit categories as colored circles using a `scaleOrdinal`, while a size legend uses a `scaleSqrt` with five tick values to show proportional circle radii. Both legends are built with reusable functions that append SVG groups, circles, and text elements. The code uses D3 v5 selections and scales, with transparent circles and black strokes styled via CSS.

AI-generated description