探索正态分布：交互式实验带你体验统计之美
正态分布，这条优美的钟形曲线，可以说是统计学中最重要、最无处不在的概率分布。从自然现象（如身高、测量误差）到金融市场，再到机器学习，它的身影随处可见。但你是否真正理解它为何如此普遍？仅仅看公式和定义可能有些枯燥，不如动手实践！
最近，我创建了一个简单的 HTML 交互式页面，通过三个经典的实验，让你直观地感受和探索正态分布的奥秘。无需安装任何软件，在浏览器中即可运行。
你可以将下面的完整 HTML 代码保存为一个 .html 文件，然后用浏览器打开它，即可开始交互式实验。
(如果你正在使用支持 Artifact 的界面，可以直接在旁边预览和交互)
下面，我们来详细介绍一下这三个实验以及它们背后的原理。
实验一：中心极限定理 (Central Limit Theorem, CLT)
核心思想： 这是正态分布“王者地位”的关键原因之一。中心极限定理指出，无论原始数据来自什么分布（只要它有明确的均值和方差），只要你从中抽取足够多的样本，并计算这些样本的均值，那么这些样本均值的分布就会趋近于正态分布。样本量越大，这种趋近性越好。
交互实验：
- 过程： 实验从一个简单的均匀分布（0到1之间的随机数，每个数值出现的概率相等）开始。我们进行
T次试验，每次试验都抽取M个这样的随机数，然后计算这M个数的平均值。最后，我们将这T个平均值进行“标准化”处理（减去理论均值，再除以理论标准差），并绘制它们的分布直方图。 - 你的操作：
- 调整 试验次数 (T) 滑块：增加 T 会让直方图看起来更平滑，因为它基于更多的数据点。
- 调整 每次试验的样本量 (M) 滑块：这是关键！观察当 M 逐渐增大时，直方图的形状如何越来越像标准的正态分布（N(0,1)）曲线。即使原始分布（均匀分布）完全不是钟形，它们的均值（经过标准化后）却神奇地呈现出正态性。
- 观察： 图表中会同时绘制理论的标准正态分布 PDF（概率密度函数）曲线，方便你对比实验结果与理论的吻合程度。
实验二：高尔顿板 (Galton Board / Bean Machine) 模拟
核心思想： 高尔顿板是一个物理装置，小球从顶部落下，经过多层交错排列的钉子，每次碰到钉子时，小球有同等机会向左或向右落下。最终，小球落在底部的不同槽中，形成近似正态分布的堆积。这本质上是二项分布的一个直观展示，而当层数（试验次数）很多时，二项分布可以很好地用正态分布来近似。
交互实验：
- 过程： 我们模拟这个过程。设置钉板的层数
L和下落的小球数量B。每个小球独立下落L层，每层随机向左（位置-0.5）或向右（位置+0.5）。我们记录每个小球最终的水平位置。 - 你的操作：
- 调整 钉板层数 (L) 滑块：层数越多，相当于二项分布中的试验次数越多，其形状越接近正态分布。
- 调整 小球数量 (B) 滑块：增加小球数量可以让分布的形状更清晰、更稳定。
- 观察： 绘制的是最终落点位置的直方图。你会看到，即使每次决策只是简单的左右二选一，大量重复后，整体结果呈现出中间高、两边低的钟形分布。实验同样会绘制一个理论上的正态分布曲线（均值为0，方差为 L/4）供你对比。
实验三：Box-Muller 变换
核心思想： 前两个实验展示了正态分布是如何“自然产生”或作为极限情况出现的。而 Box-Muller 变换则是一种直接生成符合标准正态分布 (N(0,1)) 随机数的常用算法。它利用两个独立的、来自标准均匀分布 U(0,1) 的随机数，通过一个精巧的数学变换，生成两个独立的、来自标准正态分布 N(0,1) 的随机数。
交互实验：
- 过程： 实验直接应用 Box-Muller 算法。你只需要指定想要生成的符合 N(0,1) 分布的样本数量
N。 - 你的操作：
- 调整 生成样本数量 (N) 滑块：生成的样本越多，直方图就越能精确地反映标准正态分布的形状。
- 观察： 你会看到生成的样本数据绘制的直方图，以及理论上的 N(0,1) 曲线。这个实验展示了如何从最基础的均匀随机数“构造”出正态随机数，这在计算机模拟和统计计算中非常有用。
如何使用？
非常简单：
- 将下面的代码复制并保存为一个
.html文件 (例如normal_experiments.html)。 - 用你的网页浏览器打开这个文件。
- 找到你感兴趣的实验。
- 拖动滑块来调整参数（如样本量、试验次数等）。滑块旁边的数字会实时显示当前值。
- 点击对应实验下方的“运行实验”按钮。
- 观察下方图表的变化，看看实验结果的直方图如何与理论的正态曲线进行拟合。
结语
通过这三个交互式实验，希望你能更直观地理解：
- 中心极限定理的强大威力，解释了为何许多现实世界的变量近似正态分布。
- 累积效应（如高尔顿板）如何导致正态分布的出现。
- 如何利用基础的随机数生成正态分布样本（Box-Muller）。
统计学不仅仅是冰冷的公式，动手实验和模拟是理解其深刻内涵的绝佳途径。快去亲自试试看，调整参数，观察变化，感受正态分布的魅力吧！
交互式实验完整 HTML 代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>交互式正态分布实验</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
.chart-container {
position: relative;
height: 300px;
width: 100%;
}
label {
display: block;
margin-bottom: 0.25rem;
font-weight: 500;
}
input[type="number"], input[type="range"] {
width: 100%;
padding: 0.5rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
margin-bottom: 0.5rem;
}
button {
background-color: #3b82f6;
color: white;
padding: 0.5rem 1rem;
border-radius: 0.375rem;
cursor: pointer;
transition: background-color 0.2s;
}
button:hover {
background-color: #2563eb;
}
.description {
font-size: 0.875rem;
color: #4b5563;
margin-bottom: 1rem;
}
</style>
</head>
<body class="bg-gray-100 p-6">
<h1 class="text-3xl font-bold mb-8 text-center">交互式正态分布实验</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 实验1：中心极限定理 -->
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-3">实验1：中心极限定理</h2>
<p class="description">
从任意分布（这里使用均匀分布）中抽取多个样本，计算这些样本的均值。根据中心极限定理，当样本量足够大时，这些样本均值的分布将趋近于正态分布。
</p>
<div>
<label for="clt-trials">试验次数 (T): <span id="clt-trials-val">5000</span></label>
<input type="range" id="clt-trials" min="100" max="10000" value="5000" step="100" oninput="document.getElementById('clt-trials-val').textContent = this.value;">
</div>
<div>
<label for="clt-sample-size">每次试验的样本量 (M): <span id="clt-sample-size-val">30</span></label>
<input type="range" id="clt-sample-size" min="2" max="100" value="30" step="1" oninput="document.getElementById('clt-sample-size-val').textContent = this.value;">
</div>
<button onclick="runCLTExperiment()">运行实验</button>
<div class="chart-container mt-4">
<canvas id="chart1"></canvas>
</div>
</div>
<!-- 实验2：高尔顿板 (Galton Board / Bean Machine) -->
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-3">实验2：高尔顿板模拟</h2>
<p class="description">
模拟小球通过钉板下落的过程。小球每次碰到钉子时，随机向左或向右下落。最终小球落入底部的槽中，其分布接近二项分布。当层数足够多时，二项分布近似于正态分布。
</p>
<div>
<label for="galton-levels">钉板层数 (L): <span id="galton-levels-val">20</span></label>
<input type="range" id="galton-levels" min="5" max="50" value="20" step="1" oninput="document.getElementById('galton-levels-val').textContent = this.value;">
</div>
<div>
<label for="galton-balls">小球数量 (B): <span id="galton-balls-val">5000</span></label>
<input type="range" id="galton-balls" min="100" max="10000" value="5000" step="100" oninput="document.getElementById('galton-balls-val').textContent = this.value;">
</div>
<button onclick="runGaltonExperiment()">运行实验</button>
<div class="chart-container mt-4">
<canvas id="chart2"></canvas>
</div>
</div>
<!-- 实验3：Box-Muller 变换 -->
<div class="bg-white rounded-lg shadow p-6">
<h2 class="text-xl font-semibold mb-3">实验3：Box-Muller 变换</h2>
<p class="description">
利用均匀分布的随机数生成符合标准正态分布 (N(0,1)) 的随机数。这是生成正态分布样本的常用算法。
</p>
<div>
<label for="boxmuller-samples">生成样本数量 (N): <span id="boxmuller-samples-val">5000</span></label>
<input type="range" id="boxmuller-samples" min="100" max="10000" value="5000" step="100" oninput="document.getElementById('boxmuller-samples-val').textContent = this.value;">
</div>
<button onclick="runBoxMullerExperiment()">运行实验</button>
<div class="chart-container mt-4">
<canvas id="chart3"></canvas>
</div>
</div>
</div>
<script>
let chart1, chart2, chart3;
// 标准正态分布 PDF
function normalPDF(x, mu = 0, sigma = 1) {
return (1 / (sigma * Math.sqrt(2 * Math.PI))) * Math.exp(-0.5 * Math.pow((x - mu) / sigma, 2));
}
// 数据分箱 (用于直方图)
function binData(data, binCount = 40) {
if (!data || data.length === 0) return { counts: [], centers: [], binWidth: 0 };
let min = Math.min(...data), max = Math.max(...data);
if (min === max) { // Handle case where all data points are the same
min -= 0.5;
max += 0.5;
}
const binWidth = (max - min) / binCount;
const bins = Array(binCount).fill(0);
const centers = Array(binCount).fill(0).map((_, i) => min + (i + 0.5) * binWidth);
data.forEach(v => {
let idx = Math.floor((v - min) / binWidth);
if (idx >= binCount) idx = binCount - 1; // Handle max value
if (idx < 0) idx = 0; // Handle min value potentially slightly off
bins[idx]++;
});
return { counts: bins, centers, binWidth };
}
// 绘制直方图
function drawHistogram(ctx, chartInstance, data, binCount = 40, title, theoreticalPdf = null, pdfParams = {}) {
const { counts, centers, binWidth } = binData(data, binCount);
const N = data.length;
const datasets = [{
label: '实验频数',
data: counts,
backgroundColor: 'rgba(59, 130, 246, 0.5)',
borderColor: 'rgba(59, 130, 246, 1)',
borderWidth: 1,
barPercentage: 1.0,
categoryPercentage: 1.0
}];
if (theoreticalPdf) {
const pdfValues = centers.map(x => theoreticalPdf(x, pdfParams.mu, pdfParams.sigma) * N * binWidth);
datasets.push({
label: '理论分布 (缩放后)',
data: pdfValues,
type: 'line',
borderColor: 'rgba(234, 88, 12, 1)',
borderWidth: 2,
fill: false,
pointRadius: 0,
tension: 0.1
});
}
if (chartInstance) {
chartInstance.destroy();
}
return new Chart(ctx, {
type: 'bar',
data: {
labels: centers.map(c => c.toFixed(2)),
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
plugins: {
title: { display: true, text: title },
tooltip: {
mode: 'index',
intersect: false,
}
},
scales: {
x: {
title: { display: true, text: '值' },
ticks: {
maxRotation: 0,
minRotation: 0,
autoSkip: true,
maxTicksLimit: 10 // Limit number of x-axis labels for readability
}
},
y: {
title: { display: true, text: '频数' },
beginAtZero: true
}
}
}
});
}
// --- 实验 1: 中心极限定理 ---
function runCLTExperiment() {
const trials = parseInt(document.getElementById('clt-trials').value);
const sampleSize = parseInt(document.getElementById('clt-sample-size').value);
const means = [];
// 均匀分布 U[0, 1] 的均值为 0.5，方差为 1/12
const mu_uniform = 0.5;
const var_uniform = 1 / 12;
// 根据CLT，样本均值的均值为 mu_uniform，方差为 var_uniform / sampleSize
const mu_mean = mu_uniform;
const sigma_mean = Math.sqrt(var_uniform / sampleSize);
// 标准化后的均值 Z = (Mean - mu_mean) / sigma_mean，应服从 N(0,1)
for (let i = 0; i < trials; i++) {
let sum = 0;
for (let j = 0; j < sampleSize; j++) {
sum += Math.random();
}
const mean = sum / sampleSize;
const standardized_mean = (mean - mu_mean) / sigma_mean;
means.push(standardized_mean);
}
chart1 = drawHistogram(
document.getElementById('chart1').getContext('2d'),
chart1,
means,
40, // bins
`样本均值的分布 (T=${trials}, M=${sampleSize})`,
normalPDF, // Theoretical PDF is N(0,1) after standardization
{ mu: 0, sigma: 1 }
);
}
// --- 实验 2: 高尔顿板 ---
function runGaltonExperiment() {
const levels = parseInt(document.getElementById('galton-levels').value);
const balls = parseInt(document.getElementById('galton-balls').value);
const finalPositions = [];
for (let i = 0; i < balls; i++) {
let position = 0;
for (let j = 0; j < levels; j++) {
position += (Math.random() < 0.5) ? -0.5 : 0.5; // 左 -0.5, 右 +0.5
}
finalPositions.push(position);
}
// 二项分布 B(n, p) 的均值为 np, 方差为 np(1-p)
// 这里 n=levels, p=0.5 (向右的概率)
// 每次移动是 +0.5 或 -0.5。等价于计算向右次数 k，位置 = k*0.5 + (levels-k)*(-0.5) = k - levels/2
// 向右次数 k ~ B(levels, 0.5)。均值 E[k] = levels*0.5。方差 Var(k) = levels*0.5*0.5 = levels/4
// 最终位置 Position = k - levels/2
// 均值 E[Position] = E[k] - levels/2 = levels*0.5 - levels/2 = 0
// 方差 Var(Position) = Var(k) = levels/4
const mu_galton = 0;
const sigma_galton = Math.sqrt(levels / 4);
// 确定分箱数量，最好是层数+1，如果层数不多
const binCount = Math.min(levels + 1, 50);
chart2 = drawHistogram(
document.getElementById('chart2').getContext('2d'),
chart2,
finalPositions,
binCount,
`高尔顿板落点分布 (L=${levels}, B=${balls})`,
normalPDF, // Compare with Normal distribution
{ mu: mu_galton, sigma: sigma_galton }
);
}
// --- 实验 3: Box-Muller ---
function sampleNormalBoxMuller(n) {
const samples = [];
for (let i = 0; i < Math.ceil(n / 2); i++) {
const u1 = Math.random();
const u2 = Math.random();
const R = Math.sqrt(-2 * Math.log(u1));
const theta = 2 * Math.PI * u2;
samples.push(R * Math.cos(theta));
samples.push(R * Math.sin(theta));
}
return samples.slice(0, n); // Ensure exact number of samples
}
function runBoxMullerExperiment() {
const numSamples = parseInt(document.getElementById('boxmuller-samples').value);
const samples = sampleNormalBoxMuller(numSamples);
chart3 = drawHistogram(
document.getElementById('chart3').getContext('2d'),
chart3,
samples,
40, // bins
`Box-Muller 生成的 N(0,1) 样本 (N=${numSamples})`,
normalPDF, // Theoretical PDF is N(0,1)
{ mu: 0, sigma: 1 }
);
}
// Initial runs on page load
window.onload = () => {
runCLTExperiment();
runGaltonExperiment();
runBoxMullerExperiment();
};
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
