Buddha's Teachings Radial Tree Visualization

An interactive visualization that presents Buddha's teachings in a hierarchical radial tree layout. The visualization allows users to explore the interconnected concepts of Buddhism starting from the core teaching and branching out to more specific aspects.

Overview

This project uses D3.js to create a beautiful, interactive radial tree visualization of Buddhist teachings. The teachings are arranged hierarchically, starting with Buddha's core teachings at the center and branching out to more specific concepts.

Key features:

• Radial tree layout presenting Buddhist teachings hierarchically
• Interactive zoom and pan functionality
• Responsive design that adjusts to window size
• Visually distinct styling for different levels of teachings

Demo

View live demo (Add your live demo link here)

Screenshot

(Add a screenshot when available)

Structure

The visualization follows a hierarchical structure:

• The root represents "Buddha's Teachings"
• Main branches include "Four Noble Truths" and other core teachings
• Each primary teaching branches into more specific concepts
• The hierarchy continues up to 3-4 levels deep

Technology Stack

• D3.js (v7) for data visualization
• HTML5 & CSS3
• Vanilla JavaScript with ES modules
• Responsive design for multiple screen sizes

Project Files

• index.html - Main HTML file
• main.js - Entry point that initializes the visualization
• visualization.js - Core visualization logic
• dataLoader.js - Handles loading the hierarchical data
• zoom.js - Implements zoom and pan functionality
• utils.js - Utility functions for the visualization
• styles.css - Styling for the visualization
• data.json - Hierarchical data structure of Buddha's teachings

Usage

1. Clone the repository
2. Open index.html in a web browser or host it on a web server
3. Interact with the visualization:
   • Zoom in/out using the mouse wheel or touchpad gestures
   • Pan by clicking and dragging
   • Explore the hierarchical structure of Buddha's teachings

Features

• Interactive Navigation: Zoom and pan to explore different levels of detail
• Hierarchical Representation: Clear parent-child relationships between concepts
• Responsive Layout: Automatically adjusts to different screen sizes
• Visual Hierarchy: Root, branches, and leaf nodes are visually distinct
• Text Orientation: Text labels are positioned for optimal readability

Development

To modify or extend this visualization:

1. Update data.json to change the content or structure of the teachings
2. Modify styles.css to adjust the visual appearance
3. Edit visualization logic in the JS files to change the behavior or layout

License

[Add your license information here]

Credits

• Buddha's teachings data compiled from [add your sources]
• Visualization built with D3.js