This example demonstrates the general update pattern for creating and updating color and size legends in D3.js. The color legend uses `d3.scaleOrdinal` to map categorical values like apple, lemon, lime, and orange to distinct colors, with circles and text labels arranged vertically. The size legend uses `d3.scaleSqrt` to map a numeric domain to circle radii, filtering ticks and reversing their order. Both legends are rendered as SVG groups within an SVG canvas, using selection, enter, update, and exit methods for dynamic updates.