100%

The Heart of Prajñāpāramitā

✓ Published1🌍 Public

Last edited Mar 27, 2025

Created on Mar 27, 2025

Forked from Fork of Fork of HTML Starter

This visualization presents an interactive exploration of Buddhist concepts from the Heart of Prajñāpāramitā through four distinct views: a force-directed network, a dharma wheel, a mandala, and a linear path to enlightenment. The main view uses d3.forceSimulation to display interconnected terms with draggable nodes, zooming, panning, and hover tooltips containing descriptions. A search feature highlights matching concepts, while a selector switches between visualization styles. The SVG-based rendering color-codes nodes by category such as Wisdom, Suffering, and Causality.

AI-generated description

The Heart of Prajñāpāramitā Visualization

An interactive exploration of Buddhist concepts from the Heart of Prajñāpāramitā, offering multiple visualization approaches to understand the interconnected nature of Buddhist philosophy.

Visualizations

This project features four different ways to visualize Buddhist concepts:

Force-Directed Network: An interactive network showing the interconnections between key Buddhist concepts. Nodes can be dragged to explore relationships, and the visualization supports zooming and panning.
Dharma Wheel: A circular visualization inspired by the Buddhist Dharmachakra (Wheel of Dharma), with concepts arranged around a wheel with spokes, symbolizing the Buddha's teachings.
Mandala View: A concentric circles visualization inspired by Buddhist mandalas, with concepts grouped by category in different rings, showing their relative importance and relationships.
Path to Enlightenment: A linear progression visualization showing the journey from ignorance and suffering to enlightenment through various Buddhist concepts, structured as stages of spiritual development.

Features

Interactive visualizations with zoom, pan, and drag capabilities
Search functionality to find and highlight specific concepts
Highlighting of connected concepts on hover
Enhanced tooltips with concept descriptions
Color-coding of concepts by category (Wisdom, Suffering, Enlightenment, Obstacles, Causality)
Responsive design that works on different screen sizes

Technologies Used

HTML5 & CSS3
JavaScript
D3.js for data visualization
Responsive design principles

MIT Licensed

Similar vizzes

Loading thumbnail…

The Heart of Prajñāpāramitā

This visualization maps the core concepts of Buddhism, illustrating the relationships between ideas such as the Four Noble Truths, the Eightfold Path, and Śūnyatā. An interactive network graph and an animated dharma wheel show conceptual clusters and links between terms, rendered as SVG using D3.js’s force-directed layout (d3.forceSimulation). A control panel allows switching between the network view, a wheel, and a mandala visualization.

NNita

93% match

Loading thumbnail…

Fork of The Heart of Prajñāpāramitā

The Heart of Prajñāpāramitā presents an interactive concept map of Buddhist philosophy, visualizing relationships between key terms like Śūnyatā, Karma, and the Four Noble Truths from the Heart Sutra. The visualization uses D3 v7's force-directed graph layout with `d3.forceSimulation`, featuring draggable nodes and hover tooltips. Users can switch between four visualization types, including a dharma wheel and mandala view, and search for concepts to highlight related connections. The SVG rendering animates node positions and link opacity based on user interaction.

NNita

91% match

Loading thumbnail…

Fork of Fork of The Heart of Prajñāpāramitā

This visualization explores Buddhist concepts from the Heart Sutra through an interactive network. A force-directed graph using `d3.forceSimulation` displays sixteen concept nodes with labeled relationships, where hovering highlights connected paths and a search feature filters results. Users can switch between four views—including a Dharma wheel and mandala layout—via a dropdown selector that rebuilds the SVG visualization from the same relationship data. The accompanying text includes tooltips for Buddhist terminology.

NNita

89% match

Loading thumbnail…

Fork of Fork of Fork of The Heart of Prajñāpāramitā

This interactive visualization explores the interconnected philosophical concepts of the Heart Sutra, mapping the relationships between core Buddhist terms such as Śūnyatā (emptiness), Bodhicitta (awakened mind), and the three poisons. The view presents a force-directed network where nodes represent concepts and weighted links show thematic connections, with search and filtering capabilities to highlight specific ideas. Built with d3.js v7, the SVG network responds to hover interactions, displaying tooltips with definitions. A selector offers alternative visual layouts—including a Dharma Wheel, Mandala, Path to Enlightenment, and Wisdom & Compassion Union—though these views primarily reframe the same concept data.

NNita

89% match

Loading thumbnail…

Fork of Fork of Fork of The Heart of Prajñāpāramitā

This visualization maps the interconnectedness of core Buddhist concepts using an interactive force-directed network. The diagram displays 24 terms—such as Śūnyatā, Dukkha, and Bodhicitta—as nodes grouped by theme, with weighted links (relationships) connecting them. Built with d3.forceSimulation, the layout uses SVG and animated transitions to position nodes dynamically. Users can explore the network's structure, with hoverable controls revealing descriptions of each concept. Code includes d3.drag and d3.zoom for interaction.

NNita

86% match

Loading thumbnail…

Fork of Fork of HTML Starter

This visualization presents the Heart of Prajñāpāramitā with an interactive force-directed graph of key Buddhist concepts, colored by category and connected by weighted links. The D3.js visualization uses `d3.forceSimulation` with link, many-body, center, and collision forces to position nodes, with link thickness representing relationship strength. Concept definitions appear in a tooltip on hover. The surrounding page pairs the Sanskrit text with terminology cards, though the visualization itself derives from a hardcoded dataset of 16 concepts and 15 relationships.

NNita

83% match

Loading thumbnail…

Fork of The Teachings of the Buddha 2

This visualization explores the Bodhichitta teachings of Buddhism, centered on a pulsing heart symbol and surrounded by nodes for the Two Types of Bodhichitta and other related concepts. It uses D3.js v7 to build an SVG scene with d3 transitions for animations, including a heart pulse, floating lotus flowers, jewels, and meditation ripple effects. The design features a gradient background and color scheme representing compassion and wisdom, with quotes changing periodically. Data is drawn from Buddhist teachings on Bodhichitta, visualized through emoji-based graphics and custom SVG shapes.

NNita

77% match

Loading thumbnail…

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.

NNita

77% match