{
{
function updateScatterChart(selectedX, selectedY, species) {
const svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("max-width", "80%")
.style("height", "auto")
.style("height", "intrinsic");
const filteredData = iris_data.filter(d => species === "All Species" || d.Species === species);
x.domain([0, d3.max(filteredData, d => d[selectedX])]);
y.domain([0, d3.max(filteredData, d => d[selectedY])]);
const circles = svg.select("g.points")
.selectAll("circle")
.data(filteredData, d => d.id);
circles.enter()
.append("circle")
.merge(circles)
.attr("cx", d => x(d[selectedX]))
.attr("cy", d => y(d[selectedY]))
.attr("r", 5)
.style("fill", d => color(d.Species));
circles.exit().remove();
svg.select("g.x-axis").call(d3.axisBottom(x));
svg.select("g.y-axis").call(d3.axisLeft(y));
}
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]);
svg.append("g").attr("class", "x-axis")
.attr("transform", `translate(0,${height - margin.bottom})`);
svg.append("g").attr("class", "y-axis")
.attr("transform", `translate(${margin.left},0)`);
svg.append("g").attr("class", "points");
return svg.node();
}
updateScatterChart(selectX.value, selectY.value, selectSpecies.value);
}