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);