dots.js

// constants
const MAX_VECTORS = 500;
const WIDTH = 400;
const HEIGHT = 400;
const MARGIN = 20;

// generate data
let vectors = [];
for (let i = 0; i < MAX_VECTORS; i++) {
  let x = ((Math.random() * (WIDTH - MARGIN * 2)) | 0) + MARGIN;
  let y = ((Math.random() * (HEIGHT - MARGIN * 2)) | 0) + MARGIN;
  vectors.push({
    id: i,
    x: x,
    y: y,
    r: 2
  });
}

// setup svg
let svg = d3
  .select("body")
  .append("svg")
  .attr("width", WIDTH)
  .attr("height", HEIGHT);

// create main container
let mainGroup = svg.append("g").classed("main-group", true);

// plot all vectors
mainGroup
  .selectAll("circle")  
  .data(vectors, d => d.id)
  .enter()
  .append("circle")
  .attr("r", 0)
  .attr("cx", d => d.x)
  .attr("cy", d => d.y)
  .transition()
  .delay(d => d.id * 10)
  .attr("r", d => d.r);