<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ggplot-rs · WASM + DuckDB-Wasm spatial</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.min.css" />
<style>
:root {
--bg: #f7f8fa; --card: #ffffff; --ink: #1f2430; --muted: #6b7280;
--accent: #2b7a4b; --line: #e6e8ec; --shadow: 0 1px 3px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.05);
}
* { box-sizing: border-box; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 2.5rem 1.25rem 4rem; }
header h1 { font-size: 1.6rem; margin: 0 0 .35rem; letter-spacing: -.01em; }
header p { color: var(--muted); margin: 0 0 1rem; max-width: 60ch; }
.links a {
display: inline-block; text-decoration: none; color: var(--ink);
border: 1px solid var(--line); background: var(--card); border-radius: 999px;
padding: .25rem .7rem; font-size: .82rem; margin: 0 .4rem .4rem 0;
}
.links a:hover { border-color: var(--accent); color: var(--accent); }
.tabs { display: flex; gap: .4rem; margin-top: 1.5rem; border-bottom: 1px solid var(--line); }
.tab {
font: inherit; font-size: .9rem; color: var(--muted); background: none; border: 0;
border-bottom: 2px solid transparent; padding: .55rem .9rem; cursor: pointer; margin-bottom: -1px;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.tabpanel[hidden] { display: none; }
.card {
background: var(--card); border: 1px solid var(--line); border-radius: 14px;
box-shadow: var(--shadow); padding: 1.25rem 1.35rem; margin-top: 1rem;
}
.card h2 { font-size: 1.05rem; margin: 0 0 .15rem; }
.card .sub { color: var(--muted); font-size: .88rem; margin: 0 0 1rem; }
.status { color: var(--muted); font-size: .82rem; margin: .6rem 0 0; min-height: 1.1em; }
.status.busy::before {
content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .45em;
border: 2px solid var(--line); border-top-color: var(--accent); border-radius: 50%;
vertical-align: -1px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.viz { position: relative; }
#plot svg, #scatter { max-width: 100%; height: auto; display: block; }
#plot svg polygon { transition: stroke-width .06s; }
#plot svg polygon:hover { stroke: #111; stroke-width: 1.4; cursor: crosshair; }
#scatter { border: 1px solid var(--line); border-radius: 8px; cursor: crosshair; }
#glframe svg { max-width: 100%; height: auto; display: block; }
#glcanvas { position: absolute; left: 0; top: 0; cursor: crosshair; }
#eqplot { cursor: grab; user-select: none; }
#eqplot:active { cursor: grabbing; }
#eqplot svg { max-width: 100%; height: auto; display: block; }
.tip {
position: fixed; z-index: 10; pointer-events: none; opacity: 0;
transform: translate(-50%, -125%); transition: opacity .08s;
background: #111827; color: #fff; font-size: .8rem; line-height: 1.3;
padding: .3rem .5rem; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25);
white-space: nowrap;
}
.tip.on { opacity: 1; }
.btn {
font: inherit; font-size: .8rem; color: var(--ink); background: var(--card);
border: 1px solid var(--line); border-radius: 8px; padding: .15rem .55rem;
cursor: pointer; vertical-align: 2px; margin-left: .5rem;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.linked { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.linkedright { display: grid; gap: 1rem; align-content: start; }
#scatter { width: 100%; height: auto; }
#scatterbar { cursor: pointer; }
#scatterbar svg, #scatterhist svg { width: 100%; height: auto; display: block; }
@media (max-width: 760px) { .linked { grid-template-columns: 1fr; } }
#brush {
position: absolute; border: 1px solid var(--accent);
background: rgba(43,122,75,.12); pointer-events: none; display: none;
}
.controls { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem; font-size: .85rem; color: var(--muted); }
.controls label { display: inline-flex; align-items: center; gap: .4rem; }
.controls input[type=range] { vertical-align: middle; accent-color: var(--accent); }
.controls b { color: var(--ink); min-width: 1.8em; display: inline-block; }
#eqhist { flex: 1 1 360px; }
#eqtable { flex: 2 1 540px; min-width: 0; }
#eqtable .gridjs-wrapper { box-shadow: none; }
.chips { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.chip {
font: inherit; font-size: .82rem; color: var(--ink); background: var(--card);
border: 1px solid var(--line); border-radius: 999px; padding: .2rem .7rem;
cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
}
.chip .dot { width: .7em; height: .7em; border-radius: 50%; display: inline-block; }
.chip:not(.on) { opacity: .45; text-decoration: line-through; }
#legendchart svg { max-width: 100%; height: auto; display: block; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.gcell { margin: 0; border: 1px solid var(--line); border-radius: 10px; padding: .5rem; }
.gcell svg { max-width: 100%; height: auto; display: block; }
.gcell figcaption { color: var(--muted); font-size: .8rem; text-align: center; padding-top: .3rem; }
.savebar { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 2; }
.gcell:hover .savebar, #legendchart:hover .savebar { opacity: 1; }
.savebar button {
font: inherit; font-size: .7rem; color: var(--muted); background: rgba(255,255,255,.92);
border: 1px solid var(--line); border-radius: 6px; padding: .1rem .45rem; cursor: pointer;
}
.savebar button:hover { color: var(--accent); border-color: var(--accent); }
footer { color: var(--muted); font-size: .8rem; margin-top: 2.5rem; text-align: center; }
code { background: #eef0f3; padding: .05em .35em; border-radius: 4px; font-size: .9em; }
</style>
</head>
<body>
<div class="wrap">
<header>
<h1>ggplot-rs in the browser</h1>
<p>
A Rust reimplementation of ggplot2's grammar of graphics, compiled to
WebAssembly. Data comes from <strong>DuckDB-Wasm</strong> (with the
<code>spatial</code> extension) — everything below runs client-side.
</p>
<div class="links">
<a href="https://github.com/sipemu/ggplot-rs">GitHub</a>
<a href="https://crates.io/crates/ggplot-rs">crates.io</a>
<a href="https://docs.rs/ggplot-rs">docs.rs</a>
</div>
</header>
<div class="tabs" role="tablist">
<button class="tab active" data-tab="map" role="tab">World map</button>
<button class="tab" data-tab="quakes" role="tab">Earthquakes</button>
<button class="tab" data-tab="linked" role="tab">Linked views</button>
<button class="tab" data-tab="table" role="tab">Data table</button>
<button class="tab" data-tab="gallery" role="tab">Gallery</button>
<button class="tab" data-tab="webgl" role="tab">WebGL · 1M</button>
</div>
<section class="card tabpanel" id="tab-map" role="tabpanel">
<h2>World choropleth · <code>geom_sf</code>
<button id="reset" class="btn" style="display:none">⟳ World</button></h2>
<p class="sub">
DuckDB reads Natural Earth countries and <code>ST_AsText</code>s the
geometry to WKT; ggplot-rs renders an SVG. Hover a country,
<strong>click one to zoom to its continent</strong>, or
<strong>scroll to zoom and drag to pan</strong> (double-click resets).
</p>
<p id="status" class="status busy">loading…</p>
<div id="plot" class="viz"></div>
</section>
<section class="card tabpanel" id="tab-quakes" role="tabpanel" hidden>
<h2>Earthquakes, past 30 days · live USGS feed</h2>
<p class="sub">
DuckDB reads the <a href="https://earthquake.usgs.gov/earthquakes/feed/">USGS
GeoJSON feed</a> and <code>ST_AsText</code>s each quake to WKT; ggplot-rs
colours the points by magnitude over a country basemap. Hover for the
location; <strong>scroll to zoom, drag to pan, double-click to reset</strong>
(ggplot-rs re-renders with the new window — the axes update too).
</p>
<p id="status3" class="status busy">…</p>
<div id="eqplot" class="viz"></div>
</section>
<section class="card tabpanel" id="tab-linked" role="tabpanel" hidden>
<h2>Linked views · brush & drill-down</h2>
<p class="sub">
A 100k-point scatter (raster backend, nearest-point hover) linked to two
ggplot-rs charts. <strong>Drag a box</strong> to brush — the selection
highlights in the scatter, and both the per-group <strong>counts bar</strong>
and the <strong>x-marginal histogram</strong> update. Or <strong>click a
bar</strong> to isolate that group across all three views.
</p>
<p id="status2" class="status busy">…</p>
<div class="linked">
<div class="viz"><canvas id="scatter" width="720" height="520"></canvas><div id="brush"></div></div>
<div class="linkedright">
<div id="scatterbar" class="viz"></div>
<div id="scatterhist" class="viz"></div>
</div>
</div>
</section>
<section class="card tabpanel" id="tab-table" role="tabpanel" hidden>
<h2>Data table + chart · crossfilter</h2>
<p class="sub">
The USGS earthquakes in an interactive table (sort, search, paginate via
<a href="https://gridjs.io">Grid.js</a>) beside a live ggplot-rs magnitude
histogram. Drag the sliders to <strong>crossfilter both at once</strong>.
</p>
<div class="controls">
<label>Min magnitude <b id="minmagval">2.5</b>
<input id="minmag" type="range" min="2.5" max="7" step="0.1" value="2.5"></label>
<label>Bins <b id="binsval">18</b>
<input id="bins" type="range" min="6" max="30" step="1" value="18"></label>
<span id="tablecount" class="status busy" style="margin:0">loading…</span>
</div>
<div class="linked">
<div id="eqhist" class="viz"></div>
<div id="eqtable" class="viz"></div>
</div>
</section>
<section class="card tabpanel" id="tab-gallery" role="tabpanel" hidden>
<h2>Gallery · grammar of graphics</h2>
<p class="sub">
The same live earthquake data through many geoms — boxplots, violins, a
loess fit, kernel density, hex-binned and contoured 2-D density, a time
series, a polar rose, and a categorical heatmap. Every chart is one
<code>render_plot({ geom, aes, … })</code> call into ggplot-rs; hover any
of them, and use the SVG/PNG buttons to download.
</p>
<p id="gallerystatus" class="status busy">…</p>
<div id="legendchips" class="chips"></div>
<div id="legendchart" class="viz" style="margin-bottom:1.25rem"></div>
<div id="gallery" class="gallery"></div>
</section>
<section class="card tabpanel" id="tab-webgl" role="tabpanel" hidden>
<h2>A million points · WebGL</h2>
<p class="sub">
1,000,000 points drawn on the GPU. ggplot-rs renders the axes frame and
hands JS the data↔pixel mapping (<code>scatter_frame</code>); a WebGL
shader projects and draws every point on a transparent overlay canvas.
Hover for the nearest point.
</p>
<p id="glstatus" class="status busy">…</p>
<div id="glwrap" class="viz">
<div id="glframe"></div>
<canvas id="glcanvas"></canvas>
</div>
</section>
<footer>Built with ggplot-rs · SVG (hover) + raster (large-N) backends, no server.</footer>
</div>
<div id="tip" class="tip"></div>
<script type="module" src="./main.js"></script>
</body>
</html>