JSFiddle - React, Tailwind, and code Playground

HTML

<svg>
</svg>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

JavaScript

var coordinates = [
    {x: 5, y: 5},
    {x: 6, y: 6},
    {x: 7, y: 7},
    {x: 8, y: 8},
    {x: 9, y: 9}
];

var p = d3.select("svg").selectAll("circle")
  .data(coordinates);
  

p.enter()
  .append("circle")
  .attr("r", 5)
  .attr("cx", function(d) {return d.x * 10;})
  .attr("cy", function(d) {return d.y * 10;})
  .style("fill", "blue");

var movePoints = function() { 
  p.transition()
  .attr("cx", function(d) {
      console.log(d.x); 
      d.x += 10; 
      return d.x;
  })
  .attr("cy", function(d) {
      console.log(d.y);
      d.y += 10;
      return d.y;
  })
  .style("fill", "black")
  .duration(2000)
  .ease("elastic")
  .each("end", function() {
    setTimeout(movePoints, 1000);
  }
}

movePoints()