index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const data = [3, 5, 7, 2, 9, 2, 10, 4, 9, 3];
const height = 500;
const width = 200;
const barWidth = width / data.length;
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data)])
.range([0, height]);
const svg = d3
.select("body")
.style("text-align", "center")
.append("svg")
.style("border", "1px solid black")
.attr("width", 200)
.attr("height", height);
const bars = svg
.selectAll("rect")
.call(selection => console.log("Before binding:", selection))
.data(data)
.call(selection => console.log("After binding:", selection))
.join("rect")
.attr("height", d => yScale(d))
.attr("width", barWidth)
.attr("x", (d, i) => i * barWidth)
.attr("y", d => height - yScale(d))
.attr("stroke", "white")
.attr("fill", "steelblue");
</script>
</body>