html
<script src="https://d3js.org/d3.v7.js"></script>
html
<!DOCTYPE html>
<html>
<head>
<style>
.bar {
fill: steelblue;
}
</style>
</head>
<body>
<svg width="400" height="300"></svg>
<script src="https://d3js.org/d3.v7.js"></script>
<script>
const data = [10, 20, 30, 40, 50];
const svg = d3.select("svg");
const bars = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("class", "bar")
.attr("x", (d, i) => i * 40)
.attr("y", (d) => 300 - d)
.attr("width", 30)
.attr("height", (d) => d);
</script>
</body>
</html>
