forked from chi-feng/mcmc-demo
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathnotes.html
More file actions
141 lines (136 loc) · 8.24 KB
/
Copy pathnotes.html
File metadata and controls
141 lines (136 loc) · 8.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Field Notes — The Sampling Gallery</title>
<meta name="description" content="Field notes for every sampler in the gallery: what it does, what to watch while it runs, and which knobs matter.">
<link rel="icon" type="image/svg+xml" href="favicon.svg">
<meta property="og:type" content="website">
<meta property="og:title" content="Field Notes — The Sampling Gallery">
<meta property="og:description" content="Field notes for every sampler in the gallery: what it does, what to watch while it runs, and which knobs matter.">
<meta property="og:image" content="https://chris-nemeth.github.io/sampling-gallery/docs/og-card.png">
<meta property="og:url" content="https://chris-nemeth.github.io/sampling-gallery/notes.html">
<meta name="twitter:card" content="summary_large_image">
<link rel="stylesheet" href="styles.css">
<style>
body { background: var(--color-bg); margin: 0; font-family: var(--font-body); }
.wrap { max-width: 760px; margin: 0 auto; padding: 0 32px 110px; }
a { color: var(--color-accent); } a:hover { color: var(--color-accent-700); }
header .rule-top { border-top: 6px solid var(--color-text); border-bottom: 2px solid var(--color-text); }
header .strap { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
h1 { font-size: 52px; line-height: 1; letter-spacing: -.02em; text-align: center; margin: 20px 0 12px; }
header .rule-bot { border-top: 1px solid var(--color-text); border-bottom: 6px solid var(--color-text); }
header .rule-bot p { text-align: center; font-size: 14px; font-style: italic; color: var(--color-neutral-800); margin: 0; padding: 7px 0; }
nav.toc { columns: 2; gap: 40px; margin: 34px 0 10px; }
nav.toc .group { break-inside: avoid; margin-bottom: 18px; }
nav.toc .g-name { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 6px; }
nav.toc a { display: block; font-size: 14px; padding: 2px 0; text-decoration: none; }
nav.toc a:hover { text-decoration: underline; }
article.note { border-top: 2px solid var(--color-text); margin-top: 44px; padding-top: 6px; }
article.note .a-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
article.note .a-head .open-link { font-size: 12.5px; white-space: nowrap; }
article.note h1 { font-size: 30px; text-align: left; margin: 10px 0 4px; }
article.note h2 { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-700); margin: 22px 0 8px; border-top: 1px solid var(--color-divider); padding-top: 12px; }
article.note p, article.note li { font-size: 15px; line-height: 1.6; color: var(--color-neutral-800); }
article.note ul { padding-left: 22px; }
article.note strong { font-family: var(--font-heading); }
.missing { color: var(--color-neutral-500); font-style: italic; }
footer { margin-top: 70px; border-top: 2px solid var(--color-text); padding-top: 12px; font-size: 13px; color: var(--color-neutral-600); }
@media (max-width: 640px) {
nav.toc { columns: 1; }
h1 { font-size: 38px; }
.wrap { padding-left: 20px; padding-right: 20px; }
header .strap { flex-wrap: wrap; justify-content: center; gap: 2px 12px; }
}
</style>
</head>
<body>
<div class="wrap">
<header style="padding-top:38px">
<div class="rule-top">
<div class="strap"><span>Interactive Statistics</span><span style="color:var(--color-neutral-600)">Notes on every sampler in the gallery</span><span><a href="index.html" style="text-decoration:none">← The Gallery</a></span></div>
</div>
<h1>Field Notes</h1>
<div class="rule-bot"><p>What each sampler does, what to watch while it runs, and which knobs matter — companion notes to the interactive gallery.</p></div>
</header>
<nav class="toc" id="toc"></nav>
<div id="notes"></div>
<footer>Part of <a href="index.html">The Sampling Gallery</a>. Notes are plain markdown — corrections and improvements welcome on <a href="https://github.com/chris-nemeth/sampling-gallery">GitHub</a>.</footer>
</div>
<script src="lib/marked.min.js"></script>
<script>
// keep ids and grouping in sync with SAMPLERS in sampler.html
const NOTES = [
{ group: "Independent Monte Carlo", id: "RejectionSampling", name: "Rejection Sampling" },
{ group: "Independent Monte Carlo", id: "ImportanceSampling", name: "Importance Sampling" },
{ group: "Independent Monte Carlo", id: "QuasiMonteCarlo", name: "Quasi-Monte Carlo" },
{ group: "MCMC", id: "RandomWalkMH", name: "Random Walk Metropolis" },
{ group: "MCMC", id: "AdaptiveMH", name: "Adaptive Metropolis–Hastings" },
{ group: "MCMC", id: "HamiltonianMC", name: "Hamiltonian Monte Carlo" },
{ group: "MCMC", id: "NUTS", name: "No-U-Turn Sampler" },
{ group: "MCMC", id: "RiemannianHMC", name: "Riemannian-Manifold HMC" },
{ group: "MCMC", id: "AAPS", name: "Apogee-to-Apogee Path Sampler" },
{ group: "MCMC", id: "MALA", name: "Metropolis-Adjusted Langevin" },
{ group: "MCMC", id: "Barker", name: "Barker Proposal" },
{ group: "MCMC", id: "SliceSampling", name: "Slice Sampling" },
{ group: "MCMC", id: "EllipticalSlice", name: "Elliptical Slice Sampling" },
{ group: "MCMC", id: "GibbsSampling", name: "Gibbs Sampling" },
{ group: "MCMC", id: "H2MC", name: "Hessian–Hamiltonian Monte Carlo" },
{ group: "MCMC", id: "ULA", name: "Unadjusted Langevin Algorithm" },
{ group: "MCMC", id: "SGLD", name: "Stochastic Gradient Langevin Dynamics" },
{ group: "MCMC", id: "FUSE-ULA", name: "Tuning-Free ULA (FUSE)" },
{ group: "Ensemble & multimodal", id: "EnsembleMCMC", name: "Ensemble MCMC" },
{ group: "Ensemble & multimodal", id: "ParallelTempering", name: "Parallel Tempering" },
{ group: "Sequential & annealed", id: "TemperedSMC", name: "Tempered SMC / Annealed IS" },
{ group: "Sequential & annealed", id: "NestedSampling", name: "Nested Sampling" },
{ group: "Non-reversible", id: "ZigZag", name: "Zig-Zag Sampler" },
{ group: "Non-reversible", id: "BouncyParticle", name: "Bouncy Particle Sampler" },
{ group: "Non-reversible", id: "SGPDMP", name: "Stochastic-Gradient PDMP" },
{ group: "Particle methods", id: "SVGD", name: "Stein Variational Gradient Descent" },
{ group: "Particle methods", id: "CoinSVGD", name: "Coin SVGD" },
{ group: "Particle methods", id: "WassersteinParticleDescent", name: "Wasserstein Particle Descent" },
{ group: "Particle methods", id: "SPOS", name: "Stochastic Particle-Optimization Sampling" },
];
// table of contents, grouped
const toc = document.getElementById("toc");
let g = null, gEl = null;
for (const n of NOTES) {
if (n.group !== g) {
g = n.group;
gEl = document.createElement("div");
gEl.className = "group";
gEl.innerHTML = '<div class="g-name"></div>';
gEl.firstChild.textContent = g;
toc.appendChild(gEl);
}
const a = document.createElement("a");
a.href = "#" + n.id;
a.textContent = n.name;
gEl.appendChild(a);
}
// articles: placeholders in order, filled as fetches resolve; honour any
// #anchor deep link only once every note has loaded, so heights are final
const host = document.getElementById("notes");
let pending = NOTES.length;
function noteDone() {
if (--pending > 0 || !location.hash) return;
const el = document.getElementById(location.hash.slice(1));
if (el) el.scrollIntoView();
}
for (const n of NOTES) {
const art = document.createElement("article");
art.className = "note";
art.id = n.id;
art.innerHTML =
'<div class="a-head"><span></span><a class="open-link" href="sampler.html?algorithm=' +
n.id + '">run it in the gallery →</a></div><div class="a-body"><p class="missing">Loading…</p></div>';
host.appendChild(art);
fetch("notes/" + n.id + ".md")
.then((r) => (r.ok ? r.text() : Promise.reject()))
.then((md) => { art.querySelector(".a-body").innerHTML = marked.parse(md); noteDone(); })
.catch(() => { art.querySelector(".a-body").innerHTML = '<p class="missing">Notes for this sampler are still being written.</p>'; noteDone(); });
}
</script>
</body>
</html>