Skip to main content
SimilarExport ZIP
100%

Fork of React & D3 Vibecoding Starter

✓ Published0🌍 Public
NNita
Last edited Aug 6, 2025
Created on Aug 6, 2025

This visualization displays the Dasuttara Sutta (DN 34) as a color-coded heatmap-style grid, mapping 34 groups of teachings across ten numerical categories (ones through tens). Built with React and D3 v7, it uses `ResizeObserver` to track container dimensions and renders an SVG grid via `selection.join()`. Each cell uses `d3.select` to create rect elements with color derived from category position, while `append('title')` provides hover tooltips containing sutta content.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This interactive visualization presents Buddha’s teachings as a slowly rotating Dharma Wheel with clickable spokes representing eight concepts loaded from a CSV file. The wheel’s rotation and hover tooltips are driven by D3’s `select`, `join`, and `requestAnimationFrame`, while React manages state for dimensions and selected sections. SVG circles and lines form the wheel’s rims, hub, and spokes, with labels positioned via trigonometric calculations.

NNita
82% match
Loading thumbnail…

Fork of Fork of Fork of React & D3 Vibecoding Starter

This interactive visualization presents the Noble Eightfold Path of Buddhism as an animated Dharma Wheel, built with React and D3.js. The wheel’s spokes represent the eight path segments, drawn from a CSV file with title and description data, and rotate slowly until a segment is selected. Each spoke provides a tooltip with a detailed explanation, and clicking a spoke stops the animation and highlights that specific teaching. The visualization uses D3’s selection API and React state management to coordinate the wheel’s motion and interactive tooltip behavior.

NNita
79% match
Loading thumbnail…

Fork of React & D3 Starter

This interactive visualization maps the five kleshas to their corresponding Buddha families, wisdoms, and elements in a radial node-link diagram built with React and D3 v7. Users toggle between transformation and elements views, with clickable nodes revealing family details. The SVG rendering uses d3-selection to dynamically create and update nodes and links based on the selected mode.

NNita
78% match
Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This example visualizes the Five Aggregates of Buddhist philosophy as an interactive bar chart built with React and D3 v7. Each bar represents one aggregate—Form, Sensation, Perception, Mental Formations, and Consciousness—and clicking a bar selects it while hovering displays a tooltip with its description. The chart uses `ResizeObserver` for responsive dimensions, `scaleBand` and `scaleLinear` for scales, and custom axis rendering with text wrapping. Data is loaded from a CSV file using `d3.csv`, and the React app manages state for selection and dimensions.

NNita
77% match
Loading thumbnail…

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

An interactive visualization of the Lotus Sutra displays its 28 chapters as a horizontal tree diagram, categorized into three main parts. The background features an animated, interactive Dharma wheel with spokes, hub, and lotus petals, each providing explanatory tooltips on hover. Built with React and D3.js v7, the visualization uses SVG for rendering, with hover effects on tree nodes that highlight related links and show chapter details. The data, sourced from the README, organizes chapters into parts with descriptions and Pali terms.

NNita
76% match
Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of six small SVG visualizations, each titled "Buddha in colors," displays overlapping golden circles on a black background, with numbered labels from one to six. The example uses D3.js v6 to select a container, bind an array of integers, append SVG elements, and draw the circles and text. React 16.10.0 scripts are loaded in the HTML, though the visualization logic is handled entirely by D3. The layout is defined with CSS Grid, creating a three-column arrangement of the identical placeholder graphics.

Llikhithakarunakarreddym@gmail.com
75% match
Loading thumbnail…

Fork of A Journey Through the Lotus Sutra: Unpacking Its 28 Chapters

This interactive visualization maps the 28 chapters of the Lotus Sutra as a hierarchical tree, organized into three color-coded parts representing the One Vehicle, the Everlasting Buddha, and the Deeds of Bodhisattvas. Users can hover over nodes to see chapter descriptions and Pali titles, click to lock selections, and toggle an expand-all view. Built with React and d3.v7, it uses `d3.hierarchy` and `d3.tree` for layout, with custom SVG gradients, animated transitions, and an info panel for details.

NNita
74% match
Loading thumbnail…

Fork of Demo-3

This interactive React visualization presents the Wheel of Dhamma, depicting the Noble Eightfold Path of Buddhism as a decorative wheel with eight colored segments and spokes. Clicking any segment or spoke opens an information panel describing that path component, while an embedded audio player provides spoken explanation. Built with React and D3.js v7, it uses a pie layout with arc generators for segments, ordinal color scaling, and SVG rendering. Data loads from a local CSV file containing spoke names, values, and descriptions.

NNita
74% match