JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.js"></script>

JavaScript

var capitalsArray = [
{Lat: 113.1, Long: 55.0, score:1},
{Lat: 198.1, Long: 55.0, score:5}, 
{Lat: 155.1, Long: 55.0, score:2}
]

//d3.csv("csv/EditedCSVFile.csv", function(capitalsArray) {
      var scoreToColor = {
        "1": "#ff0000",
        "2": "#00ff00",
        "3": "#0000ff",
        "4": "#ff00ff",
        "5": "#00ffff",
      }
      var canvas = d3.select("body").
      								append("svg")
      				   			.attr("width", "500")
                      .attr("height", "100")
      
      // set up your element with the data and save it for further use
      var cityMarkerCanvas = canvas.selectAll(".city-marker")
        .data(capitalsArray)
        .enter()
        .append("circle")
        .attr("r", 20)
        .attr("fill", function(d) {
          return scoreToColor[d.score];
        })
        .each(function(d, i) {
        var self = this;
        var cb = function(){
           // calculate the coords once
           var coords = [d.Lat, d.Long]// projection([d.Lat, d.Long]); 
            d3.select(self)
            .transition()
             .attr("cx", function(d) {
                return coords[0];
              })
              .attr("cy", function(d) {
                return coords[1];
              })
              .attr("r", 10)
              .style("fill", "blue")
              .attr("opacity", 0.1)
              .duration(1000);
      }
				d3.timeout(cb, 40*i);
      });
    
//  });