🧠 Neural Brain Real-Time Heatmap Visualization Guide

Overview

The Neural Brain Visualization creates a living, breathing representation of your business intelligence, where every customer interaction fires through neural pathways like synapses in a biological brain. The real-time heatmap functionality provides instant visual feedback of business activity with detailed drill-down capabilities on hover.

How the Real-Time Heatmap Works

1. Visual Representation

┌─────────────────────────────────────────────────────────────┐
│                    3D Neural Network                         │
│                                                              │
│     Facebook ●········○ Central Brain ○········● Amazon     │
│        ↑    /  \      /       |       \      /  \    ↑       │
│    Heat: 85%    \   ●    [Cell03 KG]   ●   /    Heat: 92%   │
│                  \ / \       ●        / \ /                  │
│     Klaviyo ●····○···○ ← Neurons → ○···○····● Google       │
│        ↑                                          ↑          │
│    Heat: 45%                                 Heat: 78%       │
│                                                              │
│  Color Intensity = Activity Level (Red = Hot, Blue = Cool)   │
└─────────────────────────────────────────────────────────────┘

2. Heatmap Layers

The visualization consists of multiple data layers:

Layer 1: Neural Activity

Layer 2: Event Density

Layer 3: Connection Strength

3. Real-Time Data Flow

// Real-time event processing pipeline
Event Occurs → Channel API → Ingestion Service → Neural Processor → KG Brain → Visualization

// Example: Facebook Purchase Event
{
  timestamp: 1698765432,
  channel: "facebook",
  type: "purchase",
  value: 299.99
}
  ↓
Neural Path Activation:
  → facebook-neuron (Heat: +15%)
  → facebook-neuron-purchase (Heat: +20%)
  → cell03-kg-brain (Heat: +10%)
  → Pattern Detection: "High-value conversion path"

4. Mouse Hover Interaction

When you hover over any neuron in the heatmap, you get:

Immediate Display (< 50ms)

interface HoveredNeuronInfo {
  // Basic Info
  id: string;              // e.g., "facebook-neuron"
  name: string;            // e.g., "Facebook Channel"
  channel: string;         // e.g., "facebook"

  // Activity Metrics
  activity: number;        // 0-100% current activity level
  heatmapIntensity: number; // 0-1 heat intensity
  eventCount: number;      // Total events in last hour

  // Real-time Stream
  recentEvents: Array<{
    eventType: string;     // click, view, purchase, etc.
    timestamp: number;
    value?: number;        // Transaction value if applicable
    userId?: string;
    metadata: any;         // Additional event data
  }>;
}

Visual Feedback

5. Heatmap Calculation Algorithm

def calculate_heatmap_intensity(neuron_id: str, time_window: int = 300):
    """
    Calculate heat intensity for a neuron based on:
    - Event frequency
    - Event recency
    - Value flow
    - Pattern significance
    """

    # Get events in time window
    events = get_neuron_events(neuron_id, time_window)

    # Base intensity from event count
    frequency_heat = min(len(events) / 100, 1.0)  # Normalize to 0-1

    # Recency factor (exponential decay)
    recency_scores = []
    for event in events:
        age_seconds = (now() - event.timestamp).seconds
        decay = exp(-age_seconds / time_window)
        recency_scores.append(decay)
    recency_heat = mean(recency_scores) if recency_scores else 0

    # Value factor (for purchase events)
    value_heat = 0
    total_value = sum(e.value for e in events if e.value)
    if total_value > 0:
        value_heat = min(total_value / 10000, 1.0)  # Normalize by $10k

    # Pattern bonus (if part of detected pattern)
    pattern_heat = 0.2 if neuron_in_active_pattern(neuron_id) else 0

    # Weighted combination
    final_heat = (
        frequency_heat * 0.3 +
        recency_heat * 0.3 +
        value_heat * 0.3 +
        pattern_heat * 0.1
    )

    return min(final_heat, 1.0)  # Cap at 1.0

6. Interactive Features

Click Actions

Keyboard Shortcuts

Gesture Controls

7. Data Resolution & Updates

Update Frequencies:
  Neural State: 100ms      # Core neuron positions and connections
  Event Stream: Real-time   # SSE stream, instant updates
  Heatmap Data: 1000ms     # Heat intensity calculations
  Pattern Detection: 5000ms # Pattern analysis updates
  Metrics: 2000ms          # Dashboard metrics refresh

Resolution Levels:
  Neuron Level: Individual channel/event type nodes
  Connection Level: Weighted pathways between neurons
  Pattern Level: Detected sequences and correlations
  Cluster Level: Groups of related neurons

8. Performance Optimization

The visualization uses several techniques for smooth performance:

Level of Detail (LOD)

// Adaptive quality based on distance
if (distanceToCamera < 50) {
  // High detail: All particles, full glow effects
  particleCount = 100;
  glowIntensity = 1.0;
} else if (distanceToCamera < 150) {
  // Medium detail: Reduced particles
  particleCount = 50;
  glowIntensity = 0.5;
} else {
  // Low detail: Minimal effects
  particleCount = 10;
  glowIntensity = 0.2;
}

