The 12 Links of Dependent Arising Visualization
An interactive D3.js visualization of the Buddhist concept of Pratītyasamutpāda (Dependent Arising).
Features
- Interactive circular visualization of the 12 links
- Hover and click functionality to explore each link
- Detailed tooltips with descriptions
- Responsive design that adapts to different screen sizes
- Smooth transitions and animations
Technical Details
- Built with React and D3.js
- Implements data-driven visualizations using D3 joins
- Uses a modular architecture for maintainable code
- Responsive design using ResizeObserver
Usage
- Click on any point to focus on a specific link
- Hover over points to see detailed descriptions
- Use the legend to navigate between different links
About the Circle Background
The circular layout in this visualization is intentional and symbolic for several reasons:
Cyclic Nature: The circle represents the cyclic nature of Dependent Arising (Pratītyasamutpāda). In Buddhist philosophy, these 12 links form a continuous cycle of cause and effect that perpetuates suffering and rebirth.
Visual Metaphor: The circle serves as a visual metaphor for the wheel of samsara (cyclic existence), which is a fundamental concept in Buddhism.
Non-Linear Representation: The circular design emphasizes that these links are not strictly linear but interconnected in a cyclical manner, with each link both causing and being caused by other links.
Data Visualization Effectiveness: Radial layouts are effective for displaying cyclic relationships and the relative intensity of each link (shown by the distance from the center).
Interactive Experience: The circular layout enables an intuitive way to navigate between different links while maintaining visual context of the entire cycle.
The circle background is implemented in the renderBars.js file using D3.js, where it creates a circular element with the class 'circle-background' that serves as the foundation for the visualization.