This example shows a reusable scatter plot of crop yield by country, built with D3.js v7 and styled with a clean, minimal layout. The chart renders circles for each data point, with position mapping to a country’s yield and the visual encoding defined by a custom-scale function. It uses `d3.scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` to generate the tick marks, while the data is loaded from a CSV using `d3.csv`. The reusable pattern is implemented through a `scatterPlot` function that takes configuration options, making the chart adaptable to different datasets.