Fork of The Four Noble Truths - 2

100%

Fork of The Four Noble Truths - 2

✓ Published1🌍 Public

Last edited Jun 10, 2025

Created on Jun 10, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

NNita

95% match

Loading thumbnail…

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.

NNita

92% match

Loading thumbnail…

The Four Noble Truths - 1

This visualization presents the four noble truths of Buddhism as a set of clickable bars. Each bar displays a number and the corresponding Sanskrit title, with the full truth text and an explanatory description appearing in a details panel upon selection. The chart is built using React and D3 v7, leveraging `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom` for the layout, with data parsed from a local CSV file.

NNita

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

76% match

Loading thumbnail…

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.

NNita

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

73% match

Loading thumbnail…

Fork of Fork of The Two Truths

This visualization presents the Buddhist concepts of Relative and Absolute Truth as a two-circle diagram, showing their distinct characteristics and mutual relationship. The data is hardcoded in JavaScript and rendered as an SVG using D3 v5, with each circle displaying its associated traits. The code draws shapes, text labels, and relationship arrows between the two concepts, while the accompanying HTML and CSS provide the explanatory narrative and page styling. The visualization uses a Venn-like layout to illustrate how the two truths overlap and interconnect rather than remain separate.

NNita

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

73% match