This example demonstrates interactive color and size legends built with D3 v5, rendered as SVG. It shows categorical color encoding for fruit types (apple, lemon, lime, orange) using `scaleOrdinal`, and quantitative size encoding for values 0–10 using `scaleSqrt`. The legends are created as reusable components via `colorLegend` and `sizeLegend` functions, which compute tick values from the size scale and position circles with text labels. Styling is applied through external CSS, with the SVG canvas sized at 960×500.