Buddhist Sutras: Historical Timeline
This interactive timeline visualizes the historical composition and translation of three key Buddhist sutras—the Heart, Diamond, and Lotus Sutras—from 100 BCE to 649 CE. Selecting a timeline event opens a details panel showing related events and sutra metadata, while a bottom panel presents summary statistics such as the overall time span and translation period. Built with React 19 and D3 v7, the visualization uses `d3.scaleLinear` for axis mapping, `d3.extent` and `d3.group` for statistical calculations, and `ResizeObserver` for responsive rendering. Data is loaded from a CSV file via `d3.csv`.
AI-generated descriptionsutraData.js
export const sutraData = [ { name: "Heart Sutra", coreConcept: "Śūnyatā (Emptiness)", length: "Extremely Short", lengthValue: 260, keyMetaphor: "Form is emptiness; emptiness is form.", color: "#d73527", translationYear: 649, composer: "c. 350 CE", influence: ["Tibet", "China", "Japan"], description: "The most concise expression of Prajñāpāramitā wisdom" }, { name: "Diamond Sutra", coreConcept: "Non-Abiding & Non-Attachment", length: "Short", lengthValue: 6000, keyMetaphor: "A diamond that cuts through illusion.", color: "#2e86ab", translationYear: 402, composer: "c. 100 BCE - 100 CE", influence: ["China", "Japan"], description: "A practical guide for the Bodhisattva path" }, { name: "Lotus Sutra", coreConcept: "Ekayāna (The One Vehicle)", length: "Very Long", lengthValue: 28000, keyMetaphor: "Parables (e.g., The Burning House)", color: "#f18701", translationYear: 406, composer: "c. 50 - 150 CE", influence: ["China", "Japan"], description: "Epic text revealing the unity of all Buddhist paths" } ];
export const timelineData = [ { year: -100, yearLabel: "100 BCE", event: "Early Prajñāpāramitā texts emerge", sutra: "Diamond Sutra", color: "#2e86ab" }, { year: 100, yearLabel: "50-150 CE", event: "Core Lotus Sutra chapters composed", sutra: "Lotus Sutra", color: "#f18701" }, { year: 350, yearLabel: "350 CE", event: "Heart Sutra likely composed", sutra: "Heart Sutra", color: "#d73527" }, { year: 402, yearLabel: "402 CE", event: "Kumārajīva translates Diamond Sutra", sutra: "Diamond Sutra", color: "#2e86ab" }, { year: 406, yearLabel: "406 CE", event: "Kumārajīva translates Lotus Sutra", sutra: "Lotus Sutra", color: "#f18701" }, { year: 649, yearLabel: "649 CE", event: "Xuanzang translates Heart Sutra", sutra: "Heart Sutra", color: "#d73527" } ];