This example demonstrates a custom color legend for ordinal data, showing categories as colored circles with matching labels. The legend displays two fruit categories, apple and lemon, each assigned a distinct color via `d3.scaleOrdinal`. The visualization uses D3 v5 with an SVG rendering approach, where the `colorLegend` function appends circle and text elements to the SVG canvas. Labels are positioned below the circles, and all elements are centered vertically using the SVG height attribute. The code also includes transition handling for updating the legend dynamically.