Export Code

Fork of Teachings Viz as layers

Nita

Last edited Mar 28, 2025
Created on Mar 28, 2025

Buddha's Teachings Visualization

An interactive visualization that presents the core teachings of Buddha as concentric circles, representing how these concepts build upon each other from the foundational Four Noble Truths to more complex Buddhist philosophies.

Overview

This web application visualizes six key Buddhist concepts as layers:

  1. The Four Noble Truths - The foundation of Buddhist philosophy
  2. The Noble Eightfold Path - The practical guide to end suffering
  3. The Five Precepts - Basic ethical guidelines for everyday life
  4. The Three Marks of Existence - The characteristics shared by all phenomena
  5. The Four Immeasurables - Positive mental states to cultivate
  6. Dependent Origination - The interconnected nature of existence

Features

  • Interactive Visualization: Click on any layer to learn more about that teaching
  • Detailed Explanations: Each concept is explained in depth with its components
  • Responsive Design: Works on desktop and mobile devices
  • Visual Hierarchy: The layered design shows how Buddhist concepts build upon each other

How to Use

  1. Open the application in a web browser
  2. Click on any colored circle in the visualization or on an item in the legend
  3. Read the detailed explanation that appears in the info panel below
  4. Navigate between different teachings to explore their connections

Technical Implementation

This visualization is built using:

  • HTML5 and CSS3 for structure and styling
  • D3.js for creating the interactive visualization
  • JavaScript for handling user interactions

Educational Purpose

This tool is designed to make Buddha's teachings more accessible to newcomers while providing a useful reference for those already familiar with Buddhist concepts. The layered approach helps illustrate how these teachings form a coherent philosophical system.

Local Development

To run this project locally:

  1. Clone the repository
  2. Open index.html in a web browser
  3. No build process or server is required
MIT Licensed