matt-oxley/index.html

## 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>
	<!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>