Skip to main content
SimilarExport ZIP
100%

Fork of Body-Speech-Mind Connection

✓ Published1🌍 Public
NNita
Last edited Apr 14, 2025
Created on Apr 14, 2025

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.

AI-generated description

Mind-Body Connection Visualization

This interactive visualization explores the interconnected nature of human experience, showing the relationships between different aspects of mind, body, emotions, thoughts, and feelings.

Features

  • Interactive visualization of the mind-body connection
  • Different levels of components within each category
  • Ability to filter by level
  • Highlight connections between components
  • Detailed view for selected components
  • Responsive design that adapts to window size

How to Use

  1. Hover over categories to highlight them
  2. Click on individual components to view details
  3. Use the action buttons at the bottom to filter by level or show connections
  4. Click on legend items to focus on specific categories

Technologies Used

  • React for UI components
  • D3.js for data visualization
  • CSS for styling
MIT Licensed

Similar vizzes

Loading thumbnail…

Body-Speech-Mind Connection

This interactive visualization maps the interconnected relationships among five domains of human experience: Body, Mind, Thoughts, Emotions, and Feelings. Using data from a CSV file, it arranges these categories in a pentagonal layout, with each category containing up to three level-based components. The D3.js and React-based interface allows users to filter by level, click nodes for detailed descriptions, highlight related components across categories, and toggle connection lines to reveal how different aspects influence one another. Interactive elements include tooltips, a detail panel, and an action bar for filtering and resetting.

NNita
91% match
Loading thumbnail…

Fork of Fork of React & D3 Vibecoding Starter

This interactive network graph visualizes relationships among car types, transmission types, and door counts. Using D3.js, it loads a CSV dataset and constructs a hierarchical node-link diagram with red, steelblue, and orange circles representing the categories. The `d3.forceSimulation` API handles physics-based layout with `forceLink` for edges, `forceManyBody` for repulsion, and `forceCenter` for positioning. Users can drag nodes via `d3.drag`, with the simulation adjusting in real time. The visualization renders as an SVG with labeled nodes and gray connecting lines.

NNaveen Kumar Kolla
72% match
Loading thumbnail…

Fork of Fork of Fork of Fork of React & D3 Starter

This visualization displays a static tree diagram of vehicle categories, showing the hierarchical relationships between land, air, and water vehicles. The layout uses D3’s `d3.hierarchy` and `d3.tree` APIs to position nodes in a branching structure (svg.attr-encoded). Nodes are rendered as circles (`circle`), colored by depth (red for root, green for categories, blue for leaves), with connecting lines and text labels. The code is embedded in an HTML file using D3 v7’s `.select()`, `.enter()`, and `.append()` methods, while the accompanying `index.jsx` uses React to render a simple text message, though the diagram itself relies on the SVG API.

SSanjayRamaSwamyAdla@my.unt.edu
72% match
Loading thumbnail…

Fork of React & D3 Starter for 2.1 network

This interactive network visualization maps a conceptual space-exploration dataset, showing seven category nodes (like Planets and Missions) connected to seven object nodes (like Mars and Apollo 11). The SVG rendering uses d3.v7 to simulate a force-directed layout with d3.forceSimulation, combining link, many-body charge, center, and collision forces, while a drag interaction lets viewers reposition nodes.

RRuthvik Bairaboina
72% 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
72% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization presents a scatter plot of emotional states, with each point positioned by x and y coordinates derived from survey responses. The chart encodes user-reported emotions like "Desire," "Enthusiastic," and "Loved" in a 2D space, likely representing dimensions of emotional valence and arousal. Built with React and D3 v7, the code uses a `useData` hook to load CSV data and a `viz` function that constructs an SVG via D3's selection API. The project demonstrates a decoupled React-D3 integration pattern, where the `VizWrapper` component manages the SVG element and invokes the D3 rendering logic through a ref.

CCheng Tang
72% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization maps reported emotions onto a two-dimensional space using x and y coordinates, with each emotion rendered as a point. The code uses React's `useData` hook to load data from a CSV, and D3.js `scaleLinear` scales to position the points. A density contour overlay, created with `d3.contourDensity()` and `d3.geoPath()`, highlights clusters of emotions, colored with a custom `d3.scaleLinear` color scale. The visualization leverages D3's axes module for gridlines and margins within an SVG rendered by React.

CCheng Tang
71% match
Loading thumbnail…

Fork of Fork of 12 links of dependent arising

This radial visualization presents the twelve links of dependent arising as an interactive circular cycle, where each link’s distance from the center encodes its intensity. Built with React and D3 v7, it uses `d3.scaleLinear` for angular and radial positioning, `d3.scaleOrdinal` for categorical color mapping, and a cardinal-closed path to connect the points. Hovering reveals detailed tooltips, while clicking filters the view, highlighting the selected link and its connecting lines. Data comes from a CSV file.

NNita
71% match