100%

Fork of Fork of Fork of HTML Starter

✓ Published0🌍 Public

Last edited Mar 18, 2025

Created on Mar 18, 2025

Forked from 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.

AI-generated description

Banyan Tree Visualization

An interactive visualization of a banyan tree, under which Buddha attained enlightenment, implemented with HTML, CSS, and D3.js.

Features

Complete banyan tree with detailed trunk, branches, and distinctive aerial roots
Realistic leaf clusters with individual leaves showing veins and texture
Multiple aerial roots hanging down from branches - the defining feature of banyan trees
Subtle animation simulating gentle movement in the breeze
Light rays emanating from behind the tree, representing enlightenment
Buddha silhouette in meditation pose
Floating particles representing spiritual energy
Serene color palette inspired by nature and dawn

Technical Highlights

SVG path manipulation to create the organic tree structure
Hierarchical component structure with trunk, branches, aerial roots, and leaves
Custom animation using D3 transitions for smooth movement
Dynamic light effects using SVG filters and gradients
Responsive design that adapts to different screen sizes
Layered composition for visual depth

🍃 May this visualization inspire peace and mindfulness 🧘

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This interactive visualization explores Buddhist philosophy through a serene, animated composition. It displays a rotating Dharma wheel, the Noble Eightfold Path arranged in a circular diagram, and floating lotus flowers and Bodhi tree leaves. The piece uses D3.js v7 with SVG rendering and custom animations via `transition.attrTween` to rotate the wheel. It also generates meditation ripple effects and periodically displays Buddha quotes. A soft gradient background and emoji-based graphics create a peaceful, mindful atmosphere, with hover interactions on the Bodhi leaves.

NNita

85% match

Loading thumbnail…

Fork of Fork of D3 AI Template

This visualization renders a full-screen animated field of 1,000 golden Buddha silhouettes, each with a radial gradient glow, drifting and rotating randomly over a black background. Using D3.js v7, it creates SVG groups via data joins, builds custom paths for the Buddha shapes, and applies perpetual `transition` animations with randomized positional offsets. The code also uses a hover effect with CSS transforms, and the layout relies on `window.innerWidth` and `window.innerHeight` for full-window scaling.

NNita

82% match

Loading thumbnail…

Fork of tree

A tranquil scene shows a golden Buddha meditating beneath a recursively generated green tree on a grassy hill, with animated clouds drifting across a gradient sky. The tree is built with a recursive `drawBranch` function that computes branching paths using trigonometry, rendering SVG lines with varying stroke widths and colors. The clouds animate via React state and `requestAnimationFrame`, updating their horizontal offsets every 50 milliseconds. The visualization combines static SVG shapes for the Buddha and landscape with dynamic, scripted animation for the cloud movement.

Nnishanththouta16@gmail.com

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

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

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

80% match

Loading thumbnail…

Fork of Buddha

Fork of Buddha is an animated visualization of a synthetic dataset, where eleven colored circles expand, reposition, and cycle through their specified radii and colors against a black background. Using D3 transitions, the circles ease in from a radius of zero to a fixed size, then shift to new coordinates with a fast linear motion, while the entire composition fades to 60% opacity. The circular layout and overlapping translucent disks create a Buddha-like silhouette, rendered as a looping, meditative animation from the included CSV data.

Mmudunurirahulvarma98@gmail.com

79% match