Анимационная геогеофическая тепловая карта

Question

Я все еще новичок в кодировании, и я хотел бы анимировать географическую тепловую карту, но я не уверен, как. Я думаю, что у меня есть код для этого, но, к сожалению, я не уверен, как включить его в этот стиль карты.

Любая помощь очень ценится.

Вот что у меня есть (обратите внимание на кнопка воспроизведения даже не отображается, это похоже на скрытый идентификатор, почему) Снимок экрана WorldMap

Вот код для тепловой карты:

// MAP CODE PLEASE WORK
function init() {

  heatmap();
  animateMap();

}
function heatmap() {
 let width = 900;
 let height = 600;

div = d3.select('#container');
mapLayer = div.append('svg').attr('id', 'map').attr('width', width).attr('height', height).style("margin-top", '100px');
canvasLayer = div.append('canvas').attr('id', 'heatmap').attr('width', width).attr('height', height).style("margin-top", '100px');

var canvas = canvasLayer.node(),
    context = canvas.getContext("2d");

// context.globalAlpha = 0.5;

var projection = d3.geoMercator().translate([width/2, height/2]),
    path = d3.geoPath(projection),
    airportMap;

d3.queue()
    .defer(d3.json, 'world-50m.json')
    .defer(d3.csv, 'Oilincidentsdata.csv')
    .await(main);


function main(error, world, location ) {
    location.forEach((d, idx) => { d.coords = projection([d.Longitude, d.Latitude]); d.id = idx; })
    incidentMap = d3.map(location, d => d.id);
    var countries = topojson.feature(world, world.objects.countries).features
    console.log(location);

    mapLayer
        .append('g')
        .classed('countries', true)
        .selectAll(".country")
          .data(countries)
        .enter()
          .append("path")
          .attr("class", "country")
          .attr("d", path);

    mapLayer
      .append('g')
      .classed('location', true)
      .selectAll('.location')
        .data(location)
      .enter().append('circle')
        .attr('r', 1)
            .attr('cx', function(d) { return d.coords && d.coords[0]; })
            .attr('cy', function(d) { return d.coords && d.coords[1]; })

    var heat = simpleheat(canvas);

    // set data of [[x, y, value], ...] format
    heat.data(location.map(d => {a = incidentMap.get(d.id); return [a.coords[0], a.coords[1], +d.watches]}));

    // set point radius and blur radius (25 and 15 by default)
    heat.radius(10, 20);

    // optionally customize gradient colors, e.g. below
    // (would be nicer if d3 color scale worked here)
    // heat.gradient({0: '#0000ff', 0.5: '#00ff00', 1: '#ff0000'});

    // set maximum for domain
    heat.max(d3.sum(location, d => +d.Compensation));

    // draw into canvas, with minimum opacity threshold
    heat.draw(0.05);
}}
function animateMap() {

  var timer;  // create timer object
  d3.select('#play')  
    .on('click', function() {  // when user clicks the play button
      if(playing == false) {  // if the map is currently playing
        timer = setInterval(function(){   // set a JS interval
          if(currentAttribute < attributeArray.length-1) {  
              currentAttribute +=1;  // increment the current attribute counter
          } else {
              currentAttribute = 0;  // or reset it to zero
          }
          sequenceMap();  // update the representation of the map 
          d3.select('#clock').html(attributeArray[currentAttribute]);  // update the clock
        }, 2000);

        d3.select(this).html('stop');  // change the button label to stop
        playing = true;   // change the status of the animation
      } else {    // else if is currently playing
        clearInterval(timer);   // stop the animation by clearing the interval
        d3.select(this).html('play');   // change the button label to play
        playing = false;   // change the status again
      }
  });
}


window.onload = init();  // magic starts here