デザインの変更

データの個数：

平均：

分散：

標準偏差σ：

以下変更しました

・グラフの棒の太さを変更（以下試すが変更できず）

    line: {
      width: 2 // 棒の太さを調整する値（デフォルトは1）
    }

  bingroup: 'group1', // 各トレースを同じグループに追加

var layout = {
  bargap: 0.05,
  bargroupgap: 0.2,
};

  width: 0.05, // 棒の太さを指定

・表のサイズ変更（セルの幅を文字に合わせる）

cssで

    white-space: nowrap;

を使うが、ダメ。仕方なくtableの大きさ指定で一旦確定

/* テーブル全体のスタイル */
table {
  width: 600px; /* テーブルの横幅を調整 */
  border-collapse: collapse;
}

/* セルのスタイル */
th, td {
  padding: 10px; /* セルの内部余白を設定 */
  border: 1px solid #000; /* セルの境界線を設定 */
  max-width: 100px; /* セルの最大横幅を設定 */
  word-wrap: break-word; /* 長い単語やURLなどがはみ出さないように折り返す */
}

・先頭列のセルに背景色と文字色を指定（js）

// 1列目のセルに色を付ける
var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(1) td:first-child");
targetCell.style.backgroundColor = "purple";
targetCell.style.color = "white";

var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(2) td:first-child");
targetCell.style.backgroundColor = "orange";
targetCell.style.color = "white";

var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(3) td:first-child");
targetCell.style.backgroundColor = "cyan";
targetCell.style.color = "white";

var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(4) td:first-child");
targetCell.style.backgroundColor = "brown";
targetCell.style.color = "white";

var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(5) td:first-child");
targetCell.style.backgroundColor = "red";
targetCell.style.color = "white";

var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(6) td:first-child");
targetCell.style.backgroundColor = "green";
targetCell.style.color = "white";

var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(7) td:first-child");
targetCell.style.backgroundColor = "blue";
targetCell.style.color = "white";

var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(8) td:first-child");
targetCell.style.backgroundColor = "yellow";
targetCell.style.color = "white";

全体コードは以下

