Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published1🌍 Public

Last edited Jul 12, 2025

Created on Jul 12, 2025

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.

AI-generated description

The Three Divisions

Sīla (Moral Virtue) - Red

Right Speech (Sammā-vācā)
Right Action (Sammā-kammanta)
Right Livelihood (Sammā-ājīva)

Samādhi (Meditation) - Orange

Right Effort (Sammā-vāyāma)
Right Mindfulness (Sammā-sati)
Right Concentration (Sammā-samādhi)

Paññā (Wisdom) - Purple

Right Understanding (Sammā-diṭṭhi)
Right Thought (Sammā-saṅkappa)

MIT Licensed

Similar vizzes

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

85% 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

85% 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

84% match

Loading thumbnail…

Fork of HTML Starter

This visualization shows a hierarchical food category tree, with food items as leaf nodes branching from broader categories like fruits, vegetables, and proteins. The code uses `d3.hierarchy` and `d3.tree` to compute the layout, then renders the structure as SVG paths and circles with `d3.linkVertical`. Node shapes vary by depth: a red rectangle for the root, blue circles for categories, and green circles for individual food items. Colors and node sizes are set directly in the D3 v7 code, which generates all elements dynamically from an inline JavaScript data object.

Bbalaaswitha@gmail.com

83% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive visualization presents the Noble Eightfold Path as a clickable dharma wheel built with D3.js v7 and rendered as SVG. The wheel's spokes correspond to the eight practices, grouped into Wisdom, Ethics, and Concentration categories, and selecting a spoke updates the adjacent information panel with details. The code uses D3's selection and event-handling APIs to manage the SVG elements and display the associated textual content.

NNita

83% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive D3.js visualization depicts a banyan tree, symbolizing the site of Buddha's enlightenment. It renders an SVG tree with a detailed trunk, branches, leaf clusters, and aerial roots, all animated with gentle swaying. A Buddha silhouette sits at the base, with pulsing light rays and floating particles conveying spiritual energy. The scene uses SVG paths for the organic structure and D3 transitions for animation, responding to window resizing.

NNita

80% match

Loading thumbnail…

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.

NNita

79% match

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization depicts a banyan tree leaf, the sacred site of Buddha's enlightenment, rendered in a serene, dawn-toned palette. The piece shows an organic leaf with a detailed vein structure and subtle texture, animated to sway gently as if in a breeze. Light rays and floating particles suggest spiritual energy around the leaf. Built with D3.js v7, the visualization uses SVG path manipulation for the leaf shape and transitions to create the animation, along with SVG filters and gradients for dynamic light effects.

NNita

79% match