Skip to main content
SimilarExport ZIP
100%

Fork of Fork of The Noble Eightfold Path: The Buddha’s Guide to Liberation

✓ Published0🌍 Public
NNita
Last edited Aug 5, 2025
Created on Aug 5, 2025

An interactive visualization of the Lotus Sutra displays its 28 chapters as a horizontal tree diagram, categorized into three main parts. The background features an animated, interactive Dharma wheel with spokes, hub, and lotus petals, each providing explanatory tooltips on hover. Built with React and D3.js v7, the visualization uses SVG for rendering, with hover effects on tree nodes that highlight related links and show chapter details. The data, sourced from the README, organizes chapters into parts with descriptions and Pali terms.

AI-generated description

Lotus Sutra Visualization

An interactive visualization of the 28 chapters of the Lotus Sutra, a central Mahayana Buddhist scripture.

Features

  • Tree diagram showing the structure of the Lotus Sutra with 3 main parts
  • Dhamma wheel visualization in the background representing Buddhist teachings
  • Interactive hover effects to highlight related content
  • Responsive design that works on different screen sizes
  • Meditation-inspired animations and color scheme

Parts of the Lotus Sutra

  1. Part 1: The One Vehicle (Chapters 1-9) - Foundation and Ultimate Teaching
  2. Part 2: The Everlasting Buddha (Chapters 10-22) - Buddha's Eternal Life and Bodhisattva Role
  3. Part 3: The Deeds of Bodhisattvas (Chapters 23-28) - Stories and powers of specific bodhisattvas

Technical Details

  • Built with React and D3.js
  • Uses SVG for visualizations
  • Implements modern CSS techniques for animations and effects
  • Fully responsive design

Usage

Hover over any node to see detailed information about that chapter or part. Use the controls to reset the view or expand all nodes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of A Journey Through the Lotus Sutra: Unpacking Its 28 Chapters

This interactive visualization maps the 28 chapters of the Lotus Sutra as a hierarchical tree, organized into three color-coded parts representing the One Vehicle, the Everlasting Buddha, and the Deeds of Bodhisattvas. Users can hover over nodes to see chapter descriptions and Pali titles, click to lock selections, and toggle an expand-all view. Built with React and d3.v7, it uses `d3.hierarchy` and `d3.tree` for layout, with custom SVG gradients, animated transitions, and an info panel for details.

NNita
92% match
Loading thumbnail…

Fork of Fork of A Journey Through the Lotus Sutra: Unpacking Its 28 Chapters

This interactive visualization maps the 28 chapters of the Lotus Sutra as a branching tree, organizing them into three color-coded parts that trace the text’s thematic progression. Hovering over any chapter node reveals its Pali name and summary in a side panel, while animated petals, decorative dots, and a slowly rotating outer ornament create a contemplative atmosphere. The tree layout uses d3.tree with custom separation logic, and React manages state for hover interactions and an expand-all toggle. Gold-toned gradients and drop-shadow filters reinforce the sacred aesthetic.

CCurran Kelleher
90% match
Loading thumbnail…

Dhamma Wheel

An interactive visualization of the Lotus Sutra, its 28 chapters arranged as a radial tree and grouped into three color-coded parts. The visualization uses D3.js and React to render a hierarchical tree layout, with animated node expansion and interactive hover and selection states. Node colors and gradients are applied based on part membership, using D3's `tree` layout, and JavaScript DOM event handlers manage user interactions.

NNita
88% match
Loading thumbnail…

A Journey Through the Lotus Sutra: Unpacking Its 28 Chapters

This interactive visualization maps the 28 chapters of the Lotus Sutra into a hierarchical tree, grouped into three major parts that trace the text's narrative arc. Built with React and D3 v7, the tree layout uses `d3.hierarchy` and `d3.tree` to position nodes horizontally, with hover states triggering a detail panel and smooth transitions. The visualization uses warm golden gradients and a color scheme distinguishing each part, while chapter descriptions and summaries appear alongside their corresponding nodes.

NNita
87% match
Loading thumbnail…

Fork of Fork of The Teachings of the Buddha 2

An interactive visualization presents the core concepts of Buddhism, including the Dharma wheel, the Noble Eightfold Path, the Four Noble Truths, and floating lotus flowers. The SVG scene uses D3.js v7 to construct the elements, with the Dharma wheel rotating through `transition.attrTween`. The eightfold path is shown as a radial layout with labeled circles, while a gradient background and meditation ripple animations add a serene atmosphere. The visualization is built from the HTML and CSS files, with an emoji-based Buddha figure.

NNita
86% match
Loading thumbnail…

The Noble Eightfold Path: The Buddha’s Guide to Liberation

An interactive tree visualization presents the Buddha's Noble Eightfold Path, organizing its eight practices into three divisions—Sīla, Samādhi, and Paññā—with each node displaying English names, Pali terms, and descriptive text. Hovering over any node scales it and reveals its full explanation in an adjacent panel, while links and colors encode the hierarchical relationships between categories. Built with D3.js v7's hierarchy and tree layouts, the visualization uses SVG rendering, animated transitions, and gradient fills, all orchestrated through a React 19 component architecture with responsive dimensions tracked via ResizeObserver.

NNita
84% match
Loading thumbnail…

Fork of Fork of Fork of Dhamma wheel

This interactive visualization built with React and D3.js v7 displays the Buddhist Dhamma Wheel, an animated diagram of the Noble Eightfold Path. The wheel rotates continuously and features a lotus blossom at its hub, with eight spokes representing the path's principles. Users hover over spokes or labels to see tooltips, and selecting a spoke reveals a detailed information panel. D3 selection joins and transitions animate the graphics, while CSS keyframes drive the lotus petal swaying and jewel sparkle effects. The design uses fixed data from included constants rather than external data sources.

NNita
84% match
Loading thumbnail…

Fork of Fork of Fork of React & D3 Vibecoding Starter

This interactive visualization presents the Noble Eightfold Path of Buddhism as an animated Dharma Wheel, built with React and D3.js. The wheel’s spokes represent the eight path segments, drawn from a CSV file with title and description data, and rotate slowly until a segment is selected. Each spoke provides a tooltip with a detailed explanation, and clicking a spoke stops the animation and highlights that specific teaching. The visualization uses D3’s selection API and React state management to coordinate the wheel’s motion and interactive tooltip behavior.

NNita
83% match