<!DOCTYPE html>
<html>
  <head>
    <!-- Load plotly.js into the DOM -->
    <script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>
  </head>
  <body>
    <div id="myDiv"><!-- Plotly chart will be drawn inside this DIV --></div>

    <p>データの個数：<span id="pieces"></span></p>
    <p>平均：<span id="average"></span></p>
    <p>分散：<span id="variance"></span></p>
    <p>標準偏差σ：<span id="sd"></span></p>

    <!-- 表を描画するための要素 -->
    <div id="tableDiv"></div>

    <script>
      const nd = [];
      var nd1 = [];
      var nd2 = [];
      var nd3 = [];
      var nd4 = [];
      var nd5 = [];
      var nd6 = [];
      var nd7 = [];
      var nd8 = [];

      function getRandomValue() {
        var x, y, z;
        for (let i = 0; i < 100000; i++) {
          x = Math.random();
          y = Math.random();
          z = Math.sqrt(-2 * Math.log(x)) * Math.cos(2 * Math.PI * y);
          nd.push(z);
        }
      }

      // getRandomValue()を呼び出して100,000回発生させる
      getRandomValue();

      // データの個数を表示
      document.getElementById("pieces").textContent = nd.length;

      // データの合計を求める
      const sum = nd.reduce((a, b) => a + b, 0);

      // データの平均を求める
      const average = sum / nd.length;
      document.getElementById("average").textContent = average;

      // データの分散を求める
      const sumSquaredDiff = nd.reduce((a, b) => a + (b - average) ** 2, 0);
      const variance = sumSquaredDiff / nd.length;
      document.getElementById("variance").textContent = variance;

      // データの標準偏差を求める
      const standardDeviation = Math.sqrt(variance);
      document.getElementById("sd").textContent = standardDeviation;

      // ヒストグラムの各バーに対する色を決定する関数
      function getColor(value) {
        const deviation = (value - average) / standardDeviation;
        if (deviation <= -3) {
          return "purple"; // -3標準偏差超
        } else if (deviation < -2) {
          return "orange"; // -3標準偏差以内
        } else if (deviation < -1) {
          return "cyan"; // -2標準偏差以内
        } else if (deviation < 0) {
          return "brown"; // -1標準偏差以内
        } else if (deviation < 1) {
          return "red"; // 1標準偏差以内
        } else if (deviation < 2) {
          return "green"; // 2標準偏差以内
        } else if (deviation < 3) {
          return "blue"; // 3標準偏差以内
        } else {
          return "yellow"; // 3標準偏差超
        }
      }

      // データを各範囲に分ける
      nd.forEach((value) => {
        const color = getColor(value);
        if (color === "purple") {
          nd1.push(value);
        } else if (color === "orange") {
          nd2.push(value);
        } else if (color === "cyan") {
          nd3.push(value);
        } else if (color === "brown") {
          nd4.push(value);
        } else if (color === "red") {
          nd5.push(value);
        } else if (color === "green") {
          nd6.push(value);
        } else if (color === "blue") {
          nd7.push(value);
        } else {
          nd8.push(value);
        }
      });

      var trace1 = {
        x: nd1,
        type: "histogram",
        marker: {
          color: "purple",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group1", // 各トレースを同じグループに追加
      };

      var trace2 = {
        x: nd2,
        type: "histogram",
        marker: {
          color: "orange",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group2", // 各トレースを同じグループに追加
      };

      var trace3 = {
        x: nd3,
        type: "histogram",
        marker: {
          color: "cyan",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group3", // 各トレースを同じグループに追加
      };
      var trace4 = {
        x: nd4,
        type: "histogram",
        marker: {
          color: "brown",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group4", // 各トレースを同じグループに追加
      };
      var trace5 = {
        x: nd5,
        type: "histogram",
        marker: {
          color: "red",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group5", // 各トレースを同じグループに追加
      };
      var trace6 = {
        x: nd6,
        type: "histogram",
        marker: {
          color: "green",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group6", // 各トレースを同じグループに追加
      };
      var trace7 = {
        x: nd7,
        type: "histogram",
        marker: {
          color: "blue",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group7", // 各トレースを同じグループに追加
      };
      var trace8 = {
        x: nd8,
        type: "histogram",
        marker: {
          color: "yellow",
        },
        xbins: {
          end: 5,
          size: 0.1,
          start: -5,
        },
        bingroup: "group8", // 各トレースを同じグループに追加
      };

      var data = [trace1, trace2, trace3, trace4, trace5, trace6, trace7, trace8];

      var layout = {
        bargap: 0.01,
        bargroupgap: 0.01,
        title: "Sampled Results",
        xaxis: { title: "Value" },
        yaxis: { title: "Count" },
      };

      Plotly.newPlot("myDiv", data, layout);

      // 表を描画するためのデータ
      var tableData = [
        ["標準偏差", "範囲", "個数", "確率", "累積分布"],
        ["-3σ ～", -3 * standardDeviation.toFixed(1) + "～", nd1.length, (nd1.length / nd.length).toFixed(4), (nd1.length / nd.length).toFixed(4)],
        [
          "-2σ ～ -3σ",
          -2 * standardDeviation.toFixed(1) + "～" + -3 * standardDeviation.toFixed(1),
          nd2.length,
          (nd2.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length) / nd.length).toFixed(4),
        ],
        [
          "-1σ ～ -2σ",
          -1 * standardDeviation.toFixed(1) + "～" + -2 * standardDeviation.toFixed(1),
          nd3.length,
          (nd3.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length) / nd.length).toFixed(4),
        ],
        [
          "平均 ～ -1σ",
          average.toFixed(1) + "～" + -1 * standardDeviation.toFixed(1),
          nd4.length,
          (nd4.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length + nd4.length) / nd.length).toFixed(4),
        ],
        [
          "1σ ～ 平均",
          standardDeviation.toFixed(1) + "～" + average.toFixed(1),
          nd5.length,
          (nd5.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length + nd4.length + nd5.length) / nd.length).toFixed(4),
        ],
        [
          "2σ ～ 1σ",
          2 * standardDeviation.toFixed(1) + "～" + standardDeviation.toFixed(1),
          nd6.length,
          (nd6.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length + nd4.length + nd5.length + nd6.length) / nd.length).toFixed(4),
        ],
        [
          "3σ ～ 2σ",
          3 * standardDeviation.toFixed(1) + "～" + 2 * standardDeviation.toFixed(1),
          nd7.length,
          (nd7.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length + nd4.length + nd5.length + nd6.length + nd7.length) / nd.length).toFixed(4),
        ],
        [
          " ～ 3σ",
          "～" + 3 * standardDeviation.toFixed(1),
          nd8.length,
          (nd8.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length + nd4.length + nd5.length + nd6.length + nd7.length + nd8.length) / nd.length).toFixed(4),
        ],
      ];

      // 表を描画
      var tableDiv = document.getElementById("tableDiv");
      var table = document.createElement("table");
      var thead = document.createElement("thead");
      var tbody = document.createElement("tbody");

      table.appendChild(thead);
      table.appendChild(tbody);
      tableDiv.appendChild(table);

      // theadを追加
      var headRow = thead.insertRow();
      tableData[0].forEach(function (item) {
        var th = document.createElement("th");
        th.appendChild(document.createTextNode(item));
        // セルのスタイルを追加
        th.style.border = "1px solid #000";
        th.style.padding = "10px";
        th.style.backgroundColor = "#f0f0f0";
        headRow.appendChild(th);
      });

      // tbodyを追加
      tableData.slice(1).forEach(function (row) {
        var tr = document.createElement("tr");
        row.forEach(function (item) {
          var td = document.createElement("td");
          td.appendChild(document.createTextNode(item));
          // セルのスタイルを追加
          td.style.border = "1px solid #000";
          td.style.padding = "10px";
          td.style.backgroundColor = "#ffffff"; // 他のセルの背景色
          tr.appendChild(td);
        });
        tbody.appendChild(tr);
      });

      // 1列目のセルに色を付ける
      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(1) td:first-child");
      targetCell.style.backgroundColor = "purple";
      targetCell.style.color = "white";

      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(2) td:first-child");
      targetCell.style.backgroundColor = "orange";
      targetCell.style.color = "white";

      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(3) td:first-child");
      targetCell.style.backgroundColor = "cyan";
      targetCell.style.color = "white";

      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(4) td:first-child");
      targetCell.style.backgroundColor = "brown";
      targetCell.style.color = "white";

      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(5) td:first-child");
      targetCell.style.backgroundColor = "red";
      targetCell.style.color = "white";

      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(6) td:first-child");
      targetCell.style.backgroundColor = "green";
      targetCell.style.color = "white";

      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(7) td:first-child");
      targetCell.style.backgroundColor = "blue";
      targetCell.style.color = "white";

      var targetCell = document.querySelector("#tableDiv tbody tr:nth-child(8) td:first-child");
      targetCell.style.backgroundColor = "yellow";
      targetCell.style.color = "white";
    </script>
  </body>
</html>