Mind-Body Connection Visualization

Fork of Body-Speech-Mind Connection

This interactive visualization maps the interconnected categories of Body, Mind, Thoughts, Emotions, and Feelings as a pentagon of linked nodes arranged with D3.js and React. Users can hover over categories to highlight relationships, click individual component nodes to reveal descriptive detail panels, filter components by level, and toggle cross-category connection lines. The visualization reads data from a CSV file and renders through D3.js selections with scales, tooltips, and animation transitions.

91% match

Mind Map

A mind map visualizes a hierarchical tree structure, with nodes representing names like "Java," "Servlet," and "Salim," connected by curved links. Users can click nodes to collapse or expand their children, with smooth 750ms transitions animating the layout changes. The example uses D3.js v3 with `d3.layout.tree` for positioning, `d3.svg.diagonal` for link paths, and SVG elements styled via CSS. Node and link positions update dynamically through `transition` calls, while the fixed-depth spacing and click toggle behavior are explicitly implemented in the code.

AAvinash kumar jha

69% match

Mind and Emptiness

This animated D3.js visualization depicts the Buddhist relationship between mind and emptiness through a circular diagram with four interactive segments. A central gold circle represents the mind, surrounded by four colored arcs that each illustrate a philosophical aspect—inherent emptiness, interdependence, realization, and non-duality. Hovering over a segment highlights it and dims the others while revealing its associated description. The visualization uses D3's `pie` and `arc` generators to create the equal-size segments, with text wrapping for labels and smooth transitions on hover.

69% match

Various Emotions

An interactive grid of eighteen cartoon faces displays six distinct emotions—happy, sad, surprised, angry, neutral, and worried—at three intensity levels each. As the mouse moves, each face dynamically adjusts its emotional expression based on proximity, scaling features like eye size, eyebrow angle, and mouth curvature through smooth interpolation. Built with React and D3, the visualization uses SVG primitives including circles, ellipses, and paths to render facial components, with effects like tears, sweat drops, steam, and sparkles appearing conditionally per emotion.

CCurran Kelleher

69% match

The Five Aggregates

This interactive circular visualization depicts the Buddhist Five Aggregates (Skandhas) that constitute a living being. It uses a D3.js pie chart with equal segments for each aggregate, showing the relationships between Form, Feeling, Perception, Mental Formations, and Consciousness. Hovering over an arc expands it and reveals a detailed description with examples in the adjacent panel, while the center displays "Anatta" (Not Self). The code uses D3's `pie()`, `arc()`, and `select()` APIs, with a `ResizeObserver` for responsive scaling. The visualization includes an explanation view when nothing is hovered, sourced from Buddhist teachings.

12 links of dependent arising

This interactive visualization presents the 12 links of dependent arising from Buddhist philosophy in a radial circular layout. React manages the application state, while D3.js v7 handles the data-driven visualization. Data loaded from a CSV file drives a circular chart where each link is positioned by intensity-based radius and angular coordinates, with points, connecting lines, and a closed path rendered using line generators and scales. Users can hover for descriptions, click to filter and focus on specific links, and view color-coded categories through an interactive legend.

Untitled

This interactive network diagram uses a force-directed layout to show relationships between six nodes, with link thickness encoding connection strength. The visualization reads data from a JSON file containing nodes and links, then renders circles and lines as SVG elements. Built with React and D3 v4, it uses `d3.forceSimulation` for physics-based layout, `d3.forceLink` for link constraints, `d3.forceManyBody` for node repulsion, and `d3.forceCenter` for centering. Nodes are draggable via `d3.drag`, allowing users to manually reposition elements while the simulation continues.

HHeide

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.