Context
Selma is a React/TypeScript template for exploring complex taxonomies in the browser. The built-in example traces the evolution of writing systems : a dataset that is both tree-structured and multi-parent, which exercises the template’s main features.
Architecture
The application is built with React + Vite for rendering, React Flow and ELK.js for automatic graph layout, and Tailwind CSS for styling. All data lives in public/:
public/data/nodes.json: node visual properties (color, icon, tags)public/data/taxonomies/*.json: parent-child relationships per taxonomy viewpublic/details/<lang>/<nodeId>.md: localized Markdown content per nodepublic/locales/<lang>/: UI strings and taxonomy labels
Features
- 4 visualization modes: Organic Graph, Compact Graph, Collapsible List, Miller Columns
- DAG support: multi-parent nodes detected automatically, secondary edges shown as orange dashed lines
- Multiple taxonomies: several classification views switchable on the same node set
- Tag filtering: neutral / include / exclude states, with union and intersection modes
- i18n: UI and per-node Markdown content localized via
i18next - Export: SVG, PNG, JPG, ASCII tree; Markdown print for node detail pages
Impact
Selma is a starting point to create a taxonomy without building a custom interface. Clone the repo, replace the public/ folder with your own data, and deploy. A live demo is available on Hugging Face Spaces and documentation is hosted on GitHub Pages.