100%

Jungian "Empath Awakening" Diagram

✓ Published1🌍 Public

Last edited Aug 14, 2025

Created on Aug 12, 2025

Forked from Narcissist vs. Empath Diagram

This diagram models Carl Jung’s shadow integration process for empaths, tracing disowned traits through somatic recognition, differentiation, ownership, boundary-setting, and action before reaching an “Awakening” moment that deepens integration. It also maps failure loops into burnout and bypassing. Built with Mermaid.js state diagrams, the visualization renders a directed flow graph with labeled transitions and emphasizes the awakening node via custom JavaScript that queries SVG elements and applies an animated glow ring, styled with CSS animations.

AI-generated description

Empath Shadow Integration Diagram

A Jung-informed model for empaths practicing shadow work and boundary integrity.

This diagram illustrates the internal cycle of recognizing, owning, and transforming disowned parts (shadow) of the self into healthy action and self-integrity.

Features

Based on Carl Jung’s concept of shadow integration.
Designed for high sensitivity and empathic individuals.
Includes shadow projections, bypassing, and nervous system responses.
Offers a 6-step framework for somatic boundary-setting.
Shows how repeated projection can lead to burnout.

Usage

Open index.html in a browser.

Built with Mermaid.js.

MIT Licensed

Similar vizzes

Loading thumbnail…

Narcissist vs. Empath Diagram

This diagram maps the stages of an empath–narcissist relationship where the narcissist stays, using a Mermaid state diagram. It visualizes paths from idealization through devaluation and control, then to boundary-setting and a stable outcome, while also showing regression, submission, and separation routes. The page loads `diagram.mermaid` via `fetch` and renders it with the Mermaid library, applying custom styling through `mermaid.initialize` and direct SVG manipulation.

CCurran Kelleher

67% match

Loading thumbnail…

Fork of Emptiness

This visualization presents a meditation on emptiness and form through an interactive animated diagram. A central circle represents emptiness, surrounded by eight wedge-shaped paths that act as forms, initially displayed at reduced opacity. Hovering over the center reveals the forms, while individual forms highlight on hover; clicking a form triggers a scale-and-rotate animation that visually collapses it back toward emptiness. The piece uses React for state and dimension handling via `useDimensions` with a `ResizeObserver`, while D3 v7 manages all SVG rendering, transitions, and event handlers.

NNita

61% match

Loading thumbnail…

The Transformation of Kleshas to Wisdoms

This interactive visualization illustrates the Buddhist teaching of transforming five kleshas (mental afflictions) into wisdoms and Buddha families through an animated mandala layout. Users toggle between three modes—Kleshas, Wisdoms, and Families—to see how each affliction maps to its enlightened counterpart, with connecting lines, colored nodes, and information cards. Built with React 19 and D3.js v7, the visualization uses d3 transitions to animate circle radii and label opacity in a circular arrangement, while SVG rendering and CSS gradients create a responsive, immersive interface.

NNita

60% match

Loading thumbnail…

Fork of The Transformation of Kleshas to Wisdoms

This visualization displays the five kleshas (Ignorance, Anger, Craving, Pride, Jealousy) and their transformations into corresponding wisdoms, Buddha families, and elemental associations. Interactive buttons toggle between three modes—klesha, wisdom, and family—with animated circular nodes radiating from a central point. Built with React and d3.v7, it uses `select`, `scaleLinear`, and `transition` to animate node radii and label opacity. The code references static data arrays containing color-coded attributes for each transformation. The SVG rendering positions five colored circles at equal angular intervals with connecting lines to the center, along with element labels at a larger radius. Color schemes shift based on the selected mode, and a center label identifies the current display category.

NNita

60% match

Loading thumbnail…

Fork of The Transformation of Kleshas to Wisdoms

This interactive visualization maps the five Buddha families, showing how each klesha (Ignorance, Anger, Craving, Pride, Jealousy) transforms into its corresponding wisdom. A central hub connects to five color-coded circles arranged radially, with clickable nodes displaying family, element, and descriptive details in an info panel below. Built with React 19 and D3 v7, the example uses `select`, `scaleLinear`, and `pie` methods to render an SVG scene. Mouseover events adjust circle opacity and stroke width, while a view toggle switches between the radial diagram and detailed card layout. The data is hardcoded in a JavaScript array.

NNita

58% match

Loading thumbnail…

Fork of The Transformation of Kleshas to Wisdoms

NNita

58% match

Loading thumbnail…

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.

NNita

57% match

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

56% match