A set of five experimental web prototypes exploring different ways to browse, search, and document the data assets of a large organisation — here, the Swiss Federal Office for Buildings and Logistics (BBL).
Each prototype tackles the same underlying question — "how should people inside BBL find out what data exists, what it means, and where it lives?" — but from a different angle: a polished DCAT-AP catalog, an architecture-layer browser, a SQL-backed explorer, a lineage graph, and a diagram editor.
All five are unofficial mockups. They are not production systems — they're meant to compare ideas and spark discussion. Where relevant, metadata follows the Swiss DCAT-AP CH v3.0 standard (the Swiss profile of the EU catalog vocabulary).
You don't need to install anything — every prototype is deployed on GitHub Pages.
Main catalog. Browse business objects and datasets with search, filters, grid/list views, and detail pages. Follows the DCAT-AP CH v3.0 standard. Multilingual: DE / EN / FR / IT.
Data catalog backed by a SQLite file that runs entirely in the browser via sql.js. Sidebar navigation, full-text search, detail views for every entity, and interactive lineage graphs.
Hierarchical metadata browser following a three-layer architecture model (Conceptual → Logical → Physical), with wiki-style documentation and cross-layer traceability. Multilingual (DE / EN / FR / IT), dark and light theme.
Interactive graph for exploring data lineage across systems. Live JSON editor on the left, viewer with pan / zoom / fit / expand on the right. Six layout presets, column-level mappings, system-based grouping — vanilla JS, no framework.
Single-page editor for ER diagrams and flowcharts that accepts free-text names (spaces, umlauts, special characters). Built on Mermaid.js.
All prototypes are plain HTML/CSS/JS with zero build step and zero npm dependencies. Any static file server will do:
git clone https://github.com/bbl-dres/data-catalog.git
cd data-catalog
# then either:
python3 -m http.server 8000
# or:
npx http-serverOpen http://localhost:8000 — the root page redirects to the main catalog. Append /prototype-layers/, /prototype-sqlite/, /prototype-lineage/, or /prototype-mermaid/ for the others.
data-catalog/
├── index.html # Redirect to prototype-main/
├── prototype-main/ # Business Object & Dataset Catalog (Datenkatalog IMMO)
├── prototype-layers/ # Architecture Layer Browser (Meta-Atlas)
├── prototype-sqlite/ # SQLite Catalog Explorer
├── prototype-lineage/ # Data Lineage Viewer
├── prototype-mermaid/ # Mermaid Diagram Editor (Simple Chart)
├── assets/ # Shared repo assets (social preview)
└── docs-concepts/ # Shared concept docs
Licensed under the MIT License.
Unofficial mockup — not affiliated with or endorsed by BBL.