This example renders a simple pie chart that visualizes expense categories (Food, Travel, Shopping, Others) with their corresponding quantitative values. The chart uses d3.pie() and d3.arc() to generate the slices, with a d3.scaleOrdinal() providing the categorical color scheme. Each slice is labeled using arc.centroid() to position the category names, and a separate HTML legend is appended below the SVG to reinforce the color-coded categories. The visualization is built with d3.v7 and rendered as inline SVG.