Multiplicative Group by bmershon

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<body></body>
<script>

let n = 11;

let worker = new Worker("worker.js");

worker.onmessage = function(event) {
  switch (event.data.type) {
    case "end": return ended(event.data);
  }
};

worker.postMessage({'n': n});

function ended(data) {
  let matrix = data.matrix,
      orders = data.orders;

  // Add group elements down the left side of the table.
  matrix = matrix.map((row, i) => {
    return [i + 1].concat(row).concat([orders[i]]);
  });

  // Add group elements as top row.
  matrix.unshift(d3.range(0, n + 1));

  // Top left corner is empty.
  matrix[0][0] = "";

  // Top right corner is empty.
  matrix[0][n] = "order";
  
  let tr = d3.select("body")
      .style("font-family", "helvetica")
    .append("table")
      .style("text-align", "center")
    .selectAll("tr")
    .data(matrix)
    .enter().append("tr");

  let td = tr.selectAll("td")
    .data(d => d)
    .enter().append("td")
      .attr("width", "40px")
      .attr("height", "40px")
      .style("font-size", "24px")
      .style("font-weight", (d, i) => {
        switch(i) {
          case 0: // Left-most column.
            return "normal";
            break;
          case n: // Right-most column
            return "bolder";
            break;
          default: // All other entries.
            return "lighter";
            break;
        }
      })
      .style("color", (d, i) => {
        return (i === n) ? "rgb(240, 0, 0)" : null;
      })
      .text(d => d);

  // Style the top row.
  d3.selectAll("tr").filter((d, i) => i === 0)
    .selectAll("td")
      .style("color", "normal");
}
</script>