JSFiddle - React, Tailwind, and code Playground

by gschutz

JavaScript

var evtDispatcher = d3.dispatch(["historyChange"]);

evtDispatcher.on("historyChange", function(d) {
    update(matrix);
});

var matrix = [
  [11975,  5871, 8916, 2868],
  [ 1951, 10048, 2060, 6171],
  [ 8010, 16145, 8090, 8045],
  [ 1013,   990,  940, 6907]
];

var historyListBox = d3.select("body").append("table");

setInterval(function(){
    var value = [Math.floor(Math.random() * 100),
                 Math.floor(Math.random() * 100),
                 Math.floor(Math.random() * 100),
                 Math.floor(Math.random() * 100)]
    matrix.push(value);
    if (matrix.length > 6) {
        matrix.splice(0, 1);
    }
    evtDispatcher.historyChange(matrix);
}, 1000);

function update(data) {
    console.log(data)
   var historyRow = historyListBox.selectAll("tr").data(data);
    historyRow.enter().append("tr")
    .html(function(d) { return d });
}