# 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: 1. **Temporal Evolution**: How organizations, families, and systems change over time 2. **Scenario Exploration**: Comparing alternative futures with different assumptions 3. **Visual Comparison**: Multiple ways to see and understand differences 4. **Actor Tracking**: Following individuals through changes 5. **Interactive Timeline**: Scrubbing, clicking, and animating through states 6. **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.