区間を８つに分け累積分布表を付け加えました
結果
データの個数：
平均：
分散：
標準偏差σ：
<!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 "green"; // -3標準偏差超
} else if (deviation < -2) {
return "blue"; // -3標準偏差以内
} else if (deviation < -1) {
return "orange"; // -2標準偏差以内
} else if (deviation < 0) {
return "yellow"; // -1標準偏差以内
} else if (deviation < 1) {
return "red"; // 1標準偏差以内
} else if (deviation < 2) {
return "gray"; // 2標準偏差以内
} else if (deviation < 3) {
return "black"; // 3標準偏差以内
} else {
return "purple"; // 3標準偏差超
}
}
// データを各範囲に分ける
nd.forEach((value) => {
const color = getColor(value);
if (color === "green") {
nd1.push(value);
} else if (color === "blue") {
nd2.push(value);
} else if (color === "orange") {
nd3.push(value);
} else if (color === "yellow") {
nd4.push(value);
} else if (color === "red") {
nd5.push(value);
} else if (color === "gray") {
nd6.push(value);
} else if (color === "black") {
nd7.push(value);
} else {
nd8.push(value);
}
});
var trace1 = {
x: nd1,
type: "histogram",
marker: {
color: "green",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var trace2 = {
x: nd2,
type: "histogram",
marker: {
color: "blue",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var trace3 = {
x: nd3,
type: "histogram",
marker: {
color: "orange",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var trace4 = {
x: nd4,
type: "histogram",
marker: {
color: "yellow",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var trace5 = {
x: nd5,
type: "histogram",
marker: {
color: "red",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var trace6 = {
x: nd6,
type: "histogram",
marker: {
color: "gray",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var trace7 = {
x: nd7,
type: "histogram",
marker: {
color: "black",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var trace8 = {
x: nd8,
type: "histogram",
marker: {
color: "purple",
},
xbins: {
end: 5,
size: 0.1,
start: -5,
},
};
var data = [trace1, trace2, trace3, trace4, trace5, trace6, trace7, trace8];
var layout = {
bargap: 0.05,
bargroupgap: 0.2,
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));
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));
tr.appendChild(td);
});
tbody.appendChild(tr);
});
</script>
</body>
</html>
コメント