Export Code

All in One

0
Forks
0
Stars

Nita

Last edited May 21, 2025
Created on May 21, 2025
Forked from All in One

Radial Tree of Buddha's Teachings

This interactive visualization presents Buddha's teachings in a radial tree layout using D3.js. The hierarchical structure allows exploration of key Buddhist concepts starting from the central node and branching outward to show relationships between different teachings.

Features

  • Radial Layout: Displays Buddha's teachings in a circular hierarchical structure
  • Interactive Navigation: Pan and zoom functionality to explore different parts of the tree
  • Responsive Design: Automatically adjusts to fit different screen sizes
  • Visual Hierarchy: Node and text sizes adjust based on their depth in the hierarchy

Technical Implementation

The visualization is built using:

  • D3.js v7: For data binding and visualization
  • ES6 Modules: For clean code organization and separation of concerns
  • Hierarchical Data Structure: JSON format representing Buddhist teachings

Project Structure

  • index.html: Main HTML entry point
  • main.js: Application initialization and window resize handling
  • visualization.js: Core visualization rendering logic
  • dataLoader.js: Fetches and processes the hierarchical data
  • zoom.js: Implements pan and zoom functionality
  • utils.js: Helper functions for calculating positions and styling
  • styles.css: Visual styling of the tree nodes and links
  • data.json: Hierarchical data of Buddha's teachings

Usage

Open index.html in a modern web browser. Navigate the visualization using:

  • Zoom: Mouse wheel / pinch gesture
  • Pan: Click and drag anywhere on the visualization

Data Structure

The visualization represents Buddha's teachings starting with core concepts like the Four Noble Truths and branching out to more detailed teachings. Each node represents a specific teaching, with the hierarchical layout illustrating how concepts relate to one another.

Visual Design

The visualization uses a warm color palette inspired by traditional Buddhist art:

  • Soft parchment background
  • Amber node circles
  • Dark brown text and connections
  • Root node emphasized with darker coloring
  • Text with subtle white glow for better readability
MIT Licensed