JSFiddle - React, Tailwind, and code Playground

JavaScript

var margin = {top: 40, bottom: 40, left: 40, right: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.bottom - margin.top;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var t0 = svg.append("circle")
    .attr("r", 0)
    .attr("cx", 40)
    .attr("cy", 40)
    .attr("class", "point")
  .transition()
    .duration(500)
    .attr("r", 4);

var t1 = t0.each("end", function(){ 
    var t2 = svg.append("path")
        .style("stroke", "#000")
        .style("stroke-width", 2)
        .style("fill", "none")
        .attr("d", "M40,40L40,40")
      .transition()
        .ease("linear")
        .duration(500)
        .attr("d", "M40,40L80,80");
        
    t2.each("end", function(){ 
        svg.append("circle")
            .attr("r", 1)
            .attr("cx", 80)
            .attr("cy", 80)
            .attr("class", "point")
          .transition()
            .duration(500)
            .attr("r", 4);
    });
});