Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Starter

✓ Published0🌍 Public
NNita
Last edited Jan 14, 2026
Created on Jan 14, 2026
Forked from 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.

AI-generated description

Five Buddha Families Interactive Visualization

An interactive visualization exploring the transformation of the five kleshas (mental poisons) into the five wisdoms and Buddha families, based on teachings from Yongey Mingyur Rinpoche.

Features

  • Transformation Path: Visualize how kleshas transform into wisdoms and manifest as Buddha families
  • Elements View: See the five elements associated with each family
  • Interactive Selection: Click on Buddha families to see detailed information
  • Beautiful Design: Modern, gradient-based UI with smooth animations

The Five Buddha Families

  1. Buddha Family - Ignorance → Nonconceptual Wisdom (Space)
  2. Vajra Family - Anger/Aversion → Mirror-like Wisdom (Earth)
  3. Padma Family - Craving/Attachment → Discernment Wisdom (Fire)
  4. Ratna Family - Pride → Equanimity Wisdom (Water)
  5. Karma Family - Jealousy → Accomplishment Wisdom (Wind)

How It Works

When the nature of the five kleshas is recognized, they transform into wisdoms and their enlightened manifestations appear as the five Buddha families. Each represents a different dimension of awakened mind.

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
89% 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
89% 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
86% 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
83% 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
81% 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
81% 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
80% match
Loading thumbnail…

Fork of React & D3 Starter

This example presents a three-generation family tree as a static dendrogram, with each generation distinguished by a unique node shape and color. It uses D3’s hierarchy and tree layout algorithms to position nodes, while SVG paths draw the connecting links. The code leverages D3 v7 APIs such as `d3.select`, `d3.hierarchy`, `d3.tree`, `linkVertical`, and the `join` operator to build the visualization. A legend clarifies the shape-to-generation mapping, and the SVG is rendered directly in an HTML file with hardcoded family data.

Ssharathchandrareddymuthyam
79% match