Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Color and size Legends

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

93d86811662a420f837af96f1cc3d7fd

Open

Color and size Legends

0 stars0🌍 Public
MMauradion
Last edited May 21, 2021
Created on May 20, 2021

Two reusable legend components display color and size scales side by side. The color legend maps fruit names to hues using `d3.scaleOrdinal`, while the size legend uses `d3.scaleSqrt` with five ticks to show proportional radii. Both legends are implemented as ES6 modules that append SVG groups, circles, and text via data joins. The example demonstrates local module imports alongside D3 loaded from UNPKG, with styling applied through external CSS classes.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.