🚴 Journeys

J001: Create New Visualli

J002: 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

J003: 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)

A. Location

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

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)