Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Fork of React & D3 Vibecoding Starter

Public visualization

Post on XLinkedIn

Viewing a saved revision (read-only)

671b4e9f209243998611bc5209dbde2d

Open

Fork of React & D3 Vibecoding Starter

0 stars1🌍 Public
NNita
Last edited May 5, 2025
Created on May 5, 2025

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.

AI-generated description

Buddha's Teachings Interactive Visualization

An interactive visualization of Buddha's teachings using a Dharma Wheel as navigation. Each spoke of the wheel represents a different teaching or aspect of Buddhist philosophy.

Features

  • Interactive Dharma Wheel with clickable spokes
  • Hover for teaching previews
  • Slow animation creates a peaceful, meditative experience
  • Responsive design fits any screen size

Technologies Used

  • React for UI components
  • D3.js for interactive visualization
  • CSS for styling

Usage

Click on any spoke of the Dharma Wheel to explore that teaching. The wheel slowly rotates, symbolizing the cyclical nature of existence in Buddhist philosophy.