JSFiddle - React, Tailwind, and code Playground

by Maria Karanasou

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: 188.1, Long: 55.0, score:5}, 
{Lat: 55.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", "400")
                      .attr("height", "400")
      
      // 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) {
        // calculate the coords once
        var coords = [d.Lat, d.Long]// projection([d.Lat, d.Long]); 

        d3.select(this)
         .transition()
         .attr("cx", function(d) {
            return coords[0];
          })
          .attr("cy", function(d) {
            return coords[1];
          })
          .attr("r", 4)
          .style("fill", "blue")
          .attr("opacity", 1.0)
          .duration(1000);
      });
    
//  });