D3 Examples - gradual appear

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
<canvas width="960" height="500"></canvas>
<script>
​
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>
​
    