🚴 Journeys

J001: View Visualli

This highlights the "core visual elements" that elevate any visual into Visualli.

Structure: Macro to Micro\ Visual Effects:\ ✨ Z-Axis Nesting uses depth to show that a sub-topic is literally "inside" or "below" its parent topic, reinforcing the mental model of containment.

✨ Gradual Reveal has two parts.

1. A continuous "forward-zoom" zoom until node until the focal node saturates its boundaries exceed the viewport, seamlessly transitioning into the node's internal content as the new primary view.
2. A continuous "reverse-zoom" that "collapses" the environment back into a single node.

✨ Chromatic Immersion: The node expands to become the background, signaling that the user is "inside" the bubble.

✨ Magnitude Markers signal the density of a node via a numerical badge, allowing users to gauge the topic before diving deep.

✨ Semantic Peek shows briefly a "mini-summary" as the user hovers over an entry to provide instant context.

✨ Semantic Anchor shows in-situ definitions for key terminology via a dotted-underline highlight and hover-triggered modal, allowing learners to bridge "Knowledge Gaps" without losing their pace.

✨ Breadcrumbing shows a trail of previously visited layers to reduce the cognitive load of navigation.

J002: Visualli Archetypes

Beyond the "core visual elements" above, Visualli Archetypes act as plug-in mental models that help you synthesize, arrange, and showcase information in ways that stick.

Leveraging The LATCH Framework, developed by Richard Saul Wurman (Founder of TED), which argues there are only five-ways to organize any information.

• L(ocation)
• A(lphabet)
• T(ime)
• C(ategory)
• H(ierarchy)

1. Location

LATCH's Location dimension is easy when there's a well known spatial concept, such the world map or the body, but the real challenge starts when the concepts are abstract.

Here are the main strategies to approach abstract concepts:

a) Metaphor space When concepts don't have a natural physical location, we can map them onto a familiar spatial structure that carries meaning. A spectrum (left–right), a hierarchy (top–bottom), or a centre-periphery layout (core vs peripheral ideas). The key is that the spatial arrangement itself teaches something like proximity = relatedness, position = importance or sequence.

b) Conceptual axes Two abstract dimensions become X and Y axes. For example, when mapping cognitive biases: one axis could be "affects perception vs affects decision-making," the other "individual vs social." Each concept gets placed based on its actual properties, not arbitrarily. This turns location into meaningful information, even without a physical map.

c) Emergent clustering - proximity as category

Group related concepts into regions without hard boundaries, like a galaxy of nodes where proximity signals relation. Users feel the structure spatially without needing an explicit grid. This works especially well when the hierarchy isn't strict.

d) Invented geography

Create a fictional "place" that mirrors the conceptual structure. Ikigai naturally maps to overlapping zones; Maslow's hierarchy maps to a mountain or pyramid. The invented space makes location memorable even if it's not geographically real.

Here's a diagram showing these four strategies as a decision guide for when to use each:

Here's non-obvious example applied to psychological defense mechanisms

Each strategy answers a different question spatially:

Use conceptual axes when the concepts genuinely vary along two independent, meaningful dimensions and knowing where something falls on both dimensions is itself the insight. The axis labels do the teaching. Best when your concepts form a continuous field rather than discrete groups.

Use a metaphor when a well-known spatial structure already exists in culture that maps onto your domain. The iceberg, a ladder, a funnel, a compass. The user brings prior knowledge of the metaphor, so we get meaning for free and no legend needed. The risk is forcing concepts into a metaphor that doesn't quite fit, which misleads more than it helps.

Use clustering when the concepts belong to natural families, but the families aren't perfectly discrete. If a concept genuinely straddles two groups, clustering lets it live in the overlap honestly. This is the most structurally faithful strategy when taxonomy is fuzzy.

Use invented geography when the primary relationship is a progression: maturity, complexity, time, scale. Altitude, depth, distance from centre, these all communicate hierarchy without needing axes or labels. The invented landscape makes the gradient visceral.

This caters to "spatial and geographic" data to show Proximity, Orientation, and Contextual Relationships

A practical test we could build into Visualli's onboarding:

1. Can I describe why concept A is "further right" than concept B? → axes
2. Is there a metaphor my users already know that works here? → borrowed metaphor
3. Do some concepts belong to more than one group? → clustering
4. Is there a clear "better / more / higher / later"? → invented geography

Structure: 2D-Coordinate Maps, Anatomical Overlays etc

Visual Effects:

✨ Heatmapping uses color intensity to show "density" of information or activity within a specific spatial zone.

<>

B. Alphabet

This caters to "reference and indexical" data to show "fast retrieval of known terms".

Structure: Linear Lists, A to Z Indexing etc

Visual Effects:

✨ Focal Highlighting uses "pop-out" effect where the current term is enlarged or illuminated, using the Von Restorff Effect to grab attention.

✨ Kinetic Scrolling uses smooth momentum-based movement through the list to provide a tactile sense of the dataset's volume.

<>

C. Time

This caters to "temporal and sequential" data to show "progression, causality, and evolution" over time.

Structure: Linear Timelines, Cyclical Loops, Branching Choice Trees etc

Visual Effects:

✨ Particle Trails which are tiny animated dashed lines that travel along the edges between nodes in the direction of the flow.

✨ Temporal Compression enables "pinch-to-zoom" into a specific moment or zoom out to see the big picture, maintaining the same visual archetype at different scales.

D. Category

This caters to "relational and qualitative" data to show "similarity, clustering, and shared attributes"

Structure: The Web (network), Venn Diagrams, Clusters (Groups), Thematic Webs

Visual Effects:

✨ Chromatic Weighting uses distinct "Color Families" to group similar nodes.

✨ Pulsing/Glow where when one category is hovered on (or) long-touched, all related nodes pulse to show hidden similarities.

✨ Gravity Wells where nodes with more "connections" physically pull other nodes closer to them in the UI, visually representing the centrality of an idea

<>

E. Hierarchy

This caters to "quantitative and organizational" data to show "scale, ranking, authority, and magnitude"

Structure: The Tree, Nested Containers (Russian Dolls), The Scale/Continuum, Pyramids

Visual Effects:

✨ Scale-Proportional Sizing uses physical size of a node to correlate directly to its relative value (e.g., a "Major Concept" node is 2x larger than a "Minor Detail" node)