gradual appear

let ctx = d3.select('canvas').node().getContext('2d'),
    numCol = 150,
    numRow = 150,
    shuffledIds = d3.shuffle(d3.range(0, numCol * numRow)),
    selectedIds = new Set(),
    addAmt = 0,
    spacing = 960.0 / numCol,
    squareSize = 5;

function render() {
    ctx.clearRect(0, 0, ctx.canvas.clientWidth, ctx.canvas.clientHeight);

addAmt += 1;

for (let i = 0, amt = Math.min(shuffledIds.length, addAmt); i < amt; i++) {
        selectedIds.add(shuffledIds.pop());
    }

for (let i = 0; i < numCol; i++) {
        for (let j = 0; j < numRow; j++) {
            let id = i * numCol + j;
            if (selectedIds.has(id)) {
                ctx.fillStyle = d3.hsl((i * j) % 360, 0.8, 0.8).toString();
            } else {
                ctx.fillStyle = "rgba(0, 0, 200, 0)";
            }

ctx.fillRect(i * spacing, j * spacing, squareSize, squareSize);
        }
    }
    window.requestAnimationFrame(render);
}

window.requestAnimationFrame(render);

</script>
</body>

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