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 .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;
|
||||||
|
|||||||
@ -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,6 +52,7 @@
|
|||||||
</summary>
|
</summary>
|
||||||
|
|
||||||
<div class="picker-body">
|
<div class="picker-body">
|
||||||
|
<div class="intro-body">
|
||||||
<div class="intro-prose">
|
<div class="intro-prose">
|
||||||
<p>
|
<p>
|
||||||
<strong>What this is.</strong> Dimensionality reduction is a workhorse
|
<strong>What this is.</strong> Dimensionality reduction is a workhorse
|
||||||
@ -85,6 +86,84 @@
|
|||||||
reducer to either role.
|
reducer to either role.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
||||||
</details>
|
</details>
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user