Skip to main content
SimilarExport ZIP
100%

Fork of Fork of The Five Skandhas (The Five Aggregates)

✓ Published0🌍 Public
NNita
Last edited Jun 17, 2025
Created on Jun 17, 2025

This interactive visualization explores the Buddhist concept of the Five Skandhas, depicting how Form, Sensation, Perception, Mental Formations, and Consciousness interrelate. A force-directed graph using d3.forceSimulation and d3.forceLink displays the nodes and their interdependence, with clickable nodes highlighting connected elements. The system also includes a step-by-step example tracing how an apple is experienced through all five aggregates, using CSS transitions to modify the image's visual effects.

AI-generated description

The Five Skandhas - Buddhist Philosophy

This repository contains files for an interactive web experience explaining the Five Skandhas concept from Buddhism, including:

  1. An informational page with descriptions of each Skandha
  2. An interactive visualization showing the interdependence between the Skandhas
  3. A real-world example illustrating how the Skandhas work together
  4. A printable poster version for educational purposes

Files

  • index.html - Main informational page with interactive elements
  • styles.css - Styling for the main page
  • skandhaData.js - Data structures for the Five Skandhas
  • visualizationController.js - Controls for the interactive visualization
  • exampleController.js - Controls for the interactive examples
  • poster.html - Printable poster design

The Five Skandhas

In Buddhist philosophy, the Five Skandhas (or Aggregates) represent the five aspects that constitute human experience. Together, they explain how we perceive reality and form our sense of self.

Skandha Sanskrit Function Description Interdependent With
Form Rūpa Physical structure Material body and external matter; what we can see, touch, sense All
Sensation Vedanā Feeling Experience of pleasure, pain, or neutrality arising from contact Perception, Form
Perception Saññā Recognition Identification and labeling of sensory input Sensation, Form
Mental Formations Saṅkhāra Volition Intentions, habits, thoughts, karmic tendencies Perception, Sensation
Consciousness Viññāṇa Awareness Basic awareness of experience, tied to the other aggregates All

Understanding the Five Skandhas helps us recognize that what we consider our "self" is actually a collection of ever-changing processes rather than a fixed entity.

Interactive Features

This project includes several interactive elements:

  1. A force-directed graph visualization showing the interdependence between skandhas
  2. Highlight functionality to explore each skandha and its relationships
  3. A step-by-step interactive example showing how an experience (eating an apple) is processed through all five skandhas
  4. A meditation guide for applying this understanding in practice

Usage

Simply open index.html in a modern web browser to explore the interactive elements. For printing the poster version, open poster.html and use your browser's print functionality.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of The Five Skandhas (The Five Aggregates)

This interactive visualization explains the Five Skandhas of Buddhist philosophy through a set of color-coded cards and a force-directed graph. It shows how Form, Sensation, Perception, Mental Formations, and Consciousness are each defined and interdependent. The graph uses D3.js `forceSimulation` with draggable nodes and relationship links, while the cards provide detailed descriptions. The SVG rendering matches node colors to card colors, and the data comes from hardcoded JavaScript objects.

NNita
92% match
Loading thumbnail…

The Five Skandhas (The Five Aggregates)

This example visualizes the Five Skandhas, a Buddhist concept of the five aggregates that constitute human experience. It shows each aggregate as a colored card with its Sanskrit name, function, description, and interdependencies, alongside an interactive force-directed graph of their relationships. Built with D3 v7, the graph uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, which are draggable via `d3.drag`. The data originates from a CSV table and renders as SVG.

NNita
88% match
Loading thumbnail…

Fork of The Five Aggregates (Skandhas)

This interactive visualization uses a D3.js pie chart to represent the Five Aggregates (Skandhas), a core Buddhist concept of what constitutes a living being. Each of the five equally-sized, color-coded segments corresponds to one aggregate—Form, Feeling, Perception, Mental Formations, and Consciousness—with hover effects expanding the selected arc and dimming others. The visualization uses `d3.pie` and `d3.arc` to generate the chart geometry, while a custom text-wrapping function and `ResizeObserver` handle responsive labels and container dimensions. Static aggregate data, including names, descriptions, and examples, is defined in the configuration file and loaded via the `loadData` function.

NNita
87% match
Loading thumbnail…

The Five Aggregates

This interactive circular visualization depicts the Buddhist Five Aggregates (Skandhas) that constitute a living being. It uses a D3.js pie chart with equal segments for each aggregate, showing the relationships between Form, Feeling, Perception, Mental Formations, and Consciousness. Hovering over an arc expands it and reveals a detailed description with examples in the adjacent panel, while the center displays "Anatta" (Not Self). The code uses D3's `pie()`, `arc()`, and `select()` APIs, with a `ResizeObserver` for responsive scaling. The visualization includes an explanation view when nothing is hovered, sourced from Buddhist teachings.

NNita
84% match
Loading thumbnail…

The Five Aggregates (Skandhas)

This interactive donut chart depicts the Buddhist Five Aggregates (Skandhas)—Form, Feeling, Perception, Mental Formations, and Consciousness—as equal arc segments. Hovering over a segment highlights it and dims the others. Using D3.js, the visualization applies `d3.pie()` and `d3.arc()` for layout, with `mouseenter` and `mouseleave` events to update hover state. Static aggregate data from a config file drives the rendering, styled with a Nordic color palette.

NNita
83% match
Loading thumbnail…

Fork of HTML Starter

This visualization depicts the Buddhist concept of the five skandhas—form, sensation, perception, mental formations, and consciousness—as concentric arcs surrounding a central "No Fixed Self" node. Built with D3.js, the page uses pie-chart arcs, SVG paths, and a dynamic legend to display the aggregates. Hovering over any arc or legend item triggers a tooltip with the skandha's name and description, while the center node explains the core teaching of anatta.

NNita
83% match
Loading thumbnail…

Fork of Fork of Vanilla D3 Vibecoding Template

This visualization explains the Buddhist concept of the Five Aggregates (Skandhas) through an interactive donut chart. It shows how a living being is composed of five interrelated processes—Form, Feeling, Perception, Mental Formations, and Consciousness—each displayed as a colored arc segment. Hovering over a segment highlights it while dimming the others, emphasizing its role within the whole. The chart uses D3's `pie` and `arc` generators to create the layout and computes centroid positions for labels, with data sourced directly from a static configuration file.

NNita
80% match
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive donut chart visualizes the Buddhist concept of the Five Aggregates (Skandhas), explaining how form, feeling, perception, mental formations, and consciousness together constitute a living being. Each of the five colored segments represents one aggregate, with hover interactions revealing detailed descriptions and examples sourced directly from the static configuration. The center displays “Not Self” to emphasize the Buddhist teaching of impermanence. Built with D3.js, the visualization uses `d3.pie`, `d3.arc`, and custom text-wrapping logic to dynamically size and position labels, making the philosophical content accessible through direct engagement.

NNita
80% match