This reusable scatter plot visualizes surfing data, showing the relationship between cost and duration for different surfing areas, with each point colored to encode additional information. Built with D3 v6, the visualization uses a modular function pattern with chainable setter methods for configuring width, height, data accessors, margins, and radius. The code loads CSV data from a GitHub gist and renders SVG circles with axes, axis labels, and a responsive layout. The example demonstrates D3's data join pattern for updating marks and supports animation through D3's transition capabilities.