Data Visualization
// INTERACTIVE ATLAS OF WRITING SYSTEMS • D3.JS
Orthographica: An Atlas of Human Writing
Role: Frontend Developer & Data Designer (Data Modelling, Visualization Design, D3.js Implementation)
Stack: Vanilla JavaScript (ES6+), D3.js (v7), TopoJSON, Python (data pipeline), CSS
Dataset: 202 scripts catalogued after the ISO 15924 standard
Orthographica is an interactive atlas of the world's writing systems — spanning 5,300 years, six writing mechanisms, and one species. It brings together 202 living, historical, and constructed scripts into a single explorable space, mapping how humanity's ways of recording language emerged, branched, and spread across the globe.
Five Ways to Read the Data
Lineage
A radial evolutionary tree where every script hangs from its parent and independent inventions radiate from the centre — filtered-out scripts are dimmed, never severed, keeping the lineage indivisible.
Chronology
Timeline bars from 3350 BCE to the present, ordering scripts by the moment they first appeared.
Glyph Field
Force-packed bubble clusters sized by grapheme count and grouped by writing mechanism, revealing the structural diversity of scripts at a glance.
Atlas & Specimens
A geographic map of script origins on a Natural Earth projection, plus a gallery of specimen cards rendering native samples of each system.
Design & Technical Implementation
Encoding is consistent across every view: colour maps to writing mechanism (alphabet, abjad, abugida, syllabary, logographic, featural), while node styling distinguishes living (filled), historical (outlined), and constructed (dashed) scripts. Global filters for status, type, directionality, and free-text search stay in sync across all five visualizations, and deep-linking lets any state be shared by URL.
The scripts are modelled from a structured dataset built with a Python pipeline and rendered entirely with D3.js (v7) — from the radial cluster layout of the lineage tree to the force simulation of the glyph field and the TopoJSON-driven atlas. The dark, editorial visual language keeps the focus on the data while the typography nods to the subject matter itself.
