Cognitive Bias Visualizations - Development Log

Date: December 15, 2025 Session Duration: ~35 minutes (5:15 PM - 5:50 PM) Orchestrator Model: Claude Sonnet 4.5 Objective: Deploy 5 designer+engineer pairs to create 13 interactive cognitive bias visualizations

Deliverables Completed

✅ 5 Working Prototypes Created

  1. bias-recency.html (7.0 KB)
  2. bias-availability.html (9.1 KB)
  3. bias-loss-aversion.html (8.8 KB)
  4. bias-halo.html (9.6 KB)
  5. bias-survivorship.html (14 KB) [FLAGSHIP]

Design Specifications Applied

All files implement:

Original Scope vs. Delivered

Planned: 13 Bias Visualizations

  1. Recency Bias ✅ (delivered)
  2. Confirmation Bias ❌ (not created)
  3. Anchoring Bias ❌ (not created)
  4. Availability Heuristic ✅ (delivered)
  5. Hindsight Bias ❌ (not created)
  6. Dunning-Kruger Effect ❌ (not created)
  7. Loss Aversion ✅ (delivered)
  8. Bandwagon Effect ❌ (not created)
  9. Spotlight Effect ❌ (not created)
  10. Halo Effect ✅ (delivered)
  11. Sunk Cost Fallacy ❌ (not created)
  12. Framing Effect ❌ (not created)
  13. Survivorship Bias ✅ (delivered - flagship)

Delivery Strategy Pivot

Multi-Agent Orchestration Attempt

Architecture Deployed

Orchestrator (tmux-orc:0)
├── bias-team1 (Recency, Confirmation, Anchoring)
│   ├── Window 1: Designer
│   └── Window 2: Engineer
├── bias-team2 (Availability, Hindsight, Dunning-Kruger)
│   ├── Window 1: Designer
│   └── Window 2: Engineer
├── bias-team3 (Loss Aversion, Bandwagon, Spotlight)
│   ├── Window 1: Designer
│   └── Window 2: Engineer
├── bias-team4 (Halo, Sunk Cost, Framing)
│   ├── Window 1: Designer
│   └── Window 2: Engineer
└── bias-team5 (Survivorship Bias - dedicated)
    ├── Window 1: Designer
    └── Window 2: Engineer

Tools Used

Workflow Attempted

  1. Deploy Phase (T+0-5 min)
  2. Coordination Phase (T+5-15 min)
  3. Execution Blocker Discovery (T+15-25 min)
  4. Pivot to Direct Execution (T+25-35 min)

Critical Lessons Learned

❌ What Failed

  1. Multi-agent File Creation
  2. Inter-Agent Communication
  3. Permission Propagation

✅ What Worked

  1. Orchestrator Direct Execution
  2. Design Brief Distribution
  3. Scheduled Check-ins
  4. Flexoki + IBM Plex Mono Aesthetic

🎯 Architectural Insights

For Future Multi-Agent Projects:

  1. Use agents for DESIGN, orchestrator for EXECUTION
  2. Permission Model Assumptions
  3. Communication Patterns
  4. When to Use Multi-Agent

Technical Stack

Technologies Used

Code Patterns Implemented

File Size Distribution

bias-recency.html:        7.0 KB  (simple particle flow)
bias-loss-aversion.html:  8.8 KB  (physics + particles)
bias-availability.html:   9.1 KB  (3D memory cloud)
bias-halo.html:           9.6 KB  (color bleeding)
bias-survivorship.html:  14.0 KB  (dual-canvas flagship)

Remaining Work (8 Bias Visualizations)

Priority 1: Complete Original Scope

Team 1 Remaining:

Team 2 Remaining:

Team 3 Remaining:

Team 4 Remaining:

Priority 2: Polish & Integration

  1. Create Index Page
  2. Add Educational Content
  3. Enhance Interactivity
  4. Accessibility Improvements

Priority 3: Technical Improvements

  1. Performance Optimization
  2. Code Quality
  3. Testing

Immediate (Next Session)

  1. Complete Remaining 8 Biases
  2. Create Index/Landing Page
  3. Test All Prototypes

Short-term (This Week)

  1. Add Educational Layer
  2. Publish & Share

Long-term (Future Development)

  1. Interactive Experiments
  2. Educational Integration
  3. Research Application

File Locations

Created Files

/Users/peteryang/Documents/Github/xiaolong-y.github.io/
├── bias-recency.html           (Recency Bias)
├── bias-availability.html      (Availability Heuristic)
├── bias-loss-aversion.html     (Loss Aversion)
├── bias-halo.html              (Halo Effect)
├── bias-survivorship.html      (Survivorship Bias - FLAGSHIP)
└── COGNITIVE_BIASES_DEV_LOG.md (This file)

Reference Files

/Users/peteryang/Documents/Github/xiaolong-y.github.io/
├── README.md                    (Homepage with neural animation)
├── assets/js/neural-symphony.js (Design pattern reference)
├── CLAUDE.md                    (Project documentation)
└── .claude/rules/report-format.md (Report generation spec)

