This example demonstrates how to build custom legend components for D3 visualizations using SVG. It shows two distinct legends: a color legend using an ordinal scale with categorical fruit labels, and a size legend using a square root scale with filtered ticks. The reusable legend functions, `colorLegend` and `sizeLegend`, are invoked via the `.call()` method and handle enter/merge/exit selections. The code uses `d3.scaleOrdinal`, `d3.scaleSqrt`, and D3 v7's selection methods to update and render the legend elements.