Rijal Al-Hadith 3D Atlas: Exploring Classical Narrator Chains in Three.js
An interactive Arabic 3D WebGL knowledge atlas visualizing classical narrator generations ('tabaqat'), teacher-student transmission chains ('isnad'), and geographical distribution.
Three.jsTypeScriptViteArabic Visualization

Context
Classical biographical dictionaries ('Ilm al-Rijal') record thousands of interconnected scholars across centuries and cities. Reading them as flat text makes it hard to grasp generational clustering and transmission topologies at a glance.
Scope I disclose publicly
- A 3D generational graph layout positioning scholars by century ('tabaqa'), scholarly rank, and region.
- Interactive lineage tracing that illuminates direct teacher and student chains whenever a narrator node is selected.
- An Arabic RTL heads-up interface providing instant search, filtering, biographical inspection cards, and smooth camera fly-to transitions.
Decisions and trade-offs
- Mapping generational strata ('tabaqat') along a dedicated spatial axis so chronological flow remains readable even in dense clusters.
- Rendering Arabic node labels via crisp canvas textures to preserve complex Arabic ligatures at 60 FPS in WebGL.
- The trade-off: keeping browser frame rates smooth requires curating structured graph subsets rather than dumping raw multi-volume corpora into GPU memory.
The live 3D atlas can be explored directly at mbardouni.dev/rijalHadith/.
Check the public sourceDisclosure: This is an educational and visual engineering project.
