JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>D3 Drawing</title>
  <script src="https://cdn.jsdelivr.net/d3js/3.5.9/d3.min.js"></script>
</head>
<body>
  <h3>Draw a polygon 2</h3>

    <div>
      <button onclick="beginAutoPlay()">Start Autoplay</button>
      <button onclick="stopAutoPlay()">Stop Autoplay</button>
    </div>  

  <script>


let polygons = [
  {
    "id": "1",
    "plot": "469,59.5625,246,256.5625,348,499.5625,527,482.5625,653,457.5625,693,406.5625,732,371.5625,743,260.5625,690,257.5625,650,172.5625,622,143.5625,589,98.5625,544,90.5625,511,55.5625"
  }, 
  {
    "id": "2",
    "plot": "462,79.5625,258,258.5625,361,470.5625,527,482.5625,653,457.5625,693,406.5625,718,363.5625,705,284.5625,684,241.5625,650,172.5625,622,143.5625,587,108.5625,544,90.5625,513,95.5625"
  },
  {
    "id": "3",
    "plot": "410,173.5625,324,259.5625,361,470.5625,527,435.5625,604,379.5625,672,374.5625,718,363.5625,692,281.5625,662,231.5625,650,172.5625,622,143.5625,582,132.5625,544,90.5625,513,95.5625"
  },
  {
    "id": "4",
    "plot": "422,186.5625,359,267.5625,374,430.5625,527,435.5625,604,379.5625,672,374.5625,691,325.5625,692,281.5625,662,231.5625,650,172.5625,622,143.5625,582,132.5625,543,111.5625,503,124.5625"
  },
  {
    "id": "5",
    "plot": "486,200.5625,359,267.5625,394,393.5625,527,435.5625,604,379.5625,617,332.5625,634,292.5625,624,252.5625,602,216.5625,606,192.5625,596,171.5625,585,148.5625,573,175.5625,525,175.5625"
  },
  {
    "id": "6",
    "plot": "486,200.5625,440,264.5625,419,370.5625,527,435.5625,604,379.5625,580,359.5625,589,330.5625,607,306.5625,610,277.5625,604,252.5625,588,246.5625,577,238.5625,549,220.5625,514,219.5625"
  },
  {
    "id": "7",
    "plot": "485,272.5625,469,294.5625,456,359.5625,491,396.5625,604,379.5625,580,359.5625,589,330.5625,607,306.5625,610,277.5625,604,252.5625,588,246.5625,571,265.5625,548,270.5625,521,277.5625"
  },
  {
    "id": "8",
    "plot":...