mm/dr-sandbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

restyle sec 0 + incl fig

Browse Source
This commit is contained in:
Michael Pilosov 2026-04-22 10:57:24 -06:00
parent bb46e5a18d
commit 86e11a6a11
2 changed files with 208 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
app/web/static/style.css
View File

@ -656,6 +656,20 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
.dataset-picker.intro .picker-toggle::before { content: "[ read ]"; } .dataset-picker.intro .picker-toggle::before { content: "[ read ]"; }
.dataset-picker.intro[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); } .dataset-picker.intro[open] .picker-toggle::before { content: "[ collapse ]"; color: var(--accent); }
.intro-body {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: 2.6rem;
align-items: center;
}
@media (max-width: 940px) {
.intro-body {
grid-template-columns: 1fr;
gap: 1.4rem;
}
.intro-prose { margin-inline: auto; }
}
.intro-prose { .intro-prose {
max-width: 72ch; max-width: 72ch;
color: var(--ink); color: var(--ink);
@ -683,6 +697,88 @@ button.submit:disabled { background: var(--faint); border-color: var(--faint); c
} }
.intro-prose em { font-style: italic; } .intro-prose em { font-style: italic; }
.intro-figure {
margin: 0;
padding: 0;
max-width: 560px;
justify-self: center;
width: 100%;
}
.intro-schema {
width: 100%;
height: auto;
display: block;
}
.intro-schema .frame {
fill: none;
stroke: var(--rule-2);
stroke-width: 1;
}
.intro-schema .frame.depth { opacity: 0.35; }
.intro-schema .axes line {
stroke: var(--faint);
stroke-width: 1;
}
.intro-schema .dots circle {
fill: var(--ink);
opacity: 0.65;
}
.intro-schema .t-hint {
font-family: var(--mono);
font-size: 10px;
fill: var(--faint);
letter-spacing: 0.04em;
}
.intro-schema .arrow-line,
.intro-schema .arrow-head {
stroke: var(--ink);
stroke-width: 1.4;
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
}
.intro-schema .phi {
font-family: var(--serif);
font-style: italic;
font-size: 22px;
fill: var(--accent);
}
.intro-schema .arrow-sub {
font-family: var(--serif);
font-style: italic;
font-size: 11px;
fill: var(--mute);
}
.intro-schema .trajs polyline {
fill: none;
stroke: currentColor;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
}
.intro-schema .dot-start circle {
fill: none;
stroke: currentColor;
stroke-width: 1.2;
}
.intro-schema .dot-end circle {
fill: currentColor;
}
.intro-schema .dots-hi circle {
fill: currentColor;
}
/* Three tracked points, colored identically on input and on their projected
trajectory — currentColor on every themed element picks this up. */
.intro-schema .track-a { color: var(--accent); }
.intro-schema .track-b { color: var(--alarm); }
.intro-schema .track-c { color: var(--warm); }
.intro-schema .cap text {
font-family: var(--serif);
font-style: italic;
font-size: 11px;
fill: var(--mute);
}
.dataset-picker .picker-body { .dataset-picker .picker-body {
padding: 0.4rem 2.2rem 1.6rem; padding: 0.4rem 2.2rem 1.6rem;
max-width: 1440px; max-width: 1440px;

145
app/web/templates/index.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" /> <meta name="viewport" content="width=device-width,initial-scale=1" />
<title>embedding notebook — web1</title> <title>embedding notebook — web1</title>
<link rel="stylesheet" href="/static/style.css?v=7" /> <link rel="stylesheet" href="/static/style.css?v=11" />
<script src="https://unpkg.com/htmx.org@2.0.4"></script> <script src="https://unpkg.com/htmx.org@2.0.4"></script>
<script type="importmap"> <script type="importmap">
{ {
@ -52,38 +52,117 @@
</summary> </summary>
<div class="picker-body"> <div class="picker-body">
<div class="intro-prose"> <div class="intro-body">
<p> <div class="intro-prose">
<strong>What this is.</strong> Dimensionality reduction is a workhorse <p>
for both exploratory visualization and downstream prediction, yet the <strong>What this is.</strong> Dimensionality reduction is a workhorse
stability of its output under small perturbations of the input is for both exploratory visualization and downstream prediction, yet the
rarely examined directly. This notebook takes a narrow, empirical stability of its output under small perturbations of the input is
approach: a three-dimensional point cloud (§&nbsp;1) is perturbed by a rarely examined directly. This notebook takes a narrow, empirical
controlled amount at each of a short sequence of timesteps, the approach: a three-dimensional point cloud (§&nbsp;1) is perturbed by a
selected reducer (§&nbsp;2) is applied independently to every snapshot, controlled amount at each of a short sequence of timesteps, the
and the resulting trajectory of two-dimensional embeddings is recorded. selected reducer (§&nbsp;2) is applied independently to every snapshot,
</p> and the resulting trajectory of two-dimensional embeddings is recorded.
<p> </p>
<strong>What it measures.</strong> Two stability views are logged <p>
alongside each run and plotted on the <strong>What it measures.</strong> Two stability views are logged
<a href="/metrics">metrics page</a>. Per-timestep travel — alongside each run and plotted on the
‖&thinsp;y(t)&thinsp;&minus;&thinsp;y(t&minus;1)&thinsp;‖ — <a href="/metrics">metrics page</a>. Per-timestep travel —
captures how much the 2-D layout moves between consecutive frames. ‖&thinsp;y(t)&thinsp;&minus;&thinsp;y(t&minus;1)&thinsp;‖ —
<em>k</em>NN retention captures how much of the input-space neighborhood captures how much the 2-D layout moves between consecutive frames.
graph survives projection. Together they separate reducers that are <em>k</em>NN retention captures how much of the input-space neighborhood
globally stable but locally noisy from those with the opposite failure graph survives projection. Together they separate reducers that are
mode. globally stable but locally noisy from those with the opposite failure
</p> mode.
<p> </p>
<strong>Why this matters.</strong> A reducer that looks well-behaved on <p>
a single snapshot is not automatically the right tool for a streaming <strong>Why this matters.</strong> A reducer that looks well-behaved on
or longitudinal setting. Used as the substrate for a visualization, a single snapshot is not automatically the right tool for a streaming
frame-to-frame motion will read as change the user did not request; or longitudinal setting. Used as the substrate for a visualization,
used as a feature-extraction step inside a classification pipeline, frame-to-frame motion will read as change the user did not request;
drift between training and inference will quietly erode accuracy. The used as a feature-extraction step inside a classification pipeline,
aim here is to build intuition for those regimes before committing the drift between training and inference will quietly erode accuracy. The
reducer to either role. aim here is to build intuition for those regimes before committing the
</p> reducer to either role.
</p>
</div>
<figure class="intro-figure">
<svg class="intro-schema" viewBox="0 0 480 230" xmlns="http://www.w3.org/2000/svg"
role="img" aria-label="schematic: 3-D perturbed snapshots reduced independently to a 2-D trajectory">
<!-- LEFT: stack of snapshots -->
<g>
<rect class="frame depth" x="40" y="55" width="130" height="130"/>
<rect class="frame depth" x="30" y="45" width="130" height="130"/>
<rect class="frame" x="20" y="35" width="130" height="130"/>
<!-- tiny axis triad in the front frame -->
<g class="axes" transform="translate(32 156)">
<line x1="0" y1="0" x2="14" y2="0"/>
<line x1="0" y1="0" x2="0" y2="-14"/>
<line x1="0" y1="0" x2="-9" y2="7"/>
</g>
<g class="dots">
<circle cx="72" cy="112" r="2.1"/>
<circle cx="86" cy="60" r="2.1"/>
<circle cx="100" cy="92" r="2.1"/>
<circle cx="62" cy="142" r="2.1"/>
<circle cx="112" cy="124" r="2.1"/>
<circle cx="118" cy="54" r="2.1"/>
<circle cx="134" cy="148" r="2.1"/>
</g>
<g class="dots-hi">
<circle class="track-a" cx="54" cy="72" r="3.2"/>
<circle class="track-b" cx="132" cy="80" r="3.2"/>
<circle class="track-c" cx="90" cy="134" r="3.2"/>
</g>
<text class="t-hint" x="150" y="30" text-anchor="end">t = 0, 1, … T</text>
</g>
<!-- ARROW + reducer label -->
<g transform="translate(182 100)">
<line class="arrow-line" x1="0" y1="0" x2="92" y2="0"/>
<polyline class="arrow-head" points="84,-5 94,0 84,5" fill="none"/>
<text class="phi" x="47" y="-12" text-anchor="middle">φ</text>
<text class="arrow-sub" x="47" y="22" text-anchor="middle">per snapshot</text>
</g>
<!-- RIGHT: single 2-D frame with trajectories -->
<g>
<rect class="frame" x="290" y="35" width="170" height="130"/>
<g class="trajs">
<polyline class="track-a" points="308,72 316,88 326,106 336,124"/>
<polyline class="track-b" points="370,52 380,68 390,82 398,100"/>
<polyline class="track-c" points="430,152 428,132 430,108 426,84"/>
</g>
<g class="dot-start">
<circle class="track-a" cx="308" cy="72" r="3"/>
<circle class="track-b" cx="370" cy="52" r="3"/>
<circle class="track-c" cx="430" cy="152" r="3"/>
</g>
<g class="dot-end">
<circle class="track-a" cx="336" cy="124" r="2.9"/>
<circle class="track-b" cx="398" cy="100" r="2.9"/>
<circle class="track-c" cx="426" cy="84" r="2.9"/>
</g>
<g class="dots">
<circle cx="316" cy="112" r="2.1"/>
<circle cx="352" cy="136" r="2.1"/>
<circle cx="358" cy="78" r="2.1"/>
<circle cx="392" cy="58" r="2.1"/>
<circle cx="412" cy="118" r="2.1"/>
<circle cx="440" cy="140" r="2.1"/>
<circle cx="348" cy="158" r="2.1"/>
<circle cx="380" cy="142" r="2.1"/>
</g>
</g>
<!-- captions -->
<g class="cap">
<text x="85" y="200" text-anchor="middle">snapshots · Xₜ ⊂ ℝ³</text>
<text x="375" y="200" text-anchor="middle">embedded trajectory · Yₜ ⊂ ℝ²</text>
</g>
</svg>
</figure>
</div> </div>
</div> </div>
</details> </details>