Skip to main content
SimilarExport ZIP
100%

All in One

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

AI-generated description

Radial Tree of Buddha's Teachings

This interactive visualization presents Buddha's teachings in a radial tree layout using D3.js. The hierarchical structure allows exploration of key Buddhist concepts starting from the central node and branching outward to show relationships between different teachings.

Features

  • Radial Layout: Displays Buddha's teachings in a circular hierarchical structure
  • Interactive Navigation: Pan and zoom functionality to explore different parts of the tree
  • Responsive Design: Automatically adjusts to fit different screen sizes
  • Visual Hierarchy: Node and text sizes adjust based on their depth in the hierarchy

Technical Implementation

The visualization is built using:

  • D3.js v7: For data binding and visualization
  • ES6 Modules: For clean code organization and separation of concerns
  • Hierarchical Data Structure: JSON format representing Buddhist teachings

Project Structure

  • index.html: Main HTML entry point
  • main.js: Application initialization and window resize handling
  • visualization.js: Core visualization rendering logic
  • dataLoader.js: Fetches and processes the hierarchical data
  • zoom.js: Implements pan and zoom functionality
  • utils.js: Helper functions for calculating positions and styling
  • styles.css: Visual styling of the tree nodes and links
  • data.json: Hierarchical data of Buddha's teachings

Usage

Open index.html in a modern web browser. Navigate the visualization using:

  • Zoom: Mouse wheel / pinch gesture
  • Pan: Click and drag anywhere on the visualization

Data Structure

The visualization represents Buddha's teachings starting with core concepts like the Four Noble Truths and branching out to more detailed teachings. Each node represents a specific teaching, with the hierarchical layout illustrating how concepts relate to one another.

Visual Design

The visualization uses a warm color palette inspired by traditional Buddhist art:

  • Soft parchment background
  • Amber node circles
  • Dark brown text and connections
  • Root node emphasized with darker coloring
  • Text with subtle white glow for better readability
MIT Licensed

Similar vizzes

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
96% 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
90% 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
78% 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
77% 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
77% 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
76% match
Loading thumbnail…

Noble Eightfold Path

This interactive D3.js visualization presents the Noble Eightfold Path as a hierarchical tree with three color-coded categories—Moral Virtue, Meditation, and Wisdom—branching into eight specific practices. It uses `d3.tree()` and `d3.hierarchy()` to compute node positions, with `d3.linkVertical()` generating curved paths between nodes. Text labels include Pali terms and supporting background rectangles for readability, while hover effects highlight individual nodes. The SVG rendering includes custom node positioning and responsive layout adjustments.

NNita
76% match
Loading thumbnail…

Fork of HTML Starter

A hierarchical tree visualization depicts the Noble Eightfold Path’s three divisions: Sīla (red), Samādhi (orange), and Paññā (purple), with eight leaf nodes for its practices. Rendered as an SVG using D3 v7, it applies `d3.tree()` and `d3.hierarchy()` to compute layout, then draws vertical links via `d3.linkVertical` and styled circles with text labels. The root node is green, and branch colors are defined in a static data object mirroring the README.

NNita
76% match