Skip to main content
SimilarExport ZIP
100%

Fork of The Transformation of Kleshas to Wisdoms

✓ Published0🌍 Public
NNita
Last edited Jan 15, 2026
Created on Jan 15, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

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.

NNita
100% match
Loading thumbnail…

Fork of The Transformation of Kleshas to Wisdoms

This visualization displays the five kleshas (Ignorance, Anger, Craving, Pride, Jealousy) and their transformations into corresponding wisdoms, Buddha families, and elemental associations. Interactive buttons toggle between three modes—klesha, wisdom, and family—with animated circular nodes radiating from a central point. Built with React and d3.v7, it uses `select`, `scaleLinear`, and `transition` to animate node radii and label opacity. The code references static data arrays containing color-coded attributes for each transformation. The SVG rendering positions five colored circles at equal angular intervals with connecting lines to the center, along with element labels at a larger radius. Color schemes shift based on the selected mode, and a center label identifies the current display category.

NNita
95% match
Loading thumbnail…

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.

NNita
92% 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
89% 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
78% match
Loading thumbnail…

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.

NNita
77% match
Loading thumbnail…

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.

NNita
77% match
Loading thumbnail…

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.

NNita
77% match