JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/gh-pages/d3.min.js"></script>
<div id='canvas'></div>

CSS

#canvas {
    border:1px solid black;
    width: 600px;
    height: 10000px;
    padding-left:10px;
}

JavaScript

var NUMBER_CIRCLES = 3000;
var ANIMATION_DELAY = 10000;

var paper = Raphael('canvas', 600, 10000);
var circleholder = paper.set();

var width = 10, height = 12, rad = 8;
var colours = ["#6F30A0","#5D3978","#421068","#A063D0","#AD80D0",
               "#B62E8A","#893C70","#760F55","#DB60B2","#DB81BD",
               "#4B39A5","#493F7C","#21126B","#7C6BD2","#9386D2"]

// get a rdm number between 0 and max
function randomNum(max) {
    return Math.floor(Math.random() * max + 1);
}

// draw 3000 circles in a grid
function drawAllCircles() {
    var cx = 0, cy = height, perline = 25;
    for (var i=0;i<NUMBER_CIRCLES;i++) {
        if (i%perline == 0) {
            cx = 0;
            cy += height*2;
        }
        cx +=width*2;
        circleholder.push(paper.circle(cx, cy, rad).attr({fill:'yellow'}));
    }
}

// update all to one colour
function updateSingColour() {
    circleholder.animate({fill:'blue'}, ANIMATION_DELAY);
}

// update all to a unique colour
function updateRandomColour() {
    //you could splice elements or whatever
    elements = circleholder.nodes()
     
    d3.selectAll(elements)
      .transition()
      .attr("fill", function(d,i){return colours[randomNum(14)]})
      .duration(ANIMATION_DELAY)
}

Raphael.st.nodes = function() {
  var elements = [];
  this.forEach(function (i) {
     elements.push(i.node);
  });
  return elements;
}

// do stuff
drawAllCircles();
//updateSingColour();
updateRandomColour();