take a detour from your usual 2D embedding visualization → dtour.dev
dtour is a visualization tool for exploring high-dimensional data through guided, manual, and grand tours.
- ⚡ Fast: built with WebGPU, Web Workers, and OffscreenCanvas to scale to millions of data points
- 🔄 Flexible: explore data with the web app, integrate the viewer in your own React app, or use as a Python widget for data analysis
- 🖱️ Fingertrippy: play and rewind tours, manipulate axes, or get hypnotized by an endless grand tour animation
A single 2D projection can only capture a fraction of high-dimensional structure. That's not a flaw of the embedding, it's a constraint of two axes. dtour lets you fly through multiple projections so you can build a sense for the full space.
dtour comes in three flavors:
- Web: drop a file into dtour.dev for a quick look
- Python: a widget for Marimo and Jupyter notebooks to help during data analysis
- JavaScript: a React component to build your own app around high-dimensional data
If you're unsure which tastes best, add the dtour skill to your AI coding agent with npx skills add flekschas/dtour and ask it.
Go to https://dtour.dev and drop a Parquet or Arrow file into the app. That's it 🚀
dtour has three viewing modes:
- Guided — play through a precomputed tour of optimized 2D projections. Use the circular slider to scrub through keyframes, or hit play and watch the data rotate between views.
- Manual — drag individual axes to build your own projection from scratch. Good for hypothesis-driven exploration when you know which dimensions matter.
- Grand — sit back and watch an infinite random tour through projection space. Useful for serendipitous discovery (or as a screensaver).
Tip
See the Python package for details and several example notebooks.
dtour integrates with Jupyter and Marimo notebooks through anywidget.
pip install dtourLoad a dataset and instantiate the widget:
import dtour
import polars as pl
df = pl.read_parquet("https://github.com/uwdata/mosaic/raw/main/data/athletes.parquet")
dtour.Widget(data=df)That's the simplest hello-world example to get started and visualize a high-dimensional dataset. For something more interesting, compute a PCA tour over the numeric columns and color points by a category:
import dtour
import polars as pl
df = pl.read_parquet(
"https://github.com/uwdata/mosaic/raw/main/data/athletes.parquet"
).drop_nulls(["height", "weight"])
# A little tour cycles through consecutive pairs of principal components.
features = ["height", "weight", "gold", "silver", "bronze"]
tour = dtour.little_tour(df.select(features))
# Color points by a categorical column, with a matching legend color map.
dtour.Widget(
data=df,
tour=tour,
point_color_by="sex",
color_map=dtour.build_color_map(sorted(df["sex"].unique()), theme="dark"),
)Swap little_tour for umap_little_tour (needs pip install "dtour[umap]") to tour a UMAP embedding instead.
For more details see the Python package and example notebooks.
Tip
dtour's frontend is split into three packages: @dtour/scatter (the framework-agnostic WebGPU/WebGL2 rendering engine), @dtour/viewer (the React component with the full tour UI), and webapp (the app behind dtour.dev).
To get started, you'd likely want the use the React component. Install it and import its styles:
npm install @dtour/viewerimport { Dtour } from "@dtour/viewer";
import "@dtour/viewer/dist/viewer.css";
<Dtour data={arrowBuffer} />That renders the full viewer for an Arrow IPC or Parquet ArrayBuffer, auto-generating a tour. For something more interesting, pass precomputed keyframes, color points by a column, and react to selections:
import { Dtour } from "@dtour/viewer";
import "@dtour/viewer/dist/viewer.css";
<Dtour
data={arrowBuffer}
keyframes={keyframes} // Float32Array[] of p×2 column-major bases
colorMap={{ setosa: "#0072b2", versicolor: "#009e73", virginica: "#e69f00" }}
spec={{ pointColorBy: "species", tourPlaying: true }}
onPointSelectionChange={(mask) => console.log(mask)}
/>Need just the renderer without React? Use @dtour/scatter directly. See each package's README for the full API: @dtour/scatter, @dtour/viewer, and webapp.
Teach your coding agent (Claude Code, Codex, Cursor, …) how to pick a tour and use dtour with the dtour skill:
npx skills add flekschas/dtourTo let Claude show tours right in the chat, add dtour's MCP server and ask, e.g., "Show me a UMAP tour of ~/data/cells.csv colored by cell_type". In Claude Desktop, download dtour.mcpb and open it. In Claude Code, install the plugin, which bundles the skill and the server and needs uv:
/plugin install dtour --marketplace flekschas/dtour
See the Python README for details.
Open an example on dtour.dev:
| Example | Points × dims | Data |
|---|---|---|
| Gaussian Blobs | 500K × 5 | Five Gaussian clusters, generated in the browser |
| Linked Rings | 500K × 4 | Two interlocking rings, generated in the browser |
| Lorenz Attractor | 1M × 4 | The Lorenz-Stenflo chaotic attractor, generated in the browser |
| Fashion MNIST | 70K × 8 | Product images in four 2D embeddings, from LE-like to t-SNE |
| Handwritten Digits | 1.8K × 64 | A PCA tour of the pixels next to a 2D UMAP, with linked selections and the digit on hover |
| News Headlines | 204K × 4 | HuffPost headlines in a supervised 4D UMAP |
| Single Cell Proteomics | 345K × 9 | Tumor immune cells across 9 protein markers |
| Single Cell RNA-seq | 276K × 8 | Developing mouse brain cells in a PCA tour |
| Image Caption CLIP | 49K × 10 | Joint CLIP embeddings of images and captions |
| arXiv papers | 3M × 8 | Papers in 2D UMAPs of four embedding models |
A link can also show any files side by side. This one shows the digits with a view per file and links their selections with the same link id:
https://dtour.dev/?url=https://data.dtour.dev/digits-pca-tour.pq&views=[{"link":"d"},{"data":"https://data.dtour.dev/digits-umap.pq","link":"d"}]
Open it. Each entry in views holds a view's settings, and data names its file. Add layout=[[0],[1]] to stack the views. When running the webapp locally (pnpm dev), replace https://dtour.dev with http://localhost:5173.
For the Python widget, see the example notebooks on Fashion MNIST, a developing mouse brain atlas, joint image and caption embeddings, and tumor immune cells.
Making sense of high-dimensional data is hard. Non-linear embedding tools like UMAP do a great job at representing the high-dimensional manifold as best as possible in a 2D space. However, by virtue of only having two dimensions for laying out a scatter of points, distortions are introduced. One can have endless debates about the stability and correctness of clusters that emerge in such 2D embedding visualization.
The obvious solution to this problem is to take detour from your usual static 2D projection and examine different perspectives: i.e., a tour of different projections/views. Such tours can be visualized statically as scatter plot matrices when the number of views is limited or as an animation like the grand tour, which randomly rotates the high-dimensional space.
The idea of dtour is to take a middle ground and offer a highly interactive interface for deterministically transitioning through a handful of curated views that reveal more than a static 2D projection and are less overwhelming than a grand tour. In other terms, dtour, wants to tighten the exploration of high-dimensional data by replacing the random wandering of a grand tour animation with deterministic, optimized navigation through, what's called guided tours.
For details about the design of dtour, the tour interpolation math, and usage scenarios spanning text, image, and single-cell data, see our preprint at https://arxiv.org/abs/2605.04306.
@misc{lekschas2026dtour,
author = {Fritz Lekschas and Nezar Abdennur},
title = {dtour: a steerable tour de vis through high-dimensional data},
year = {2026},
eprint = {2605.04306},
archivePrefix = {arXiv},
primaryClass = {cs.HC},
doi = {10.48550/arXiv.2605.04306},
url = {https://arxiv.org/abs/2605.04306}
}