index.html
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
const height = 500;
const width = 200;
const svg = d3
.select("body")
.style("text-align", "center")
.append("svg")
.style("border", "1px solid black")
.attr("width", 200)
.attr("height", height);
setInterval(() => {
const data = Array(Math.floor(Math.random() * 10))
.fill(true)
.map(() => Math.random() * 10);
console.log("data: ", data);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data)])
.range([0, height]);
const barWidth = width / data.length;
const binding = svg.selectAll("rect").data(data);
binding
.enter()
.append("rect")
.merge(binding)
.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");
binding.exit().remove();
}, 1000);
</script>
</body>