{
const svg = d3.create('svg')
.attr('width', visWidth + margin.left + margin.right)
.attr('height', visHeight + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("text")
.attr("x", visWidth / 2)
.attr("y", -margin.top + 5)
.attr("text-anchor", "middle")
.attr("dominant-baseline", "hanging")
.attr("font-family", "sans-serif")
.attr("font-size", "16px")
.text("sepal length vs. sepal width");
g.append("g")
.attr("transform", `translate(0, ${visHeight})`)
.call(xAxis)
.call(g => g.select(".domain").remove())
.call(g => g.selectAll('.tick line')
.clone()
.attr('stroke', '#d3d3d3')
.attr('y1', -visHeight)
.attr('y2', 0))
.append("text")
.attr("x", visWidth / 2)
.attr("y", 40)
.attr("fill", "black")
.attr("text-anchor", "middle")
.text("sepal length (cm)");
g.append("g")
.call(yAxis)
.call(g => g.select(".domain").remove())
.call(g => g.selectAll('.tick line')
.clone()
.attr('stroke', '#d3d3d3')
.attr('x1', 0)
.attr('x2', visWidth))
.append("text")
.attr("x", -40)
.attr("y", visHeight / 2)
.attr("fill", "black")
.attr("dominant-baseline", "middle")
.text("sepal width (cm)");
g.append("g")
.selectAll("circle")
.data(
.join("circle")
.attr("cx",
.attr("cy",
.attr("fill",
.attr("r", 3);
return svg.node();
}