Fork of Fork of 12 links of dependent arising
This radial visualization presents the twelve links of dependent arising as an interactive circular cycle, where each link’s distance from the center encodes its intensity. Built with React and D3 v7, it uses `d3.scaleLinear` for angular and radial positioning, `d3.scaleOrdinal` for categorical color mapping, and a cardinal-closed path to connect the points. Hovering reveals detailed tooltips, while clicking filters the view, highlighting the selected link and its connecting lines. Data comes from a CSV file.
AI-generated descriptionThe 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.