Flying ACE

@Bigenvesim·2 public vizzes

Color and Size Legends

This example demonstrates how to construct separate color and size legends using D3 v5. The color legend maps ordinal categories (apple, lemon, lime, orange) to distinct colors via `scaleOrdinal`, while the size legend uses `scaleSqrt` to represent numeric values with proportional circle radii. Both legends are built with reusable functions that accept `selection` and `props`, appending SVG groups with circles and text labels. The size legend filters out zero values and reverses tick order, displaying five ticks with semi-transparent black circles.

Jun 13, 2020

Loading thumbnail…

Color and Size Legends

A static SVG demonstrates two legend styles built from reusable D3 functions. `colorLegend` maps an ordinal color scale across fruit categories with fixed-size circles, while `sizeLegend` uses a square-root scale to represent numeric values through varying circle radii. Both legends render SVG groups with labeled ticks, using `scaleOrdinal`, `scaleSqrt`, and explicit spacing and text-offset parameters. The code defines separate modules for each legend and composes them in a single SVG canvas via `selection.call()`.

Jun 13, 2020