mirror of
https://github.com/OFFIS-ESC/constellation-analyzer
synced 2026-01-27 07:43:41 +00:00
28f8224284
Implements a comprehensive timeline system that enables documents to contain multiple constellation states with branching timelines. This allows users to create different versions of their analysis for temporal evolution, alternative scenarios, or what-if analysis. Core Features: - Timeline store managing multiple states per document with branching structure - Visual timeline panel with React Flow-based state graph visualization - State management: create, switch, rename, duplicate (parallel/series), delete - Per-state undo/redo history (max 50 actions per state) - Context menu for timeline node operations - Collapsible timeline panel (always visible, moved toolbar to panel header) Architecture Changes: - Document structure: removed top-level graph field, states now only in timeline - Global types: nodeTypes and edgeTypes are now global per document, not per state - State graphs: only contain nodes and edges, types inherited from document - Persistence: full timeline serialization/deserialization with all states - History system: converted from document-level to per-state independent stacks Timeline Components: - TimelineView: main timeline visualization with state nodes and edges - BottomPanel: collapsible container with timeline controls in header - StateNode: custom node component showing state info and active indicator - CreateStateDialog: dialog for creating new timeline states - RenameStateDialog: dialog for renaming existing states - Context menu: right-click operations (rename, duplicate parallel/series, delete) Document Management: - Documents always have timeline (initialized with root state on creation) - Timeline persisted with document in localStorage - Export/import includes complete timeline with all states - Migration support for legacy single-state documents Store Updates: - timelineStore: manages timelines, states, and timeline operations - historyStore: per-state history with independent undo/redo stacks - workspaceStore: saves/loads timeline data, handles global types - panelStore: added timeline panel visibility state - useActiveDocument: syncs timeline state with graph editor Context Menu Improvements: - Smart viewport edge detection to prevent overflow - Click-outside detection for React Flow panes - Consistent styling across application Files Added: - src/types/timeline.ts - Timeline type definitions - src/stores/timelineStore.ts - Timeline state management - src/components/Timeline/TimelineView.tsx - Main timeline component - src/components/Timeline/BottomPanel.tsx - Timeline panel container - src/components/Timeline/StateNode.tsx - State node visualization - src/components/Timeline/CreateStateDialog.tsx - State creation dialog - src/components/Timeline/RenameStateDialog.tsx - State rename dialog Files Removed: - src/stores/persistence/middleware.ts - Obsolete persistence middleware Documentation: - Added comprehensive timeline feature documentation - Implementation checklists and quick reference guides - Temporal analysis concepts and UX guidelines 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
35 KiB
35 KiB
Temporal & Scenario Analysis - Visual Examples
This document provides concrete visual examples of how the temporal and scenario analysis features should look and behave.
Example 1: Organizational Evolution (Temporal Analysis)
Scenario
A company tracking how its organizational structure changed during a merger over 12 months.
Timeline
2023 January → April → July → October → 2024 January
(Pre-Merger) (Integration) (Consolidation) (Restructuring) (New Structure)
State 1: January 2023 (Pre-Merger)
Graph:
Company A: 25 employees
- CEO (Alice)
- 3 Department Heads
- 21 Team Members
Company B: 18 employees
- CEO (Bob)
- 2 Department Heads
- 15 Team Members
No relations between companies yet
State 2: April 2023 (Integration)
Graph:
Merged Company: 43 employees
- Co-CEOs (Alice + Bob)
- 5 Department Heads (3 from A, 2 from B)
- Joint steering committee (6 people)
- 36 Team Members
New relations:
- Cross-company collaboration edges
- Reporting structure changes
State 3: July 2023 (Consolidation)
Graph:
Merged Company: 40 employees (-3 departures)
- Single CEO (Alice, Bob moves to advisory)
- 4 Department Heads (1 department merged)
- 35 Team Members
Changes:
- Removed: 3 actors (departures)
- Modified: Bob's role and relations
- Added: Advisory board node
State 4: October 2023 (Restructuring)
Graph:
Merged Company: 42 employees (+2 new hires)
- CEO (Alice)
- 4 Department Heads (reshuffled)
- 2 new leadership roles
- 36 Team Members
Changes:
- Added: 2 new strategic roles
- Modified: Several reporting relationships
- Removed: Steering committee (integration complete)
State 5: January 2024 (New Structure)
Graph:
Merged Company: 45 employees (+3 new hires)
- CEO (Alice)
- 4 Department Heads (stable)
- Established matrix structure
- 40 Team Members
Changes:
- Added: Cross-functional teams (new edge types)
- Added: 3 new hires
- Stabilized structure
Comparison: State 1 vs State 5
Visual Diff:
Green (Added):
- 2 new leadership roles
- 5 new team members
- 30+ cross-functional collaboration edges
- Matrix structure edges
Red (Removed):
- Bob as Co-CEO (moved to advisory)
- 1 department head (consolidation)
- 3 departed employees
- Company B as separate entity
Yellow (Modified):
- Alice: Title change (Co-CEO → CEO)
- Bob: Role change (Co-CEO → Advisor)
- Multiple reporting relationship changes
- 5 department heads repositioned in hierarchy
Summary Statistics:
- Total actors: 43 → 45 (+2, +4.7%)
- Total relations: 68 → 112 (+44, +64.7%)
- Network density: 0.037 → 0.056 (+51%)
- Average connections per person: 3.2 → 5.0 (+56%)
Actor Journey: Bob
Timeline visualization:
Jan 2023 Apr 2023 Jul 2023 Oct 2023 Jan 2024
● ● ● ● ●
CEO Co-CEO Advisor Advisor Advisor
Company B Merged Co Merged Co Merged Co Merged Co
Relations:
17 direct reports → 20 → 4 → 2 → 2
Type: Leadership → Leadership → Advisory → Advisory → Advisory
Position: Center → Center → Periphery → Periphery → Periphery
Key Changes:
Apr 2023: Became Co-CEO, gained cross-company relations
Jul 2023: Transitioned to advisor, lost most direct reports
Oct 2023+: Stable advisory role
Example 2: Therapeutic Progress (Temporal Analysis)
Scenario
Family therapist tracking a family constellation across 10 therapy sessions.
Timeline
Session 1 → Session 3 → Session 5 → Session 7 → Session 10
(Intake) (Early Work) (Breakthrough) (Integration) (Closure)
State 1: Session 1 (Intake)
Graph:
Family Members:
- Mother (Sarah)
- Father (John)
- Daughter (Emma, 16)
- Son (Michael, 12)
Relations:
- Sarah ←conflict→ John (high intensity, red)
- Sarah ←protective→ Emma (strong, dashed)
- John ←distant→ Michael (weak, dotted)
- Emma ←tension→ Michael (medium, orange)
Notes: "High conflict between parents, children taking sides,
triangulation patterns evident"
State 2: Session 3 (Early Work)
Changes from Session 1:
Modified:
- Sarah ↔ John: Conflict intensity reduced (high → medium)
- Sarah → Emma: Protective edge slightly weakened
Added:
- John ↔ Emma: New communication edge (weak)
Notes: "Parents beginning to communicate more directly,
Emma less involved in parental conflict"
State 3: Session 5 (Breakthrough)
Changes from Session 3:
Modified:
- Sarah ↔ John: Conflict edge changed to "communication" type
- John → Michael: Distant edge strengthened (engagement improving)
Added:
- Family unit node (representing whole family identity)
- All members connected to family unit
Notes: "Major breakthrough - parents able to discuss issues
without involving children. Family identity emerging."
State 4: Session 7 (Integration)
Changes from Session 5:
Modified:
- Sarah ↔ John: Communication edge strengthened
- Emma ↔ Michael: Tension edge changed to "sibling bond"
Added:
- John → Emma: Communication edge strengthened
- Sarah → Michael: New supportive edge
Notes: "Parents functioning as parental team. Sibling
relationship improving. Cross-generational boundaries
clearer."
State 5: Session 10 (Closure)
Changes from Session 7:
Modified:
- Sarah ↔ John: Strong partnership edge (blue, solid)
- All parent-child edges balanced and healthy
- Sibling edge strong and positive
Removed:
- No conflict edges remaining
- Protective/distant edges normalized
Notes: "Family system stabilized. Healthy boundaries,
effective communication, age-appropriate relationships.
Ready for termination."
Animated Visualization
Frame-by-frame description:
Frame 1 (Session 1):
- Actors positioned with visible tension
- Conflict edge pulsing in red
- Protective edge thick and binding
Frame 10 (Session 3):
- Conflict edge fading to orange
- New communication line appearing (fade in)
- Emma moving slightly away from protective orbit
Frame 20 (Session 5):
- Family unit node appearing in center (fade in)
- Connections to family unit growing out
- All actors shifting toward center
Frame 30 (Session 7):
- Sibling edge morphing from orange to blue
- Cross-connections strengthening
- Network becoming more interconnected
Frame 40 (Session 10):
- All edges now healthy colors (blue, green)
- Balanced positioning
- Strong sense of unity and connection
Actor Journey: Emma
Timeline:
Session 1 Session 3 Session 5 Session 7 Session 10
● ● ● ● ●
Role:
Parentified Transitioning De-triangulated Teen Member Healthy Teen
Position:
Between Moving out Periphery Appropriate Age-appropriate
parents of middle of conflict teen role teen role
Key Relations:
Mother: Protective, enmeshed → Lessening → Normal parental → Healthy
Father: Distant → Emerging → Communicating → Connected
Brother: Tension → Neutral → Improving → Sibling bond
Notes:
Session 1-3: Caught in parental conflict, taking mother's side
Session 5: Breakthrough allowed her to step out of middle
Session 7+: Re-established as teenager, not parent-proxy
Example 3: Strategic Planning (Scenario Analysis)
Scenario
Tech startup exploring three growth strategies over 2 years.
Current State (Branching Point)
Graph:
Team: 15 people
- 1 CEO
- 2 Co-founders (CTO, CPO)
- 3 Engineers
- 2 Designers
- 3 Sales
- 2 Marketing
- 2 Support
Product: Single core product
Market: Single vertical
Scenario A: Rapid Expansion
Branch: "Strategy A - Rapid Expansion"
Assumptions:
- $5M Series A funding secured
- Aggressive hiring
- Market demand high
- Risk: Operational complexity
Year 1:
Team: 35 people (+20)
- Added: 2 managers, 8 engineers, 4 sales, 3 marketing, 3 support
- Added: Product expansion team (5 people)
- Added: VP Sales node
Year 2:
Team: 65 people (+30)
- Added: 3 managers, 15 engineers, 7 sales, 5 marketing
- Added: International team (8 people)
- Added: VP Engineering, VP Marketing nodes
- Network density: High complexity
Outcome Analysis:
Strengths: Market capture, rapid growth, multiple products
Risks: Management overhead, coordination challenges, burn rate
Scenario B: Focused Growth
Branch: "Strategy B - Focused Growth"
Assumptions:
- $2M seed extension
- Selective hiring
- Deep vertical penetration
- Risk: Market saturation
Year 1:
Team: 22 people (+7)
- Added: 3 engineers, 2 sales, 2 support
- Focus: Core product improvement
- Strengthened: Sales/customer relations
Year 2:
Team: 30 people (+8)
- Added: 4 engineers, 2 sales, 2 marketing
- Added: Customer success team (3 people)
- Network density: Moderate, well-connected
Outcome Analysis:
Strengths: Product excellence, customer loyalty, sustainable growth
Risks: Slower growth, single product dependency
Scenario C: Pivot to Platform
Branch: "Strategy C - Platform Pivot"
Assumptions:
- $3M funding
- Product architecture change
- Partner ecosystem
- Risk: Technical debt, market confusion
Year 1:
Team: 28 people (+13)
- Added: Platform team (8 people: 5 engineers, 2 product, 1 architect)
- Added: Partner relations (2 people)
- Added: Developer advocacy (2 people)
- Restructured: Product org → Platform + Ecosystem
Year 2:
Team: 42 people (+14)
- Added: Partner ecosystem (external nodes)
- Added: Developer community node
- Added: Integration team (5 people)
- Network: Extended beyond company (partners)
Outcome Analysis:
Strengths: Ecosystem leverage, network effects, scalability
Risks: Complex coordination, dependency on partners
Comparison: Scenario A vs B vs C (Year 2)
Side-by-side visualization:
┌──────────────────┬──────────────────┬──────────────────┐
│ Scenario A │ Scenario B │ Scenario C │
│ Rapid Expansion │ Focused Growth │ Platform Pivot │
├──────────────────┼──────────────────┼──────────────────┤
│ Team: 65 people │ Team: 30 people │ Team: 42 people │
│ 5 VPs │ 3 Managers │ 4 Managers │
│ High complexity │ Moderate density │ Extended network │
│ │ │ │
│ [Dense graph] │ [Tight graph] │ [Extended graph] │
│ Many nodes │ Fewer nodes │ External nodes │
│ Hierarchical │ Flat structure │ Hub-and-spoke │
│ │ │ │
│ Burn: High │ Burn: Low │ Burn: Medium │
│ Revenue: High │ Revenue: Medium │ Revenue: Variable│
│ Risk: Medium │ Risk: Low │ Risk: High │
└──────────────────┴──────────────────┴──────────────────┘
Comparison metrics:
Metric Scenario A Scenario B Scenario C
─────────────────────────────────────────────────────────────
Team Size 65 30 42
Management Layers 4 2 3
Network Density 0.089 0.156 0.112*
Avg Connections/Person 5.8 4.7 6.3*
External Connections 5 8 24
Products 3 1 Platform
Revenue Potential $15M $5M $8M
Risk Score 7/10 3/10 8/10
* Including external partner nodes
Actor Journey: CTO (Across All Scenarios)
Scenario A (Rapid Expansion):
Current → Year 1 → Year 2
Role:
CTO (Hands-on) → VP Engineering → CTO (Strategic)
Direct Reports:
3 → 8 → 23
Focus:
Architecture → Team building → Organization leadership
Network Position:
Central-technical → Central-management → Central-strategic
Note: Increasingly removed from code, focus on scaling organization
Scenario B (Focused Growth):
Current → Year 1 → Year 2
Role:
CTO (Hands-on) → CTO (Hands-on) → CTO (Technical Lead)
Direct Reports:
3 → 6 → 10
Focus:
Architecture → Product excellence → Technical depth
Network Position:
Central-technical → Central-technical → Central-technical
Note: Remains hands-on, deep technical involvement, leads by example
Scenario C (Platform Pivot):
Current → Year 1 → Year 2
Role:
CTO (Hands-on) → CTO + Chief Architect → CTO (Ecosystem)
Direct Reports:
3 → 8 → 12
Focus:
Product → Platform architecture → External integrations
Network Position:
Central-technical → Central-hub → Hub-to-external
Note: Shifts to platform thinking, manages internal + external relations
Comparison visualization:
Scenario A Scenario B Scenario C
Year 2: (Strategic) (Technical) (Ecosystem)
Hands-on ●──────────●──────────●──────────● ●──────────●
Code: None Moderate Some
Team Size: ●──────────●──────────●──────────● ●──────────●
Huge (23) Small (10) Medium (12)
External ●──────────●──────────●──────────● ●──────────●
Focus: Low Low High
Stress: ●──────────●──────────●──────────● ●──────────●
High Low Medium
Job ●──────────●──────────●──────────● ●──────────●
Satisfaction: Medium High Medium
Example 4: Timeline Scrubber Interaction
Visual Design
┌─────────────────────────────────────────────────────────────────┐
│ Timeline: Company Evolution │
├─────────────────────────────────────────────────────────────────┤
│ │
│ ↓ (You are here) │
│ ●═══●═══●═══●═══●═══●═══●═══●═══●═══●═══●═══● │
│ │ │ │ │ │ │ │ │ │ │ │ │ │
│ J F M A M J J A S O N D │
│ a e a p a u u u e c o e │
│ n b r r y n l g p t v c │
│ │
│ ◀───────────────────────────────────────────────────────▶ │
│ [Drag to scrub through timeline] │
│ │
│ Speed: [◀] [1x] [▶] Loop: [ ] Auto-play: [ ] │
└─────────────────────────────────────────────────────────────────┘
Interaction States
Hover over state marker:
● ← Marker highlights
╱╲
╱ ╲ Tooltip appears:
┌────────────────┐
│ April 2023 │
│ Q2 Review │
│ 12 actors │
│ 18 relations │
│ Click to view │
└────────────────┘
Click state marker:
Before: After:
●───●───●───● ●───●───●───●
↑ ↑
(You are here) (You are here)
Graph updates with transition animation:
- Actors fade out/in
- Actors move to new positions
- Relations appear/disappear
- Duration: 500ms
Drag scrubber:
Dragging:
●═══●═══●═══●═══●
↑ ↑ ↑ ↑
(scrubbing through intermediate frames)
Graph continuously updates
Shows interpolated states
Smooth animation at 30fps
Multi-select for comparison:
Click first state (Shift+Click):
●═══●═══●═══●═══●
✓ (selected)
Click second state:
●═══●═══●═══●═══●
✓ ✓
└───────┘
(Range highlighted)
Compare button appears:
[⚖ Compare Selected]
Example 5: Diff Visualization Modes
Mode 1: Overlay Mode
Original graph (State A) shown in gray/muted colors
Changes overlaid with highlighting:
┌─────────────────────────────────────┐
│ │
│ Alice │
│ (gray) │
│ │ │
│ │ │
│ ┌─┴─┐ │
│ │ │ │
│ Bob Carol │
│ (gray)(gray) │
│ │
│ NEW! │
│ ┌─────┐ │
│ │ Dave │ ← Green border │
│ └─────┘ │
│ │ │
│ │ ← Green edge │
│ │ │
│ Carol │
│ │
└─────────────────────────────────────┘
Legend:
■ Green = Added
■ Red = Removed (shown faded)
■ Yellow = Modified
■ Gray = Unchanged
Mode 2: Side-by-Side Mode
┌──────────────────────┬──────────────────────┐
│ State A (Before) │ State B (After) │
├──────────────────────┼──────────────────────┤
│ │ │
│ Alice │ Alice │
│ │ │ │ │
│ │ │ │ │
│ ┌─┴─┐ │ ┌─┴─┐ │
│ │ │ │ │ │ │
│ Bob Carol │ Bob Carol │
│ │ │ │
│ │ │ │
│ │ Dave │
│ │ (green) │
│ │ │
│ Actors: 3 │ Actors: 4 │
│ Relations: 2 │ Relations: 3 │
└──────────────────────┴──────────────────────┘
Synchronized: Zoom and pan linked between both views
Mode 3: Diff List View
┌─────────────────────────────────────────────────────────┐
│ Changes: State A → State B │
├─────────────────────────────────────────────────────────┤
│ │
│ ADDED (1 actor, 1 relation) │
│ ✓ Dave (Person) │
│ ✓ Carol → Dave (Collaboration) │
│ │
│ REMOVED (0) │
│ (none) │
│ │
│ MODIFIED (1 actor) │
│ ○ Carol │
│ • Position: (120, 80) → (180, 100) │
│ • Connections: 1 → 2 │
│ │
│ UNCHANGED (2 actors, 2 relations) │
│ [Collapse to hide] │
│ │
│ Summary: │
│ Total changes: 3 │
│ Actors affected: 2 (50%) │
│ Relations affected: 1 (33%) │
│ Network density change: +15% │
└─────────────────────────────────────────────────────────┘
Mode 4: Animated Diff
Animation sequence (10 frames, 2 seconds total):
Frame 0 (State A):
Alice, Bob, Carol visible
Frame 3:
Dave fades in (opacity 0.3)
Frame 5:
Dave fully visible
New edge starts growing from Carol
Frame 7:
Edge fully connected
Carol moves to new position (interpolated)
Frame 10 (State B):
Final state
Highlighting fades out over 1 second
Visual cues during animation:
- New elements pulse briefly
- Removed elements fade with red glow
- Modified elements highlighted during change
Example 6: Actor Journey Visualization
Journey Timeline View
Actor: Sarah Chen
Timeframe: January 2023 - December 2023
┌─────────────────────────────────────────────────────────────────┐
│ │
│ Jan Feb Mar Apr May Jun Jul Aug Sep │
│ ●──────●──────●──────●──────●──────●──────●──────●──────● │
│ │ │ │ │ │ │ │ │ │ │
│ │ │ │ │ │ │ │ │ │ │
│ Eng Eng Sr.Eng Sr.Eng Lead Lead Manager Manager Manager│
│ │
│ Connections: 3→3→4→5→6→7→8→10→12 │
│ │
│ Key Events: │
│ Mar: Promotion to Senior Engineer │
│ May: Promoted to Team Lead │
│ Jul: Became Engineering Manager │
│ Sep: Team expanded significantly │
│ │
│ Property Changes: │
│ • Title changed: 3 times │
│ • Direct reports: 0→0→2→2→4→4→8→8→8 │
│ • Position: Center-left → Center (more central) │
│ │
│ Relationship Evolution: │
│ • Peer relationships: 3→3→4→4→3→3→2→2→1 (declining) │
│ • Managerial relations: 0→0→0→2→4→4→8→10→12 (growing) │
│ • Cross-team relations: 0→0→1→2→3→5→6→8→10 (growing) │
└─────────────────────────────────────────────────────────────────┘
Journey Graph View
Visual representation of Sarah's network evolution:
January (Starting point):
[Sarah]
│
┌────┼────┐
│ │ │
[Tom][Ann][Lee]
(peers)
May (Became Team Lead):
[Sarah] ← Now has direct reports
│
┌────┼────┬────┐
│ │ │ │
[Tom][Ann][Lee][New]
↓ ↓
[Jr1][Jr2]
September (Engineering Manager):
[Sarah]
│
┌────────┼────────┐
│ │ │
[Lead1][Lead2][Lead3]
│ │ │
┌─┼─┐ ┌─┼─┐ ┌─┼─┐
[T][T] [T][T] [T][T]
Network metrics:
Betweenness centrality: 0.05 → 0.15 → 0.42 (×8.4 increase)
Degree centrality: 0.12 → 0.18 → 0.35 (×2.9 increase)
Closeness centrality: 0.25 → 0.32 → 0.48 (×1.9 increase)
Example 7: Scenario Branching Visualization
Tree View
┌─────────────────────────────────────────────────────────────────┐
│ Scenario Tree: Strategic Planning │
├─────────────────────────────────────────────────────────────────┤
│ │
│ Current State │
│ (Jan 2024) │
│ ● │
│ │ │
│ ┌──────────────┼──────────────┐ │
│ │ │ │ │
│ Scenario A Scenario B Scenario C │
│ (Rapid Expand) (Focused) (Platform) │
│ ● ● ● │
│ │ │ │ │
│ ┌────┼────┐ ┌────┴────┐ ┌────┴────┐ │
│ │ │ │ │ │ │ │ │
│ Q2 Q3 Q4 Q2 Q3 Q2 Q3 │
│ ● ● ● ● ● ● ● │
│ │ │ │
│ Q4-A1 │ │
│ ● ┌────┴────┐ │
│ │ │ │ │
│ Q4-A2 Q4-C1 Q4-C2 │
│ ● ● ● │
│ │
│ Colors: │
│ ● Blue = Scenario A branch │
│ ● Green = Scenario B branch │
│ ● Purple = Scenario C branch │
│ ● Gray = Current reality │
│ │
│ [Expand All] [Collapse All] [Compare Scenarios] │
└─────────────────────────────────────────────────────────────────┘
Timeline View with Branches
┌─────────────────────────────────────────────────────────────────┐
│ │
│ ●─────●─────● Scenario A │
│ / Q2 Q3 Q4 (Rapid) │
│ / │
│ ●────────Current────────● │
│ Jan 2024 │ │
│ \ │
│ ●────● Scenario B │
│ Q2 Q3 (Focused) │
│ │
│ ●─────●─────●─────● Scenario C │
│ / Q2 Q3 Q4-C1 Q4-C2 (Platform) │
│ / │
│ / │
│ ● │
│ │
│ Hover on branch to see: │
│ • Scenario assumptions │
│ • Key metrics comparison │
│ • Probability/confidence │
│ • Notes and rationale │
└─────────────────────────────────────────────────────────────────┘
Example 8: Presentation Mode
Full-Screen Slideshow
┌───────────────────────────────────────────────────────────────────┐
│ │
│ [F to toggle fullscreen] │
│ │
│ ┌───────────────────────────────────────────────────────────┐ │
│ │ │ │
│ │ Organizational Evolution │ │
│ │ 2023-2024 │ │
│ │ │ │
│ │ │ │
│ │ [Graph Visual] │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ │ │
│ │ Key Insights: │ │
│ │ • Team grew by 80% over 12 months │ │
│ │ • Network density increased significantly │ │
│ │ • Leadership structure matured │ │
│ │ │ │
│ │ State 3 of 5 │ │
│ └───────────────────────────────────────────────────────────┘ │
│ │
│ [◀ Previous] [⏸ Pause] [▶ Next] [Esc Exit] │
│ │
└───────────────────────────────────────────────────────────────────┘
Navigation:
- Arrow keys to navigate
- Space to play/pause
- Esc to exit presentation mode
- Number keys to jump to slide
- 'R' to restart from beginning
Summary
These examples demonstrate:
- Temporal Evolution: How organizations, families, and systems change over time
- Scenario Exploration: Comparing alternative futures with different assumptions
- Visual Comparison: Multiple ways to see and understand differences
- Actor Tracking: Following individuals through changes
- Interactive Timeline: Scrubbing, clicking, and animating through states
- Presentation: Telling compelling stories with data
All visualizations should be:
- Interactive: Click, drag, hover for more information
- Animated: Smooth transitions between states
- Informative: Rich metadata and context
- Exportable: Save as images, videos, or reports
- Responsive: Work on different screen sizes
The goal is to make temporal and scenario analysis intuitive, visual, and powerful for storytelling and analysis.