Fork of The Transformation of Kleshas to Wisdoms

Fork of The Transformation of Kleshas to Wisdoms

This interactive visualization maps the five Buddha families, showing how each klesha (Ignorance, Anger, Craving, Pride, Jealousy) transforms into its corresponding wisdom. A central hub connects to five color-coded circles arranged radially, with clickable nodes displaying family, element, and descriptive details in an info panel below. Built with React 19 and D3 v7, the example uses `select`, `scaleLinear`, and `pie` methods to render an SVG scene. Mouseover events adjust circle opacity and stroke width, while a view toggle switches between the radial diagram and detailed card layout. The data is hardcoded in a JavaScript array.

95% match

Fork of The Transformation of Kleshas to Wisdoms

95% match

The Transformation of Kleshas to Wisdoms

This interactive visualization illustrates the Buddhist teaching of transforming five kleshas (mental afflictions) into wisdoms and Buddha families through an animated mandala layout. Users toggle between three modes—Kleshas, Wisdoms, and Families—to see how each affliction maps to its enlightened counterpart, with connecting lines, colored nodes, and information cards. Built with React 19 and D3.js v7, the visualization uses d3 transitions to animate circle radii and label opacity in a circular arrangement, while SVG rendering and CSS gradients create a responsive, immersive interface.

93% match

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.

86% match

Fork of Fork of Noble Eightfold Path

This visualization displays the Buddhist Noble Eightfold Path as a hierarchical tree, organized into three main categories (Moral Virtue, Meditation, and Wisdom) with their eight constituent elements. Using D3.js v7, the code constructs an SVG rendering with custom radial gradients, symmetrical node positioning, and hover interactions that highlight nodes and links. The visualization includes descriptive tooltips, text backgrounds, and responsive layout adjustments, all styled with a warm earth-tone color palette defined in CSS custom properties.

Fork of Noble Eightfold Path

This interactive visualization presents the Buddhist Noble Eightfold Path as a radial tree, branching from the central path into three colored categories—moral virtue, meditation, and wisdom—with two to three child nodes each. Built with d3.v7 and SVG, it uses the `d3.tree` layout with customized link functions and radial gradients to differentiate hierarchy levels. Node styling uses CSS transitions and drop-shadow filters, while the fixed y-coordinate adjustments create a structured, top-down flow. The code loads data from an embedded JavaScript object, with interactive hover effects that scale nodes and intensify text, all rendered within a stylized gradient-background container.

Fork of Fork of The Teachings of the Buddha 2

An interactive visualization presents the core concepts of Buddhism, including the Dharma wheel, the Noble Eightfold Path, the Four Noble Truths, and floating lotus flowers. The SVG scene uses D3.js v7 to construct the elements, with the Dharma wheel rotating through `transition.attrTween`. The eightfold path is shown as a radial layout with labeled circles, while a gradient background and meditation ripple animations add a serene atmosphere. The visualization is built from the HTML and CSS files, with an emoji-based Buddha figure.

Fork of React & D3 Vibecoding Starter

This interactive visualization presents Buddha’s teachings as a slowly rotating Dharma Wheel with clickable spokes representing eight concepts loaded from a CSV file. The wheel’s rotation and hover tooltips are driven by D3’s `select`, `join`, and `requestAnimationFrame`, while React manages state for dimensions and selected sections. SVG circles and lines form the wheel’s rims, hub, and spokes, with labels positioned via trigonometric calculations.