Seurat

Scientific visualization built on a single idea: everything is a scatter plot.

A line plot, a pseudocolour map, a 3-D surface — they're all just points placed in a space, with visual properties (position, colour, size, opacity…) driven by data. Seurat is an editor for that mapping: drag any data dimension onto any visual channel and see what falls out.

The idea

There are two worlds:

• Data (D) — your dataset's coordinates (lat, depth, time…) and values (temperature, porosity…), shown in orange.
• Visual (V) — the scene's channels: x, y, z, colour R/G/B/A, size, blur, jitter, …, shown in blue.

Drag a data item onto a visual channel to map it. Nothing is special — any D can drive any V, even in strange ways. A scatter map is x→x, y→y, value→colour; lift the value onto z and it becomes a manifold; the same engine does both.

What it can do today

• Load Zarr v3 datasets — a bundled sample, or open a local .zarr folder (no upload; read straight from disk in Chrome).
• Map coordinates/values to position, colour (independent R/G/B, or a cubehelix colourmap with live start/rots/hue/gamma knobs), size, opacity, blur, and jitter (the last three for encoding uncertainty).
• Per-channel distribution histograms, clipping (incl. 95/97/99th percentile), and transforms (log / sqrt).
• Binning into an aggregated heatmap grid (mean/max/min), to handle dense data and overplotting.
• Fog, a red/cyan 3-D (anaglyph) view, and independent or shared (true-aspect) axis scaling.

Quick start

Requires Node ≥ 20.

npm install
npm run dev

Open the printed localhost URL in Chrome.

Getting some data

The app reads Zarr stores from public/data/ (git-ignored). Generate the bundled samples from the sibling zarr-tmp project:

cd ../zarr-tmp
uv run python make_map.py   # → public/data/surface.zarr  (a 2-D map)
uv run python make_log.py   # → public/data/wireline_log.zarr  (a 1-D log)

Or click Open folder… in the app to load any consolidated Zarr v3 store of your own.

Using it

1. Pick a dataset (or Open folder…). Its coordinates and values appear in the orange Data column.
2. Drag a data item onto a channel in the blue Visual column. The view updates live; the channel shows the variable, and the data chip shades to show it's in use.
3. Click a bound channel to open its mapping view — histogram, clip bounds, transform. Drag the colourmap swatch's source to colour by a variable.
4. Toggle binning for a heatmap; orbit/scroll to navigate; try fog and 3-D.

Status

Early and evolving. The design rationale lives in OUTLINE.organized.md; the roadmap and what's done is in PLAN.md.

Development

Stack and the reasons behind it are documented in OUTLINE §7. In short: Vite + Svelte + TypeScript, Three.js for rendering, zarrita.js for Zarr, fully client-side. Common commands:

npm run dev      # dev server with HMR
npm run build    # production build
npm run check    # svelte-check + tsc type check