restyle sec 0 + incl fig
This commit is contained in:
Michael Pilosov
parent
bb46e5a18d
commit
86e11a6a11
@ -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[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 {
|
||||
max-width: 72ch;
|
||||
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-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 {
|
||||
padding: 0.4rem 2.2rem 1.6rem;
|
||||
max-width: 1440px;
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||
<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 type="importmap">
|
||||
{
|
||||
@ -52,38 +52,117 @@
|
||||
</summary>
|
||||
|
||||
<div class="picker-body">
|
||||
<div class="intro-prose">
|
||||
<p>
|
||||
<strong>What this is.</strong> Dimensionality reduction is a workhorse
|
||||
for both exploratory visualization and downstream prediction, yet the
|
||||
stability of its output under small perturbations of the input is
|
||||
rarely examined directly. This notebook takes a narrow, empirical
|
||||
approach: a three-dimensional point cloud (§ 1) is perturbed by a
|
||||
controlled amount at each of a short sequence of timesteps, the
|
||||
selected reducer (§ 2) is applied independently to every snapshot,
|
||||
and the resulting trajectory of two-dimensional embeddings is recorded.
|
||||
</p>
|
||||
<p>
|
||||
<strong>What it measures.</strong> Two stability views are logged
|
||||
alongside each run and plotted on the
|
||||
<a href="/metrics">metrics page</a>. Per-timestep travel —
|
||||
‖ y(t) − y(t−1) ‖ —
|
||||
captures how much the 2-D layout moves between consecutive frames.
|
||||
<em>k</em>NN retention captures how much of the input-space neighborhood
|
||||
graph survives projection. Together they separate reducers that are
|
||||
globally stable but locally noisy from those with the opposite failure
|
||||
mode.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Why this matters.</strong> A reducer that looks well-behaved on
|
||||
a single snapshot is not automatically the right tool for a streaming
|
||||
or longitudinal setting. Used as the substrate for a visualization,
|
||||
frame-to-frame motion will read as change the user did not request;
|
||||
used as a feature-extraction step inside a classification pipeline,
|
||||
drift between training and inference will quietly erode accuracy. The
|
||||
aim here is to build intuition for those regimes before committing the
|
||||
reducer to either role.
|
||||
</p>
|
||||
<div class="intro-body">
|
||||
<div class="intro-prose">
|
||||
<p>
|
||||
<strong>What this is.</strong> Dimensionality reduction is a workhorse
|
||||
for both exploratory visualization and downstream prediction, yet the
|
||||
stability of its output under small perturbations of the input is
|
||||
rarely examined directly. This notebook takes a narrow, empirical
|
||||
approach: a three-dimensional point cloud (§ 1) is perturbed by a
|
||||
controlled amount at each of a short sequence of timesteps, the
|
||||
selected reducer (§ 2) is applied independently to every snapshot,
|
||||
and the resulting trajectory of two-dimensional embeddings is recorded.
|
||||
</p>
|
||||
<p>
|
||||
<strong>What it measures.</strong> Two stability views are logged
|
||||
alongside each run and plotted on the
|
||||
<a href="/metrics">metrics page</a>. Per-timestep travel —
|
||||
‖ y(t) − y(t−1) ‖ —
|
||||
captures how much the 2-D layout moves between consecutive frames.
|
||||
<em>k</em>NN retention captures how much of the input-space neighborhood
|
||||
graph survives projection. Together they separate reducers that are
|
||||
globally stable but locally noisy from those with the opposite failure
|
||||
mode.
|
||||
</p>
|
||||
<p>
|
||||
<strong>Why this matters.</strong> A reducer that looks well-behaved on
|
||||
a single snapshot is not automatically the right tool for a streaming
|
||||
or longitudinal setting. Used as the substrate for a visualization,
|
||||
frame-to-frame motion will read as change the user did not request;
|
||||
used as a feature-extraction step inside a classification pipeline,
|
||||
drift between training and inference will quietly erode accuracy. The
|
||||
aim here is to build intuition for those regimes before committing the
|
||||
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>
|
||||
</details>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user