function scatterPlot(selection, data) { const width = 600, height = 400, margin = { top: 20, right: 30, bottom: 50, left: 50 }; const svg = selection.append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const xScale = d3.scaleLinear() .domain(d3.extent(data, d => d.year)) .range([0, width - margin.left - margin.right]); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.horsepower)]) .range([height - margin.top - margin.bottom, 0]); svg.append("g") .attr("transform", `translate(0, ${height - margin.top - margin.bottom})`) .call(d3.axisBottom(xScale).tickFormat(d3.format("d"))); svg.append("g").call(d3.axisLeft(yScale)); svg.selectAll("circle") .data(data) .enter() .append("circle") .attr("cx", d => xScale(d.year)) .attr("cy", d => yScale(d.horsepower)) .attr("r", 5) .attr("fill", "steelblue"); svg.append("text") .attr("x", width / 2) .attr("y", height - 10) .attr("text-anchor", "middle") .text("Year"); svg.append("text") .attr("transform", "rotate(-90)") .attr("x", -height / 2) .attr("y", -40) .attr("text-anchor", "middle") .text("Horsepower"); } // Call the function d3.select("body").call(scatterPlot, dataset);