Skip to main content
SimilarExport ZIP
100%

Fork of Zen Teaching Insight into the Three I's (the three characteristics)

✓ Published1🌍 Public
NNita
Last edited Jun 4, 2025
Created on Jun 4, 2025

This interactive radial diagram visualizes the Three I's of Zen Buddhism—Impermanence, Unsatisfactoriness, and Impersonality—as three colored circles arrayed around a central "Zen" node. Connecting dashed lines link each concept to the center, while a continuously animated dashed ring encircles the diagram to suggest flow. Hovering over a concept expands its circle and reveals a text description. Built with D3 v7, the SVG elements animate into place using chained `transition()`, `delay()`, and `duration()` calls, with a recursive `transition.attrTween` driving the ring's perpetual motion.

AI-generated description

Zen Teachings - The Three I's

This project displays the core Zen teachings about the "Three I's" (impermanence, imperfection/suffering, and impersonality) as taught by Zen Master Tan Gong (José Ramírez).

Visualization

The visualization is an interactive radial diagram representing the Three I's of Zen Buddhism:

  • Impermanence (Anicca): The constantly changing nature of all things
  • Suffering/Unsatisfactoriness (Dukkha): The unsatisfactory nature of existence
  • No-Self/Impersonal (Anatta): The absence of a permanent, unchanging self

The diagram uses colors and animations to represent the interconnected nature of these concepts, showing how they form the foundation of Buddhist insight.

Features

  • Interactive elements that respond to user interaction
  • Smooth animations representing the flowing nature of existence
  • Responsive design that works on different screen sizes
  • Visual representations of key Zen concepts

Implementation

The visualization is built using D3.js, a JavaScript library for producing dynamic, interactive data visualizations in web browsers.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Zen Teaching Insight into the Three I's (the three characteristics)

A real-time simulation displays a network of 120 particles connected by constantly forming and breaking links, with animated sine waves layered underneath to illustrate how patterns emerge from simple interactions. The visualization, built with d3.forceSimulation for particle physics and d3.drag for direct node manipulation, shows transient connections and wave motion while accompanying text explains how complex systems like consciousness can emerge from simple rules. Links are randomly regenerated every three seconds, while the three animated wave paths continuously shift their phase, creating an abstract demonstration of emergent phenomena.

NNita
78% match
Loading thumbnail…

Zen Teaching Insight into the Three I's (the three characteristics)

This example presents a Zen Buddhist teaching on the three characteristics of existence—impermanence, suffering, and non-self—as a series of text passages. Each paragraph fades in sequentially using JavaScript’s `setTimeout` to modify CSS `opacity` and `transform` properties, creating a gentle reading flow. The page uses plain HTML, CSS, and vanilla JavaScript (no external libraries), with a hover effect on each passage that lifts the card and adds a shadow via CSS transitions. The content is drawn from a teacher’s commentary on the Saṁyutta Nikāya scripture.

NNita
76% match
Loading thumbnail…

Fork of Teachings Viz as layers

This visualization presents six core Buddhist teachings as concentric, clickable circles, from the foundational Four Noble Truths to Dependent Origination. It is rendered as an SVG using D3.js v7, with each layer colored distinctly and accompanied by a detailed text panel. Clicking a circle or a legend item updates the information panel below, using JavaScript event listeners to reveal the teaching's components and explanations. The visual hierarchy communicates how these concepts build upon one another.

NNita
72% 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
70% 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
70% match
Loading thumbnail…

Mind and Emptiness

This animated D3.js visualization depicts the Buddhist relationship between mind and emptiness through a circular diagram with four interactive segments. A central gold circle represents the mind, surrounded by four colored arcs that each illustrate a philosophical aspect—inherent emptiness, interdependence, realization, and non-duality. Hovering over a segment highlights it and dims the others while revealing its associated description. The visualization uses D3's `pie` and `arc` generators to create the equal-size segments, with text wrapping for labels and smooth transitions on hover.

NNita
70% match
Loading thumbnail…

Different teachings together connected

This interactive visualization of Buddha’s teachings offers three linked views: concentric onion layers, a force-directed relationship network, and a sunburst component breakdown. Users explore concepts like the Four Noble Truths and the Noble Eightfold Path through tabs and clickable elements. The code uses D3 v7 APIs including `d3.forceSimulation` for the network, `d3.hierarchy` and `d3.partition` for the sunburst, and SVG with CSS transitions for animated tab switching and hover effects. Data is embedded directly in the script.

NNita
69% match
Loading thumbnail…

Teachings Viz as layers

This interactive visualization presents Buddha’s teachings as concentric colored circles, with inner layers representing core concepts and outer layers showing derived principles. Clicking a circle or a legend item displays the teaching’s details in a panel below. Built with D3.js v7, the SVG circles use d3 selection and data binding, with opacity adjustments on click to highlight selected layers. The legend is interactive, and the visualization supports responsive layout through CSS media queries.

NNita
69% match