OldVis Image Taxonomy Labeler

A web-based system for taxonomy labeling and comparison of old visualization images.

You can find a live demo here with taxonomy labeling and taxonomy comparison. The functions related to the server are disabled in the live demo. To use the full-fledged version, please follow the instructions in How to Use.

This repository is structured as:

• ./apps/label: The interface for taxonomy labeling.
• ./apps/compare: The interface for taxonomy comparison.
• ./website: The GitHub Pages landing that links to both apps.
• ./packages/shared: Shared leaf modules (@image-taxonomy-labeler/shared) — API helpers and the visualization catalog.
• ./packages/ui: Shared Vue helpers and chrome (@image-taxonomy-labeler/ui) — label-task composables, VImage, dialogs, pagination, styles.
• ./scripts: The scripts for one-time data preprocessing.
• ./server: The server shared by the apps for serving image resource and computation services.

From the repo root: pnpm install, then pnpm start:label (or pnpm start:compare). To preview the GitHub Pages site locally (landing + both apps): pnpm --filter ./website preview.

Warning

The following instructions for setting up the interfaces assume the annotated dataset is oldvis/dataset. If you want to use the interfaces to annotate other images datasets, you will need to

1. ensure the image metadata matches the structure of visualizations.json and replace the metadata at ./packages/shared/assets/visualizations.json
2. store the images at ./server/static/images/
3. setup the cache files (with ./scripts/setup_cache.py)

How to Use the Taxonomy Labeling Interface

Quick Start

Use the startup script (assume Node.js and Python are installed):

pnpm start:label

Manual Setup

1. Setup the server resources and launch the server (see details at ./server/README.md).
2. Start only the client: pnpm --filter ./apps/label dev (environment flags: ./apps/label/README.md).

How to Use the Taxonomy Comparison Interface

Quick Start

Use the startup script (assume Node.js and Python are installed):

pnpm start:compare

Manual Setup

1. Setup the server resources and launch the server (see details at ./server/README.md).
2. Start only the client: pnpm --filter ./apps/compare dev (environment flags: ./apps/compare/README.md).

Reference

If you use this repository in a scientific publication, we would appreciate citations to the following paper:

@Article{Zhang2025VisTaxa,
  author    = {Zhang, Yu and Chen, Xinyue and Zheng, Weili and Guo, Yuhan and Li, Guozheng and Chen, Siming and Yuan, Xiaoru},
  title     = {{VisTaxa}: Developing a Taxonomy of Historical Visualizations},
  doi       = {10.1109/TVCG.2025.3567132},
  number    = {6},
  pages     = {3850--3862},
  volume    = {31},
  journal   = {IEEE Transactions on Visualization and Computer Graphics},
  publisher = {IEEE},
  year      = {2025},
}

Others

The steps to reproduce Figure 2 of the paper "VisTaxa: Developing a Taxonomy of Historical Visualizations" are available at graphics-replicability.md.