Fork of 12 links of dependent arising

100%

Fork of 12 links of dependent arising

✓ Published0🌍 Public

Last edited Jun 3, 2025

Created on Jun 3, 2025

Forked from 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.

AI-generated description

MIT Licensed

Similar vizzes

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

93% 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

91% match

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

90% match

Loading thumbnail…

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.

NNita

90% 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

90% 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

77% 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

77% match

Loading thumbnail…

Fork of React & D3 Starter

This interactive visualization maps the five kleshas to their corresponding Buddha families, wisdoms, and elements in a radial node-link diagram built with React and D3 v7. Users toggle between transformation and elements views, with clickable nodes revealing family details. The SVG rendering uses d3-selection to dynamically create and update nodes and links based on the selected mode.

NNita

76% match