<table>
  <tr>
    <th colspan=2></th>
    <td id="10.0"></td>
    <td id="11.0"></td>
    <td id="12.0"></td>
    <td id="13.0"></td>
    <td id="14.0"></td>
    <td id="15.0"></td>
    <td id="16.0"></td>
    <td id="17.0"></td>
    <td id="18.0"></td>
    <td id="19.0"></td>
    <th colspan=2></th>
  </tr>
  <tr>
    <th colspan=2></th>
    <td id="10.1"></td>
    <td id="11.1"></td>
    <td id="12.1"></td>
    <td id="13.1"></td>
    <td id="14.1"></td>
    <td id="15.1"></td>
    <td id="16.1"></td>
    <td id="17.1"></td>
    <td id="18.1"></td>
    <td id="19.1"></td>
    <th colspan=2></th>
  </tr>
  <tr>
    <td id="9.0"></td>
    <td id="9.1"></td>
    <th colspan=10></th>
    <td id="20.1"></td>
    <td id="20.0"></td>
  </tr>
  <tr>
    <td id="8.0"></td>
    <td id="8.1"></td>
    <th colspan=10></th>
    <td id="21.1"></td>
    <td id="21.0"></td>
  </tr>
  <tr>
    <td id="7.0"></td>
    <td id="7.1"></td>
    <th colspan=10></th>
    <td id="22.1"></td>
    <td id="22.0"></td>
  </tr>
  <tr>
    <td id="6.0"></td>
    <td id="6.1"></td>
    <th colspan=10></th>
    <td id="23.1"></td>
    <td id="23.0"></td>
  </tr>
  <tr>
    <td id="5.0"></td>
    <td id="5.1"></td>
    <th colspan=10></th>
    <td id="24.1"></td>
    <td id="24.0"></td>
  </tr>
  <tr>
    <td id="4.0"></td>
    <td id="4.1"></td>
    <th colspan=10></th>
    <td id="25.1"></td>
    <td id="25.0"></td>
  </tr>
  <tr>
    <td id="3.0"></td>
    <td id="3.1"></td>
    <th colspan=10></th>
    <td id="26.1"></td>
    <td id="26.0"></td>
  </tr>
  <tr>
    <td id="2.0"></td>
    <td id="2.1"></td>
    <th colspan=10></th>
    <td id="27.1"></td>
    <td id="27.0"></td>
  </tr>
  <tr>
    <td id="1.0"></td>
    <td id="1.1"></td>
    <th colspan=10></th>
    <td id="28.1"></td>
    <td id="28.0"></td>
  </tr>
  <tr>
    <td id="0.0"></td>
    <td id="0.1"></td>
    <th colspan=10></th>
    <td id="29.1"></td>
    <td id="29.0"></td>
  </tr>
  <tr>
    <th colspan=2></th>
    <td id="39.1"></td>
    <td id="38.1"></td>
    <td id="37.1"></td>
    <td id="36.1"></td>
    <td id="35.1"></td>
    <td id="34.1"></td>
    <td id="33.1"></td>
    <td id="32.1"></td>
    <td id="31.1"></td>
    <td id="30.1"></td>
    <th colspan=2></th>
  </tr>
  <tr>
    <th colspan=2></th>
    <td id="39.0"></td>
    <td id="38.0"></td>
    <td id="37.0"></td>
    <td id="36.0"></td>
    <td id="35.0"></td>
    <td id="34.0"></td>
    <td id="33.0"></td>
    <td id="32.0"></td>
    <td id="31.0"></td>
    <td id="30.0"></td>
    <th colspan=2></th>
  </tr>
</table>

td {
  width: 20px;
  height: 20px;
  background: #111;
}

body {
  background: #000;
}

// ------------------------------------
// Framework code - scroll down 
// ------------------------------------

const totalCols = 40;
const totalRows = 2;

const lights = [];
for (let x = 0; x < totalCols; x++) {
  for (let y = 0; y < totalRows; y++) {
    lights.push({ id: `${x}.${y}`, color: null });
  }
}

setInterval(() => {
  const time = Date.now() / 1e3;
  
  for (const light of lights) {
    light.color = null;
  }
  
  update(lights, time);
  
  d3.select('table')
    .selectAll('td')
    .data(lights, (d, i, nodes) => d ? d.id : nodes[i].id)
    .style('background', d => d.color);
}, 60);

// ------------------------------------
// Custom code
// ------------------------------------
function update(lights, time) { 
  for (const light of lights) {
      light.color = `hsl(${(time * 200) % 360}, 100%, 50%)`;
  }
}