This example demonstrates two legends for mapping data to visual encodings. A color legend uses a d3.scaleOrdinal scale to map categorical fruit names to distinct colors, while a size legend uses a d3.scaleSqrt scale to map a numeric range to circle radii. The legends are custom reusable components, created with d3.selection and appended to an SVG canvas, with each tick rendered as a group containing a circle and a text label.