100%

12 links of dependent arising

✓ Published2🌍 Public

Last edited May 20, 2025

Created on May 20, 2025

Forked from 12 links of dependent arising

This interactive visualization presents the 12 links of dependent arising from Buddhist philosophy in a radial circular layout. React manages the application state, while D3.js v7 handles the data-driven visualization. Data loaded from a CSV file drives a circular chart where each link is positioned by intensity-based radius and angular coordinates, with points, connecting lines, and a closed path rendered using line generators and scales. Users can hover for descriptions, click to filter and focus on specific links, and view color-coded categories through an interactive legend.

AI-generated description

The 12 Links of Dependent Arising Visualization

This visualization displays the Buddhist concept of Pratītyasamutpāda (Dependent Arising), showing the 12 links of the cycle of suffering and rebirth in an interactive circular format.

Features

Interactive circular visualization of the 12 links
Intensity-based radial layout
Color-coded categories
Click on links to filter and focus
Hover for detailed descriptions
Responsive design that adapts to different screen sizes

Implementation Details

The visualization is built using React for the UI components and D3.js for the data visualization. It uses a responsive approach with automatic dimension detection to ensure it works well across different devices and screen sizes.

MIT Licensed

Similar vizzes

Loading thumbnail…

12 links of dependent arising

This visualization presents the 12 links of dependent arising, a Buddhist concept explaining the cycle of suffering and rebirth. Each link appears as a colored point on a radial axis, with its distance from the center encoding its intensity. The D3.js library positions the points using angle and radius scales, while a closed cardinal curve connects them to form the cycle. The React application manages state for interactive features, including clickable legend items, hover tooltips showing detailed descriptions, and annotations that highlight key stages of the cycle.

NNita

95% match

Loading thumbnail…

12 links of dependent arising

This interactive radial visualization depicts the 12 links of dependent arising from Buddhist philosophy, highlighting each stage's role in the cycle of suffering across four thematic categories. Clicking a point or legend item filters the visualization, dimming unrelated elements and revealing the selected link's name, intensity, and description via tooltip. The D3-based layout positions data points around a circle using scales from `d3.scaleLinear` for angle and intensity, with `d3.curveCardinalClosed` paths connecting the stages. React manages state and rendering, while `ResizeObserver` handles responsive resizing.

NNita

94% match

Loading thumbnail…

Fork of 12 links of dependent arising

A circular visualization of the twelve links of dependent arising from Buddhist philosophy, showing each stage as a point positioned radially by its intensity value and angularly in sequence. Data from a CSV file drives the layout, with color-coded rings, connecting dashed lines, and an enclosed path created using D3's `line` and `curveCardinalClosed`. The React-hosted D3 chart supports interactive selection through clickable points and legend items, includes a tooltip for detailed descriptions, and animates the main path via `transition().duration()`.

NNita

91% match

Loading thumbnail…

Fork of 12 links of dependent arising

This visualization maps the 12 links of dependent arising (pratītyasamutpāda) onto a radial circular chart, with each link positioned by its intensity and connected to the center by a colored line. Animated transitions using D3’s `transition().attrTween()` highlight the cyclical Buddhist concept of suffering and rebirth. Built with React and D3 v7, it uses `scaleLinear` for radial and angular positioning and `scaleOrdinal` for categorical color scales. Hovering a point reveals a tooltip with the link’s description, and clicking filters the visualization and annotations to emphasize that link. The data originates from a CSV file listing each link’s name, intensity, and description.

Hhunsingeruk@gmail.com

90% match

Loading thumbnail…

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.

NNita

86% match

Loading thumbnail…

Fork of Fork of Fork of Dhamma wheel

This interactive visualization built with React and D3.js v7 displays the Buddhist Dhamma Wheel, an animated diagram of the Noble Eightfold Path. The wheel rotates continuously and features a lotus blossom at its hub, with eight spokes representing the path's principles. Users hover over spokes or labels to see tooltips, and selecting a spoke reveals a detailed information panel. D3 selection joins and transitions animate the graphics, while CSS keyframes drive the lotus petal swaying and jewel sparkle effects. The design uses fixed data from included constants rather than external data sources.

NNita

74% match

Loading thumbnail…

Fork of Fork of Fork of React & D3 Vibecoding Starter

This interactive visualization presents the Noble Eightfold Path of Buddhism as an animated Dharma Wheel, built with React and D3.js. The wheel’s spokes represent the eight path segments, drawn from a CSV file with title and description data, and rotate slowly until a segment is selected. Each spoke provides a tooltip with a detailed explanation, and clicking a spoke stops the animation and highlights that specific teaching. The visualization uses D3’s selection API and React state management to coordinate the wheel’s motion and interactive tooltip behavior.

NNita

74% match

Loading thumbnail…

Fork of Everything in One

This interactive D3.js v7 visualization presents Buddha’s teachings as a hierarchical radial tree, with the core teaching at the center branching outward through concepts like the Four Noble Truths and Dependent Origination. Using d3.cluster, the layout positions nodes in a full circle, with curved links and text labels adjusted for orientation. The code implements zoom and pan via d3.zoom, supports responsive resizing, and renders all elements as SVG. Data is loaded from a local JSON file using d3.json.

NNita

74% match