Transition each

<!DOCTYPE html>

<body>
  <div style="width:960px;">
    <div class="chart"></div>
    <p style='text-align: right;margin-right:40px'>Cool source: <a href='https://www.youtube.com/watch?v=pAMgUB51XZA'>Numberphile</a>, <a href='https://oeis.org/A133058'>https://oeis.org/A133058</a></p>
  </div>
  <script>

const getGreatestCommonDenomOf = (x, y) => {
      if ((typeof x !== 'number') || (typeof y !== 'number')) return false
      x = Math.abs(x)
      y = Math.abs(y)
      while (y) {
        var t = y
        y = x % y;
        x = t
      }
      return x
    }

const getRandIntBetween1And = (max) => {
      return (Math.floor(Math.random() * max) + 1)
    }

let sequence = []
    sequence.push({ n: 0, a: 1 })
    sequence.push({ n: 1, a: 1 })

for (let i = 2; i <= 850; i++) {
      s = {}
      s.n = i
      let gcd = getGreatestCommonDenomOf(s.n, sequence[i - 1].a)
      if (gcd > 1) s.a = sequence[i - 1].a / gcd
      else s.a = sequence[i - 1].a + i + 1;
      sequence.push(s)
    }
    
    let svgWidth = 960;
    let svgHeight = 425;
    const margin = { top: 50, right: 50, bottom: 50, left: 50 };

let chartWidth = svgWidth - margin.right - margin.left;
    let chartHeight = svgHeight - margin.top - margin.bottom;

let svg = d3.select(".chart")
      .append("svg")
      .attr("width", svgWidth)
      .attr("height", svgHeight)
      .append("g")
      .attr("transform", `translate(${margin.left},${margin.top})`)

let chart = svg.append("g");

let yLinearScale = d3.scaleLinear()
      .range([chartHeight, 0]) 
      .domain([0, d3.max(sequence, d => +d.a)])

let xLinearScale = d3.scaleLinear()
      .range([0, chartWidth])
      .domain([0, d3.max(sequence, d => +d.n)]);

let bottomAxis = d3.axisBottom()
      .scale(xLinearScale);

let leftAxis = d3.axisLeft()
      .scale(yLinearScale);

nodeEnter = chart
                  .selectAll("circle")
                    .data(sequence)
                      .enter()

let colors = []
    
    colors.push('#a6cee3');
    colors.push('#1f78b4');
    colors.push('#b2df8a');
    colors.push('#33a02c');
    colors.push('#fb9a99');
    colors.push('#e31a1c');
    colors.push('#fdbf6f');
    colors.push('#ff7f00');
    colors.push('#cab2d6');

nodeEnter
      .append("circle")
        .attr("fill", colors[getRandIntBetween1And(8) - 1])
        .attr("r", 2)
        .attr("cy", (d, i) => yLinearScale(d3.max(sequence, d => +d.a)))
        .attr("cx", (d, i) => xLinearScale(d3.max(sequence, d => +d.n)))

d3.selectAll('circle')
          .each(function(d, i) {
            d3.select(this)
              .style('fill', colors[getRandIntBetween1And(colors.length - 1)])
          })
          .transition()
            .delay((d, i) => { return i * 5 })
              .attr("cy", (d, i) => yLinearScale(d.a))
              .attr("cx", (d, i) => xLinearScale(d.n))
              .attr("r", (d, i) => getRandIntBetween1And(45))
              .style("opacity", (d, i) => getRandIntBetween1And(50) / 100)

chart.append("g")
      .attr('transform', `translate(0,${chartHeight})`)
      .call(bottomAxis)

chart.append("g")
      .call(leftAxis)

</script>
</body>

https://d3js.org/d3.v4.min.js