This example demonstrates how to build reusable legend components for both color and size scales. Two separate legends are rendered in an SVG: one showing fruit categories as colored circles using a d3 scaleOrdinal, and another displaying a d3 scaleSqrt with five tick values as scaled circles. The colorLegend and sizeLegend functions manage enter/update/exit selections, appending circle and text elements with attributed transforms and offsets. The code relies on d3-selection methods like selectAll, merge, and exit, with styling applied through external CSS classes.