100%

The Wheel of Dhamma

✓ Published1🌍 Public

Last edited May 5, 2025

Created on May 5, 2025

Forked from Fork of React & D3 Vibecoding Starter

The Wheel of the Dhamma visualizes the Buddhist Eightfold Path as an interactive, rotating wheel. Eight labeled spokes, loaded via `d3.csv`, represent path components, while the hub and rim carry symbolic tooltips. Clicking a spoke pauses the `requestAnimationFrame` rotation and highlights that teaching. Built with React, the `D3.js` wheel responds to mouseover events to display tooltips with explanations for each path element.

AI-generated description

The Wheel of the Dhamma (Dharmachakra)

An interactive visualization of the Wheel of the Dhamma, one of Buddhism's most important symbols. This visualization represents the Buddha's first teaching after enlightenment - the Four Noble Truths and the Noble Eightfold Path.

Symbolism of the Wheel

Each part of the Dharmachakra has specific meaning:

Circle: Perfection and completeness of the Dhamma
Hub: Moral discipline (foundation of practice)
Spokes (8): The Noble Eightfold Path
Rim: Concentration that holds everything together

The Noble Eightfold Path

Right View: Understanding the Four Noble Truths
Right Intention: Commitment to ethical self-improvement
Right Speech: Speaking truthfully and kindly
Right Action: Ethical and non-harmful behavior
Right Livelihood: Earning a living without harming others
Right Effort: Working to improve oneself
Right Mindfulness: Awareness of thoughts and actions
Right Concentration: Developing focus through meditation

Features

Rotating wheel symbolizing the "turning of the wheel of Dhamma"
Interactive spokes representing the Noble Eightfold Path
Tooltips explaining each component
Pause rotation by selecting a specific path element

Built with React and D3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

Dhamma Wheel

The Dhamma Wheel visualizes the Noble Eightfold Path as an interactive wheel with eight spokes representing Buddhist teachings, color-coded across Wisdom, Ethical Conduct, and Mental Cultivation. Users hover or click spoke groups to reveal detailed descriptions and insights in an info panel, with a progress indicator tracking explored paths. The React app uses D3 selections to render SVG elements, managing state for hover, selection, filtering, and animations. Controls toggle informational overlays, category connections via `PATH_CONNECTIONS`, and animation effects, while a decorative lotus hub resets the selection state.

NNita

93% match

Loading thumbnail…

Fork of Dhamma wheel

This interactive Dhamma Wheel visualization presents the Noble Eightfold Path as a decorative, rotatable wheel. Users hover over or click the wheel's eight spokes to explore each path's label, Pali name, and description through dynamically rendered tooltips and an information panel. The React application uses D3.js v7 selection joins to create and update SVG elements, including the wheel's rims, hub, and decorative animations. The visualization includes the Three Jewels as interactive, sparkle-animated elements, with keyboard navigation supporting Escape to clear the current selection.

NNita

91% match

Loading thumbnail…

Fork of Fork of Dhamma wheel

This interactive Dhamma Wheel visualizes the Noble Eightfold Path using React and D3.js v7. The wheel displays eight spokes representing the path's elements, with hover tooltips showing each element's Pali name and description, and a side panel providing detailed explanations when a spoke is clicked. Animated decorative elements, including pulsing dots and rotating outer rings, enhance the visualization. The code uses d3.select and transition methods for smooth state changes, implements keyboard navigation (Escape key to clear selections), and incorporates CSS animations for visual effects.

NNita

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

89% match

Loading thumbnail…

Demo-2

This visualization depicts the Wheel of Dhamma, a Buddhist symbol whose eight spokes represent the Noble Eightfold Path. A rotating outer wheel with spokes and concentric rims is rendered in SVG using D3. The wheel rotates via `transition.attrTween`, and hovering over spokes displays descriptive tooltips. User interactions, including pausing rotation, selecting spokes, and resetting the view, are managed through React state, with data loaded from a CSV file.

NNita

87% match

Loading thumbnail…

Dhamma wheel in Marathi

This interactive D3 visualization presents the Dhamma wheel, or Dharma chakra, as an animated diagram of the Noble Eightfold Path in Marathi. Each of the eight spokes represents a path element from a CSV dataset, with labels, hover tooltips, and click-to-select interactions that rotate the wheel to position a chosen section. The React app manages state and dimensions, while D3 handles SVG rendering, wheel components, and keyboard navigation, supported by ResizeObserver for responsive sizing.

NNita

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

85% match

Loading thumbnail…

Fork of Demo-3

This interactive React visualization presents the Wheel of Dhamma, depicting the Noble Eightfold Path of Buddhism as a decorative wheel with eight colored segments and spokes. Clicking any segment or spoke opens an information panel describing that path component, while an embedded audio player provides spoken explanation. Built with React and D3.js v7, it uses a pie layout with arc generators for segments, ordinal color scaling, and SVG rendering. Data loads from a local CSV file containing spoke names, values, and descriptions.

NNita

85% match