Skip to main content
SimilarExport ZIP
100%

Fork of Everything in One

✓ Published0🌍 Public
NNita
Last edited May 20, 2025
Created on May 20, 2025
Forked from All 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.

AI-generated description

Buddha's Teachings Radial Tree Visualization

An interactive visualization that presents Buddha's teachings in a hierarchical radial tree layout. The visualization allows users to explore the interconnected concepts of Buddhism starting from the core teaching and branching out to more specific aspects.

Overview

This project uses D3.js to create a beautiful, interactive radial tree visualization of Buddhist teachings. The teachings are arranged hierarchically, starting with Buddha's core teachings at the center and branching out to more specific concepts.

Key features:

  • Radial tree layout presenting Buddhist teachings hierarchically
  • Interactive zoom and pan functionality
  • Responsive design that adjusts to window size
  • Visually distinct styling for different levels of teachings

Demo

View live demo (Add your live demo link here)

Screenshot

Buddha's Teachings Visualization (Add a screenshot when available)

Structure

The visualization follows a hierarchical structure:

  • The root represents "Buddha's Teachings"
  • Main branches include "Four Noble Truths" and other core teachings
  • Each primary teaching branches into more specific concepts
  • The hierarchy continues up to 3-4 levels deep

Technology Stack

  • D3.js (v7) for data visualization
  • HTML5 & CSS3
  • Vanilla JavaScript with ES modules
  • Responsive design for multiple screen sizes

Project Files

  • index.html - Main HTML file
  • main.js - Entry point that initializes the visualization
  • visualization.js - Core visualization logic
  • dataLoader.js - Handles loading the hierarchical data
  • zoom.js - Implements zoom and pan functionality
  • utils.js - Utility functions for the visualization
  • styles.css - Styling for the visualization
  • data.json - Hierarchical data structure of Buddha's teachings

Usage

  1. Clone the repository
  2. Open index.html in a web browser or host it on a web server
  3. Interact with the visualization:
    • Zoom in/out using the mouse wheel or touchpad gestures
    • Pan by clicking and dragging
    • Explore the hierarchical structure of Buddha's teachings

Features

  • Interactive Navigation: Zoom and pan to explore different levels of detail
  • Hierarchical Representation: Clear parent-child relationships between concepts
  • Responsive Layout: Automatically adjusts to different screen sizes
  • Visual Hierarchy: Root, branches, and leaf nodes are visually distinct
  • Text Orientation: Text labels are positioned for optimal readability

Development

To modify or extend this visualization:

  1. Update data.json to change the content or structure of the teachings
  2. Modify styles.css to adjust the visual appearance
  3. Edit visualization logic in the JS files to change the behavior or layout

License

[Add your license information here]

Credits

  • Buddha's teachings data compiled from [add your sources]
  • Visualization built with D3.js
MIT Licensed

Similar vizzes

Loading thumbnail…

All in One

This radial tree visualizes the hierarchical structure of Buddha's teachings, from core concepts like the Four Noble Truths down to individual, simpler precepts. It uses D3.js v7 with the `d3.hierarchy` and `d3.cluster` APIs to compute the circular layout. The SVG rendering supports panning and zooming via the `d3.zoom` module, while node and text sizes adjust based on depth to maintain readability. The data is loaded from a JSON file.

NNita
90% match
Loading thumbnail…

All in One

A radial tree visualizes the hierarchical structure of Buddha's teachings, branching from central concepts like the Four Noble Truths into detailed subtopics. The visualization uses D3's `d3.cluster` layout to arrange nodes in a circular pattern, with SVG paths and text labels. Interactive pan and zoom controls are implemented via `d3.zoom`, while nodes display at varying depths with adjusted font sizes to accommodate the dense hierarchy. The tree draws from a JSON data source depicting Buddhist philosophy concepts.

NNita
89% 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
84% match
Loading thumbnail…

Fork of Different teachings together connected

This interactive visualization presents the layers of Buddha's teachings as interconnected concepts, offering multiple perspectives through tabbed views. It includes an onion-layer diagram of core teachings like the Four Noble Truths, a relationship network, a sunburst of teaching components, a life timeline, guided meditations, comparative traditions, and learning pathways. Built with d3.v7, it uses SVG for rendering and animations for transitions, with click interactions filtering and displaying details in an info panel, while timeline and meditation views load dynamically via tab selection.

NNita
83% 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
82% match
Loading thumbnail…

Fork of Noble Eightfold Path

This interactive visualization presents the Buddhist Noble Eightfold Path as a radial tree, branching from the central path into three colored categories—moral virtue, meditation, and wisdom—with two to three child nodes each. Built with d3.v7 and SVG, it uses the `d3.tree` layout with customized link functions and radial gradients to differentiate hierarchy levels. Node styling uses CSS transitions and drop-shadow filters, while the fixed y-coordinate adjustments create a structured, top-down flow. The code loads data from an embedded JavaScript object, with interactive hover effects that scale nodes and intensify text, all rendered within a stylized gradient-background container.

NNita
82% match
Loading thumbnail…

Fork of Fork of Noble Eightfold Path

This visualization displays the Buddhist Noble Eightfold Path as a hierarchical tree, organized into three main categories (Moral Virtue, Meditation, and Wisdom) with their eight constituent elements. Using D3.js v7, the code constructs an SVG rendering with custom radial gradients, symmetrical node positioning, and hover interactions that highlight nodes and links. The visualization includes descriptive tooltips, text backgrounds, and responsive layout adjustments, all styled with a warm earth-tone color palette defined in CSS custom properties.

NNita
82% 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
81% match