maxamundsen/kjol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 3d chart visualization

Browse Source
This commit is contained in:
Max Amundsen
2026-07-20 16:28:55 -04:00
parent b9864864a6
commit ee84f10cf0
4 changed files with 290 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
go/cmd/kjol-website/frontend/src/pages/Components.tsx
View File

@@ -1390,6 +1390,8 @@ const US_CITIES = [
function Charts() {
const [seed, setSeed] = createSignal(0);
const [threeD, setThreeD] = createSignal(false);
const [depth, setDepth] = createSignal(16);
const [tilt, setTilt] = createSignal(0.6);
// Two series over the same week. seed() reshuffles them so you can watch the SVG
// move — no teardown, no new instance, just the marks that changed.
@@ -1425,10 +1427,10 @@ function Charts() {
<Chart kind="donut" title="Traffic by source" labels={pieLabels} series={[pieData()]} height={260} threeD={threeD()} />
</div>
<div class="lg:col-span-7">
<Chart kind="area" curve="smooth" title="Requests, smoothed" labels={CHART_DAYS} series={[requests()]} height={220} />
<Chart kind="area" curve="smooth" title="Requests, smoothed" labels={CHART_DAYS} series={[requests()]} height={220} threeD={threeD()} />
</div>
<div class="lg:col-span-5">
<Chart kind="line" title="Requests & errors" labels={CHART_DAYS} series={[requests(), errors()]} height={220} />
<Chart kind="line" title="Requests & errors" labels={CHART_DAYS} series={[requests(), errors()]} height={220} threeD={threeD()} />
</div>
</div>
<div class="mt-4 flex items-center gap-3">
@@ -1441,17 +1443,59 @@ function Charts() {
<span class="text-ss text-ink-muted">
Each chart carries a <code class="font-mono">title</code>; a multi-series chart also draws a
legend. Click a legend key — say <em>Errors</em> or a donut slice — to hide it, and the scale
and marks recompute from what's left. The <code class="font-mono">threeD</code> prop extrudes
the bars and tilts the donut (line and area stay flat — depth reads as noise on a curve).
and marks recompute from what's left. The <code class="font-mono">threeD</code> prop gives
every plot a 3D grid — bars extrude, a line or area draws flat over it, the donut tilts.
</span>
</div>
</Panel>
<Panel title="3D grid — bars extrude into it, lines draw flat on the front">
<div class="grid items-center gap-6 lg:grid-cols-12">
<div class="lg:col-span-4">
<Chart kind="bar" title="Bars" labels={CHART_DAYS}
series={[requests()]} height={240} threeD depth={depth()} tilt={tilt()} />
</div>
<div class="lg:col-span-4">
<Chart kind="line" title="Lines" labels={CHART_DAYS}
series={[requests(), errors()]} height={240} threeD depth={depth()} tilt={tilt()} />
</div>
<div class="flex flex-col justify-center gap-5 lg:col-span-4">
<label class="flex flex-col gap-1.5">
<span class="flex items-center justify-between text-ss text-ink-soft">
<code class="font-mono">depth</code>
<span class="font-mono tabular-nums text-ink-muted">{depth()}px</span>
</span>
<input type="range" min="0" max="40" step="1" value={depth()}
class="w-full accent-accent"
oninput={(e) => setDepth(+e.currentTarget.value)} />
</label>
<label class="flex flex-col gap-1.5">
<span class="flex items-center justify-between text-ss text-ink-soft">
<code class="font-mono">tilt</code>
<span class="font-mono tabular-nums text-ink-muted">{tilt().toFixed(2)}</span>
</span>
<input type="range" min="0" max="1" step="0.05" value={tilt()}
class="w-full accent-accent"
oninput={(e) => setTilt(+e.currentTarget.value)} />
</label>
</div>
</div>
<p class="mt-3 text-ss text-ink-muted">
The same <code class="font-mono">depth</code> and <code class="font-mono">tilt</code> give the grid
itself perspective: a floor recedes from the value-0 baseline into a back wall. Bars extrude into
that space; a line or area stays flat on the front plane, drawn over the grid and read against the
front axis — the stroke is <em>not</em> itself extruded, since depth on a hairline reads as noise.{" "}
<code class="font-mono">tilt</code> runs 1 (head-on, near-flat) to 0 (bird's-eye);{" "}
<code class="font-mono">depth</code> is the sweep length in px.
</p>
</Panel>
<Prose>
One <code class="font-mono">kind</code> prop picks the form —{" "}
<code class="font-mono">"line" | "area" | "bar" | "pie" | "donut"</code> — and{" "}
<code class="font-mono">stacked</code>, <code class="font-mono">horizontal</code>,{" "}
<code class="font-mono">curve</code>, <code class="font-mono">threeD</code>,{" "}
<code class="font-mono">curve</code>, <code class="font-mono">threeD</code>{" "}
(with <code class="font-mono">depth</code> / <code class="font-mono">tilt</code>),{" "}
<code class="font-mono">title</code>, <code class="font-mono">palette</code> and{" "}
<code class="font-mono">valueFormat</code> refine it. The legend it draws for a multi-series or
pie/donut chart is interactive — clicking a key toggles that series or slice. The width is measured