The Four Noble Truths - 1

Fork of The Four Noble Truths - 2

This interactive React and D3 visualization presents the Four Noble Truths of Buddhism as four clickable bars. Built with d3.scaleBand and d3.axisBottom, it displays each truth’s number, Sanskrit title, and description. Selecting a bar reveals detailed explanatory text in a panel, including the Eightfold Path components for the fourth truth. Data loads from a CSV file via d3.csv, with React state managing the selected truth and window dimensions.

92% match

Fork of Fork of Fork of The Four Noble Truths - 4 -Buddha iMage

This interactive visualization presents the Four Noble Truths of Buddhism as a set of clickable bars. Each bar displays the truth’s number and Sanskrit title; clicking one reveals a detailed description in a dedicated panel. The chart employs D3.js v7 for all SVG rendering, scales, and axes, while React manages the application state. A Buddha silhouette path is drawn behind the chart. The data comes from a CSV file.

89% match

Fork of Fork of The Four Noble Truths - 3

An interactive D3.js visualization presents the Four Noble Truths as clickable bars, with a path-drawn Buddha silhouette in the background. Clicking a bar reveals a details panel with the truth's description and, for the second and fourth truths, additional structured information about craving and the Noble Eightfold Path. The React-based implementation uses `d3.scaleBand` and `d3.axisBottom` to position and label each truth, with CSV data loaded via `d3.csv`. The visualization uses a muted, earthy color palette with sans-serif typography and a warm panel background.

87% match

The Path

This interactive tree diagram maps the Four Noble Truths and the eightfold path, using d3.layout.tree and d3.svg.diagonal to render an animated, collapsible hierarchy. Nodes and links are drawn as SVG elements, with pink-outlined circles and semi-transparent green paths, while clicking a node triggers a smooth transition via D3’s update function. The code includes mock parent properties like “Cars” and “Hyundai” that appear inconsistent with the Buddhist theme.

71% match

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.

The Noble Eightfold Path: The Buddha’s Guide to Liberation

An interactive tree visualization presents the Buddha's Noble Eightfold Path, organizing its eight practices into three divisions—Sīla, Samādhi, and Paññā—with each node displaying English names, Pali terms, and descriptive text. Hovering over any node scales it and reveals its full explanation in an adjacent panel, while links and colors encode the hierarchical relationships between categories. Built with D3.js v7's hierarchy and tree layouts, the visualization uses SVG rendering, animated transitions, and gradient fills, all orchestrated through a React 19 component architecture with responsive dimensions tracked via ResizeObserver.

The Two Truths

This visualization presents the Buddhist concepts of Relative and Absolute Truth as two parallel, interactive panels. It explains how conventional, everyday reality coexists with a deeper understanding of interdependence and emptiness, showing both as valid, complementary perspectives. The page uses JavaScript to add smooth scrolling, hover effects that lift each truth section, and a document fade-in on load. It relies on standard DOM APIs like `document.addEventListener` and `querySelectorAll` to manage interactions across the HTML and CSS structure.

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.