This example demonstrates reusable D3.js legend components for ordinal color scales and sequential size scales. The color legend displays four fruit categories (apple, lemon, lime, orange) as colored circles, while the size legend visualizes numeric ticks from 0 to 10 as scaled circles. Both legends use D3 v5’s `scaleOrdinal` and `scaleSqrt`, with custom legend modules handling circle positioning and text offsets. The SVG rendering includes styled ticks and text, with circles given black stroke outlines for visual separation.