Skip to content

Commit 87ef634

Browse files
nipunbatranipunbatra
committed
2 parents bc8ec18 + 21dfebe commit 87ef634

File tree

1 file changed

+107
-0
lines changed

1 file changed

+107
-0
lines changed

‎2d-gaussian.html

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Bivariate Gaussian Visualization</title>
7+
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
8+
</head>
9+
<body>
10+
<div>
11+
<label for="mu_0">μ₀:</label>
12+
<input type="range" id="mu_0" min="-2" max="2" step="0.1" value="0">
13+
<span id="mu_0_value">0.0</span>
14+
</div>
15+
<div>
16+
<label for="mu_1">μ₁:</label>
17+
<input type="range" id="mu_1" min="-2" max="2" step="0.1" value="0">
18+
<span id="mu_1_value">0.0</span>
19+
</div>
20+
<div>
21+
<label for="cov_00">σ₀₀:</label>
22+
<input type="range" id="cov_00" min="0.1" max="2" step="0.1" value="1">
23+
<span id="cov_00_value">1.0</span>
24+
</div>
25+
<div>
26+
<label for="cov_01">σ₀₁:</label>
27+
<input type="range" id="cov_01" min="-1" max="1" step="0.1" value="0.5">
28+
<span id="cov_01_value">0.5</span>
29+
</div>
30+
<div>
31+
<label for="cov_11">σ₁₁:</label>
32+
<input type="range" id="cov_11" min="0.1" max="2" step="0.1" value="1">
33+
<span id="cov_11_value">1.0</span>
34+
</div>
35+
<div id="plotly-plot"></div>
36+
<script>
37+
const plotDiv = document.getElementById('plotly-plot');
38+
const mu_0_range = document.getElementById('mu_0');
39+
const mu_1_range = document.getElementById('mu_1');
40+
const cov_00_range = document.getElementById('cov_00');
41+
const cov_01_range = document.getElementById('cov_01');
42+
const cov_11_range = document.getElementById('cov_11');
43+
const mu_0_value = document.getElementById('mu_0_value');
44+
const mu_1_value = document.getElementById('mu_1_value');
45+
const cov_00_value = document.getElementById('cov_00_value');
46+
const cov_01_value = document.getElementById('cov_01_value');
47+
const cov_11_value = document.getElementById('cov_11_value');
48+
49+
function updatePlot() {
50+
const mu_0 = parseFloat(mu_0_range.value);
51+
const mu_1 = parseFloat(mu_1_range.value);
52+
const cov_00 = parseFloat(cov_00_range.value);
53+
const cov_01 = parseFloat(cov_01_range.value);
54+
const cov_11 = parseFloat(cov_11_range.value);
55+
56+
mu_0_value.textContent = mu_0.toFixed(1);
57+
mu_1_value.textContent = mu_1.toFixed(1);
58+
cov_00_value.textContent = cov_00.toFixed(1);
59+
cov_01_value.textContent = cov_01.toFixed(1);
60+
cov_11_value.textContent = cov_11.toFixed(1);
61+
62+
const N = 200;
63+
const theta_0 = Array.from({ length: N }, (_, i) => -3 + (i * 6) / (N - 1));
64+
const theta_1 = Array.from({ length: N }, (_, i) => -3 + (i * 6) / (N - 1));
65+
66+
const density = new Array(N).fill(null).map((_, i) =>
67+
theta_0.map((_, j) => {
68+
const x = theta_0[j];
69+
const y = theta_1[i];
70+
const diff = [x - mu_0, y - mu_1];
71+
const invCov = [[1 / cov_00, cov_01 / cov_00], [cov_01 / cov_00, cov_11 / cov_00]];
72+
const exponent = -0.5 * (
73+
(diff[0] * diff[0] * invCov[0][0] + 2 * diff[0] * diff[1] * invCov[0][1] + diff[1] * diff[1] * invCov[1][1])
74+
);
75+
return Math.exp(exponent) / (2 * Math.PI * Math.sqrt(cov_00 * cov_11));
76+
})
77+
);
78+
79+
const data = [{
80+
type: 'contour',
81+
z: density,
82+
x: theta_0,
83+
y: theta_1,
84+
colorscale: 'Viridis',
85+
contours: { showlabels: true }
86+
}];
87+
88+
const layout = {
89+
title: `Bivariate Gaussian Contour\nμ = [${mu_0}, ${mu_1}], Covariance = [[${cov_00}, ${cov_01}], [${cov_01}, ${cov_11}]]`,
90+
xaxis: { title: 'θ₀', scaleanchor: 'y', scaleratio: 1 },
91+
yaxis: { title: 'θ₁' },
92+
aspectratio: { x: 1, y: 1 }
93+
};
94+
95+
Plotly.newPlot(plotDiv, data, layout);
96+
}
97+
98+
mu_0_range.addEventListener('input', updatePlot);
99+
mu_1_range.addEventListener('input', updatePlot);
100+
cov_00_range.addEventListener('input', updatePlot);
101+
cov_01_range.addEventListener('input', updatePlot);
102+
cov_11_range.addEventListener('input', updatePlot);
103+
104+
updatePlot();
105+
</script>
106+
</body>
107+
</html>

0 commit comments

Comments
 (0)