Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Color and Size Legends

Public visualization

Viewing a saved revision (read-only)

f12c96e6de9b49d08f0b916050578f5b

Color and Size Legends

0 stars0🌍 Public
Ccodexmon
Last edited Jun 29, 2020
Created on Jun 29, 2020

This example demonstrates how to construct separate color and size legends using D3 v5. A color legend maps ordinal categories to distinct colors, while a size legend uses a square root scale to represent numeric values with varying circle radii. The code defines reusable `colorLegend` and `sizeLegend` functions that handle tick creation, circle rendering, and text labels, then calls them with `selection.call()`. Both legends render as SVG groups with styled text and outlined circles, using `scaleOrdinal` and `scaleSqrt` from the d3 module.

AI-generated description