Culling & Batching

Progressive Loading

9. Example Use Cases

Scenario 1: Spike Detection

TIME: 14:32:15
EVENT: Black Friday Sale Launch
VISUALIZATION:
- Facebook neuron suddenly turns bright red (95% heat)
- Electrical impulses surge through facebook→purchase path
- Central brain pulses rapidly
- Pattern detected: "Sale Rush Pattern"
HOVER REVEALS:
- 847 events in last minute
- $45,231 in transactions
- 92% are new customers

Scenario 2: Cross-Channel Journey

CUSTOMER PATH:
1. Google Ad Click → google-neuron lights up
2. Email Signup → klaviyo-neuron activates
3. Facebook Retarget → facebook-neuron pulses
4. Amazon Purchase → amazon-neuron flares

VISUALIZATION:
- Sequential lighting of path
- Connection strengths increase
- Pattern forms: "Multi-touch Conversion"

Scenario 3: Anomaly Detection

ANOMALY: Unusual traffic from programmatic channel
VISUALIZATION:
- Programmatic neuron glows yellow (warning)
- Unusual connection pattern highlighted
- Boss Agent notification triggered
HOVER REVEALS:
- 10x normal activity
- Geographic anomaly detected
- Recommended action: Investigate source

10. Configuration Options

const neuralConfig = {
  // Heatmap Settings
  heatmap: {
    enabled: true,
    colorScheme: 'thermal', // thermal, rainbow, grayscale
    minIntensity: 0.1,
    maxIntensity: 1.0,
    decayRate: 0.95,
    updateInterval: 1000
  },

  // Interaction Settings
  interaction: {
    hoverEnabled: true,
    hoverDelay: 50,        // ms before showing info
    clickToFocus: true,
    doubleClickZoom: true,
    scrollSpeed: 0.5
  },

  // Performance Settings
  performance: {
    targetFPS: 60,
    adaptiveQuality: true,
    maxParticles: 1000,
    maxNeurons: 100,
    useLOD: true
  },

  // Data Settings
  data: {
    sseEndpoint: '/api/neural/stream',
    metricsEndpoint: '/api/neural/metrics',
    historyWindow: 3600,  // seconds
    aggregationLevel: 'minute'
  }
};

Integration with MIZOKICLOUDRUN

Cell03 KG Brain Connection

The heatmap directly reflects the Knowledge Graph state: - Neuron Creation: Each KG entity becomes a neuron - Connection Mapping: KG relationships become neural connections - Pattern Recognition: KG patterns trigger visual patterns - Learning Updates: KG learning updates neuron properties

Boss Agent Integration

When hovering reveals anomalies or opportunities: - Automatic Analysis: Boss Agent analyzes the pattern - Recommendation Generation: AI suggests actions - One-Click Execution: Implement recommendations directly - Feedback Loop: Results update the visualization

Real-Time Event Flow

Customer Action
    ↓
Channel API (Facebook, Amazon, etc.)
    ↓
Omnichannel Ingestion Service
    ↓
Neural Event Processor
    ↓
Cell03 KG Brain (Learning & Pattern Detection)
    ↓
Redis (State Cache)
    ↓
SSE Stream
    ↓
Three.js Visualization
    ↓
Heatmap Rendering
    ↓
Mouse Hover Detection
    ↓
Information Display

Troubleshooting Heatmap Issues

Issue: Heatmap not updating

Solution: Check SSE connection in browser console

// Debug SSE connection
const eventSource = new EventSource('/api/neural/stream');
eventSource.onerror = (error) => console.error('SSE Error:', error);

Issue: Hover not showing data

Solution: Verify Redis cache has data

redis-cli
> KEYS neural:state:*
> GET neural:state:facebook-neuron

Issue: Performance lag on hover

Solution: Reduce particle count or enable LOD

config.performance.maxParticles = 500;
config.performance.useLOD = true;

Implementation Status ✅ COMPLETE

The Neural Brain Visualization with real-time heatmap has been fully implemented and is now operational.

Key Features Implemented:

Access Points:

User Interaction Guide:

  1. Hover over neurons to see detailed activity information
  2. Click on neurons to focus the camera with smooth animation
  3. Use keyboard shortcuts: - Space: Pause/Resume animation - H: Toggle heatmap overlay - R: Reset camera position - F: Toggle fullscreen

Conclusion

The Neural Brain Visualization with real-time heatmap provides an unprecedented view into your business's neural activity. Every mouse hover reveals the living, breathing state of your business intelligence, making complex data patterns instantly understandable and actionable.

The combination of: - Real-time event streaming - Knowledge Graph intelligence - 3D visualization - Interactive heatmap - Detailed hover information

Creates a truly revolutionary way to monitor and understand your omnichannel business operations in real-time.

Built with ❤️ by the MIZ OKI Team

Making business intelligence as intuitive as human neural activity

← All docsView source on GitHub →