This example demonstrates how to create separate legends for categorical color encoding and quantitative size encoding. The color legend uses an ordinal scale to map fruit names to distinct colors, while the size legend uses a square-root scale to map numeric values to circle radii. The reusable legend components (colorLegend and sizeLegend) are implemented as D3.js functions that append SVG groups, circles, and text elements, with tick marks generated from the scale's domain and ticks API.