OldVis Gallery

A web gallery of historical visualizations. Browse the oldvis_dataset catalog, filter by metadata and time, and search by text or image description. Everything runs in the browser — no server database needed.

Live demo

Features

• Browse: paginated entries with metadata, thumbnails, and source links
• Facets & time: filter by authors, tags, languages, sources, and publish-year histogram bins
• Search: freeform metadata search, field queries (authors:(Playfair, William)), and CLIP image search (image:(bar chart))
• Advanced filters: build Field / Keyword / Image / Year criteria in a dialog without hand-writing syntax
• Shareable URLs: selectors sync to the query string so filtered views can be linked

See It In Action

Selectors, temporal chart, facets, and entries sit in one screen.

Start Using It

Try the live demo

Open the hosted app:

https://oldvis.github.io/gallery/

Run locally

pnpm install
pnpm dev

Search Features

To find visualizations, use any of these controls in the UI:

• Search… — type keywords, or paste a field / image query
• Advanced — add field, keyword, image, or year filters as form rows (no syntax required)
• Facets & year histogram — click an author, tag, language, source, or year bin

Active filters appear as chips under Selectors and are embedded in the page URL for sharing (e.g. https://oldvis.github.io/gallery/?authors:(Neurath,+Otto)).

Useful query examples (type them in Search…, or open the link):

Kind	Example	Result
Keywords	Playfair	Matches titles, abstracts, authors, tags, and related metadata
Exact field	authors:(Playfair, William)	Keeps entries whose authors field is exactly that value
Image description	image:(bar chart)	CLIP semantic search over the pictures (|topk:<N> optional)

Combine several filters with &, or add multiple rows in Advanced and Apply. Full syntax and supported fields: docs/SEARCH_FEATURES.md.

For Developers

Command	Description
pnpm install	Install dependencies
pnpm dev	Start the local app (http://localhost:3333)
pnpm build	Build for production (GitHub Pages base)
pnpm lint	Run ESLint
pnpm typecheck	Check TypeScript types
pnpm test	Run unit tests (watch)
pnpm test:unit	Run unit tests once
pnpm test:e2e	Run end-to-end tests
pnpm docs:screenshot	Update docs/images/screenshot.png for this README

You will need:

• Node.js
• pnpm
• Playwright browsers for e2e / screenshots (pnpm exec playwright install if needed)

Dataset JSON lives under src/assets/ (for example visualizations.json). Shared UI language is documented in DESIGN.md.

See CONTRIBUTING.md for contribution notes.

This project started from the vitesse-lite template.

Reference

If you use this gallery in a scientific publication, please cite:

@Article{Zhang2023OldVisOnline,
  author    = {Zhang, Yu and Jiang, Ruike and Xie, Liwenhan and Zhao, Yuheng and Liu, Can and Ding, Tianhong and Chen, Siming and Yuan, Xiaoru},
  title     = {{OldVisOnline}: Curating a Dataset of Historical Visualizations},
  doi       = {10.1109/TVCG.2023.3326908},
  volume    = {30},
  number    = {1},
  pages     = {551--561},
  journal   = {IEEE Transactions on Visualization and Computer Graphics},
  publisher = {IEEE},
  year      = {2023},
}