JSFiddle - React, Tailwind, and code Playground

by jdcast

JavaScript

var windowWidth = 500;
var windowLength = 300;

var pos = [
  [50, 40],
  [100, 80],
  [150, 120],
  [200, 160],
  [250, 200],
  [300, 240]
];

var base = d3.select("body").append("svg")
  .attr("width", windowWidth)
  .attr("height", windowLength);

var circles = base.selectAll("charlesDarwin")
  .data(pos)
  .enter()
  .append("circle")
  .attr("cx", function(d, i) {
    return pos[i][0];
  })
  .attr("cy", function(d, i) {
    return pos[i][1];
  })
  .attr("r", 20)
  .style("fill", "00ACCD");

var timer = d3.timer(animate);

function animate() {

  circles.attr("cx", function() {
    if (d3.select(this).attr("cx") > 500) {
      timer.stop()
    }
    return +d3.select(this).attr("cx") + 1
  });
};