Skip to main content
SimilarExport ZIP
100%

The Transformation of Kleshas to Wisdoms

✓ Published3🌍 Public
NNita
Last edited Jan 14, 2026
Created on Jan 14, 2026
Forked from React & D3 Starter

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.

AI-generated description

The Five Buddha Families

An interactive visualization of the Buddhist teaching on transforming afflictions (kleshas) into wisdom and enlightened expression through the Five Buddha Families.

Features

  • Interactive Mode Switching: Toggle between Kleshas, Wisdoms, and Buddha Families views
  • D3 Visualizations: Animated circular layout showing the five-fold mandala structure
  • Information Cards: Detailed descriptions of each family's qualities
  • Responsive Design: Works seamlessly on desktop and mobile devices

Teaching

Based on teachings by Yongey Mingyur Rinpoche, this interactive tool illustrates:

  1. Five Kleshas (Mental Afflictions): Ignorance, Anger, Craving, Pride, Jealousy
  2. Five Wisdoms: Their enlightened counterparts when recognized
  3. Five Buddha Families: How these wisdoms manifest as patterns of awakened mind

The core insight: recognition transforms suffering into the path itself.

Tech Stack

  • React 19
  • D3.js 7
  • ES Modules
  • Modern CSS with gradients and animations
MIT Licensed

Similar vizzes

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
93% match
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
92% match
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
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
81% match
Loading thumbnail…

The Teachings of the Buddha 2

This interactive visualization presents the core teachings of Buddha through an animated spiritual landscape. It features a rotating Dharma Wheel symbolizing the Eightfold Path, with the Four Noble Truths displayed in expandable panels and Buddha quotes cycling across the screen. The piece uses D3.js v7 to render SVG elements, including meditation ripple circles animated with d3.transition, floating lotus and leaf emoji for atmospheric effect, and responsive gradient backgrounds. Users can interact with the visualization by hovering over path elements for descriptions or clicking the Buddha figure to enter meditation mode, which alters animation intensity.

NNita
76% 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
75% match
Loading thumbnail…

Fork of The Teachings of the Buddha 2

This visualization explores the Bodhichitta teachings of Buddhism, centered on a pulsing heart symbol and surrounded by nodes for the Two Types of Bodhichitta and other related concepts. It uses D3.js v7 to build an SVG scene with d3 transitions for animations, including a heart pulse, floating lotus flowers, jewels, and meditation ripple effects. The design features a gradient background and color scheme representing compassion and wisdom, with quotes changing periodically. Data is drawn from Buddhist teachings on Bodhichitta, visualized through emoji-based graphics and custom SVG shapes.

NNita
74% match
Loading thumbnail…

The Heart of Prajñāpāramitā

This visualization presents an interactive exploration of Buddhist concepts from the Heart of Prajñāpāramitā through four distinct views: a force-directed network, a dharma wheel, a mandala, and a linear path to enlightenment. The main view uses d3.forceSimulation to display interconnected terms with draggable nodes, zooming, panning, and hover tooltips containing descriptions. A search feature highlights matching concepts, while a selector switches between visualization styles. The SVG-based rendering color-codes nodes by category such as Wisdom, Suffering, and Causality.

NNita
74% match