正規分布に変数を追加2

データ	数値
個数
平均
分散
標準偏差σ
中央値
前回のプログラムに以下の変数をinputタグで追加していきます。
年率期待リターン：μ
標準偏差：σ
初期投資額：S₀
初期値は、年率期待リターン：10%、標準偏差：20%、初期投資額 \( S_{0} \)=100（万円）とします。
inputタグ追加後、input type="number"で skip = "0.01" を追加したところ、再描画で画面フリーズなど不具合が発生しました。
ここまでのコードを以下に示して、再度コードを整理したいと思います
<!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" class="box1" ><!-- Plotly chart will be drawn inside this DIV --></div>
    
    <!-- フォームの追加 --> 
 
    <form class="box2">

      <div>
        <label for="currentValue">初期投資額（万円）</label>
    </br>
        <input type="number" id="currentValue" value="100" min="0" >
      </div>
    </br>
      <div>
        <label for="averageReturnRate">期待リターン（年率%）:</label>
    </br>
        <input type="number" id="averageReturnRate" value="0.1" min="0" >
      </div>
    </br>
      <div>
        <label for="riskRate">想定リスク（標準偏差,年率%）:</label>
    </br>
        <input type="number" id="riskRate" value="0.2" min="0">
      </div>
    </br>

  <!-- 再描画ボタンの追加 -->
  <div class="rebutton">
    <button onclick="redrawChart()">再描画</button>
      </div>
  </form>

<div class="clear"></div>

    <!-- 新しい表を描画するための要素 -->
    <div class="tables-container">
      <div>
        <table class="table-container" border="1">
          <tr>
            <th>データ</th>
            <th>数値</th>
          </tr>
          <tr>
            <td>個数</td>
            <td><span id="pieces"></span></td>
          </tr>
          <tr>
            <td>平均</td>
            <td><span id="average"></span></td>
          </tr>
          <tr>
            <td>分散</td>
            <td><span id="variance"></span></td>
          </tr>
          <tr>
            <td>標準偏差σ</td>
            <td><span id="sd"></span></td>
          </tr>
          <tr>
            <td>中央値</td>
            <td><span id="median"></span></td>
          </tr>
        </table>
      </div>

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



    <script>
      
    var averageReturnRate;
    var riskRate;
    var currentValue;
    let nd = [];
 
      
      
 window.onload = function () {
  // フォームの初期値を設定
  document.getElementById('averageReturnRate').value = '0.1';
  document.getElementById('riskRate').value = '0.2';
  document.getElementById('currentValue').value = '100';

  // 初回描画
  redrawChart();
};
     
function redrawChart() {
    // 前のグラフをクリア
  Plotly.purge('myDiv');
nd = [];

     
  // フォームの値を取得   
  averageReturnRate = parseFloat(document.getElementById('averageReturnRate').value);
  riskRate = parseFloat(document.getElementById('riskRate').value);
  currentValue = parseFloat(document.getElementById('currentValue').value);

   
  // getRandomValue()を呼び出して100,000回発生させる
  getRandomValue(averageReturnRate, riskRate, currentValue);      
      
      var nd1 = [];
      var nd2 = [];
      var nd3 = [];
      var nd4 = [];
      var nd5 = [];
      var nd6 = [];
      var nd7 = [];
      var nd8 = [];

   

      // データの個数を表示
      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.toFixed(2);

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

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

      // データの中央値を求める
      const sortedData = [...nd].sort((a, b) => a - b);
      const middle = Math.floor(sortedData.length / 2);
      const median =
        sortedData.length % 2 === 0
          ? (sortedData[middle - 1] + sortedData[middle]) / 2
          : sortedData[middle];
      document.getElementById("median").textContent = median.toFixed(2);
    
      // ヒストグラムの各バーに対する色を決定する関数
      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: 500,
          size: 0.1,
          start: -500,
        },
        bingroup: "group1", // 各トレースを同じグループに追加
      };

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

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



  
      // 表を描画するためのデータ
      var tableData = [
        ["標準偏差", "範囲", "個数", "確率", "累積分布"],
        [" ～ -3σ", "～" + (average -3 * standardDeviation).toFixed(1), nd1.length, (nd1.length / nd.length).toFixed(1), (nd1.length / nd.length).toFixed(4)],
        [
          "-3σ ～ -2σ",
        (average - 3 * standardDeviation).toFixed(1)  + "～" +  (average -2 * standardDeviation).toFixed(1),
          nd2.length,
          (nd2.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length) / nd.length).toFixed(4),
        ],
        [
          "-2σ ～ -1σ",
          (average -2 * standardDeviation).toFixed(1) + "～" + (average -1 * standardDeviation).toFixed(1),
          nd3.length,
          (nd3.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length) / nd.length).toFixed(4),
        ],
        [
          "-1σ ～ 平均",
         (average -1 * standardDeviation).toFixed(1)  + "～" + average.toFixed(1),
          nd4.length,
          (nd4.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length + nd4.length) / nd.length).toFixed(4),
        ],
        [
          "平均 ～ 1σ", 
         average.toFixed(1) + "～" + (parseFloat(average) + parseFloat(standardDeviation)).toFixed(1),
          nd5.length,
          (nd5.length / nd.length).toFixed(4),
          ((nd1.length + nd2.length + nd3.length + nd4.length + nd5.length) / nd.length).toFixed(4),
        ],
        [
          "1σ ～ 2σ",
          (parseFloat(average) + parseFloat(standardDeviation)).toFixed(1) + "～" + (parseFloat(average) + 2*parseFloat(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),
        ],
        [
          "2σ ～ 3σ",
          (parseFloat(average) + 2*parseFloat(standardDeviation)).toFixed(1)  + "～" + (parseFloat(average) + 3*parseFloat(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σ ～ ",
          (parseFloat(average) + 3*parseFloat(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";
   
   
   
         Plotly.newPlot("myDiv", data, layout);
  
    }
      
         function getRandomValue(averageReturnRate,riskRate,currentValue) {
        var x, y, z, s;
        for (let i = 0; i < 10000; i++) {
          x = Math.random();
          y = Math.random();
          z = Math.sqrt(-2 * Math.log(x)) * Math.cos(2 * Math.PI * y);
          s = currentValue * ( 1 + averageReturnRate + riskRate * z);//初期資産currentValue,リターンaverageReturnRate,リスクriskRate
          
          nd.push(s);
        }
      }  
 
    </script>
  </body>
</html>