function ScatterPlot({ data, width = 600, height = 400, xKey, yKey }) { const margin = { top: 40, right: 30, bottom: 50, left: 50 }; const svg = d3.select("svg").attr("width", width).attr("height", height); // Title svg.append("text") .attr("x", width / 2) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .attr("class", "chart-title") .text("Reusable Scatter Plot ICE-7"); const xScale = d3.scaleBand() .domain(data.map(d => d[xKey])) .range([margin.left, width - margin.right]) .padding(0.1); const yScale = d3.scaleLinear() .domain([0, d3.max(data, d => d[yKey])]) .range([height - margin.bottom, margin.top]); svg.append("g").attr("transform", `translate(0,${height - margin.bottom})`).call(d3.axisBottom(xScale)).selectAll("text").attr("transform", "rotate(-45)").attr("text-anchor", "end"); svg.append("g").attr("transform", `translate(${margin.left},0)`).call(d3.axisLeft(yScale)); svg.selectAll("circle").data(data).enter().append("circle") .attr("cx", d => xScale(d[xKey]) + xScale.bandwidth() / 2) .attr("cy", d => yScale(d[yKey])) .attr("r", 5).attr("fill", "blue"); }