This example demonstrates how to implement reusable color and size legends using the general update pattern in D3 v5. The color legend displays four ordinal categories with distinct colors, while the size legend uses a square root scale to visualize continuous values through circle radii. Both legends are rendered as SVG groups, with data-driven tick marks that update gracefully when the underlying data changes. The code leverages `scaleOrdinal`, `scaleSqrt`, and the `selection.join` pattern to handle enter, update, and exit selections.