JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<h1>0</h1>

CSS

h1 {
  font: 400 15px "Helvetica Neue";
  text-align: center;
  width: 960px;
  height: 500px;
  margin: 0;
  position: absolute;
  left: -50px;
}

JavaScript

var format = d3.format(",d");

d3.select("h1")
  .transition()
    .duration(2500)
    .on("start", function repeat() {
      var t = d3.active(this)
          .style("opacity", 0)
          .remove();

      d3.select("body").append("h1")
          .style("opacity", 0)
          .text(format(Math.random() * 1e6))
        .transition(t)
          .style("opacity", 1)
        .transition()
          .delay(1500)
          .on("start", repeat);
    });