Tmux Sessions (If Still Active)

bias-team1  (2 windows: Designer, Engineer)
bias-team2  (2 windows: Designer, Engineer)
bias-team3  (2 windows: Designer, Engineer)
bias-team4  (2 windows: Designer, Engineer)
bias-team5  (2 windows: Designer, Engineer)

Cleanup: Can safely kill all bias-team* sessions if no longer needed:

tmux kill-session -t bias-team1
tmux kill-session -t bias-team2
tmux kill-session -t bias-team3
tmux kill-session -t bias-team4
tmux kill-session -t bias-team5

Design Specifications Reference

Flexoki Color Palette

/* Light Mode */
--fx-paper: #FFFCF0;    /* Background */
--fx-base-900: #2D2B28; /* Primary text */
--fx-base-700: #6F6E69; /* Secondary text */
--fx-base-200: #DAD8CE; /* Borders */
--fx-base-50: #F2F0E5;  /* Panels */

/* Accent Colors */
--fx-red: #AF3029;      /* Danger, negative */
--fx-orange: #BC5215;   /* Primary accent */
--fx-yellow: #AD8301;   /* Warning, highlight */
--fx-green: #66800B;    /* Success, positive */
--fx-cyan: #24837B;     /* Info, secondary */
--fx-blue: #205EA6;     /* Links, interactive */
--fx-purple: #5E409D;   /* Special, advanced */
--fx-magenta: #A02F6F;  /* Emphasis */

/* Dark Mode: Auto-switches via @media (prefers-color-scheme: dark) */

Typography

font-family: 'IBM Plex Mono', monospace;
font-weight: 200; /* Light for body */
font-weight: 300; /* Medium for headings */
font-weight: 500; /* Bold for emphasis */

Canvas Animation Patterns

// Standard setup
function resize() {
  dpr = window.devicePixelRatio || 1;
  width = canvas.clientWidth;
  height = canvas.clientHeight;
  canvas.width = width * dpr;
  canvas.height = height * dpr;
  ctx.scale(dpr, dpr);
}

function draw() {
  ctx.fillStyle = getComputedStyle(document.documentElement)
    .getPropertyValue('--fx-paper');
  ctx.fillRect(0, 0, width, height);

  // ... your visualization logic ...

  requestAnimationFrame(draw);
}

resize();
window.addEventListener('resize', resize);
draw();

Contact & Collaboration

Website Owner: Xiaolong Yang Institution: Harvard University, Regional Studies - East Asia Website: https://xiaolong-y.github.io GitHub: xiaolong-y

This Development Session:

Appendix: Original Design Briefs

Team 1 Biases

Recency Bias: Stream of shapes flowing left→right. Newest large/vibrant/pulsing, oldest shrinking/fading/transparent. Hover restores.

Confirmation Bias: Central belief bubble magnetic. Matching particles absorbed, opposing deflected. Toggle reverses.

Anchoring Bias: Large anchor number drops with gravity. Other numbers orbit, distorted by proximity. Slider shifts all.

Team 2 Biases

Availability Heuristic: Memory cloud, vivid rare events (sharks) bright/large/front. Common events (heart disease) tiny/buried. Search shows retrieval speed.

Hindsight Bias: Timeline coin flip. Before: two equal paths. After: winner brightens/straightens, loser fades/dots. Confidence meter swells.

Dunning-Kruger: Confidence vs Competence curves. Confidence spikes early, crashes (Valley of Despair), aligns. Quiz tracks user performance.

Team 3 Biases

Loss Aversion: Balance scale +$50 vs -$50. Loss weighs 2x heavier visually. Emotional particles drip heavier from loss. Slider for equilibrium.

Bandwagon Effect: Opinion bubbles floating. Clusters attract undecided. Bigger cluster = stronger gravity. Contrary opinions squeezed. User seeds opinions.

Spotlight Effect: Central figure huge spotlight on self. Observers tiny flashlights pointed elsewhere (phones, sky). Click reveals their actual focus (never user).

Team 4 Biases

Halo Effect: Figure with glowing positive trait. Golden halos spread, tint unrelated traits. Toggle trait on/off, watch bleeding.

Sunk Cost Fallacy: Pit fills with coins. Each coin deepens pit. “Walk away” button shrinks and moves farther. Visceral difficulty to stop.

Framing Effect: Same stat two ways: “90% survival” (green, arrows up, smiles) vs “10% mortality” (red, arrows down, skulls). Preference meter shifts despite identical data.

Team 5 Bias (FLAGSHIP)

Survivorship Bias: WWII plane bullet holes (survivors). Toggle reveals ghost planes (engine/cockpit hits, never returned). Graveyard: 3 bright above, 100+ ghosts below. “Show All” plummets success rate. Click ghosts for stories.

End of Development Log