Multi-Agent Data Analysis Dashboard

A data visualization platform that transforms complex datasets into clear, compelling visual narratives. Built with a focus on clean design and meaningful insights rather than metrics for their own sake.

Overview

This dashboard addresses a fundamental challenge in today's information landscape: connecting people with authentic, data-grounded stories rather than superficial content. By combining structured datasets with contextual analysis, it helps surface genuine insights from complex information.

Core Capabilities

• Comprehensive charting: Seven chart types covering most analytical needs
• Multi-agent processing: Coordinated analysis pipeline for thorough data exploration
• Interactive visualizations: Responsive charts with thoughtful hover states and transitions
• Clean interface: Focus on content over decoration
• Contextual storytelling: Links quantitative data with qualitative insights
• Responsive design: Works across devices and screen sizes
• Data validation: Robust handling of various input formats
• Real-time processing: Live updates as analysis progresses

Architecture

P3/
├── index.html                    # Main dashboard interface
├── dashboard.html                # Chart display system
├── agent-flow.html              # Analysis coordination
├── test-charts.html             # Chart validation
├── test-enhanced-charts.html    # Chart demonstration
├── js/
│   ├── config.js                # Environment configuration
│   ├── agent-orchestrator.js    # Analysis coordination
│   ├── dashboard-updater.js     # Chart rendering system
│   ├── gemini-client.js         # Language model integration
│   └── agents/
│       ├── explorer-agent.js    # Data source assessment
│       ├── parser-agent.js      # Data extraction
│       ├── summarizer-agent.js  # Insight generation
│       ├── search-agent.js      # Context enhancement
│       └── synthesizer-agent.js # Final output generation
├── data/
│   ├── story.txt                # Analysis narrative
│   ├── charts.json              # Chart specifications
│   └── input/                   # Source data files
├── prompts/
│   └── analysis-prompts.json    # Agent instructions
└── README.md                    # Documentation

Data Structure

Analysis Output (story.txt)

Plain text with markdown formatting for readability:

• Section headers for organization
• Emphasis for key points
• Lists and paragraphs for clear structure
• Professional tone throughout

Chart Configuration (charts.json)

JSON array defining visualizations:

[
  {
    "id": "unique_identifier",
    "type": "line|bar|scatter|pie|area|bubble|heatmap",
    "title": "Descriptive title",
    "subtitle": "Context or methodology note",
    "data": [...],
    "options": {
      "colors": ["#3498db", "#e74c3c"],
      "axes": {
        "x": {"title": "Variable name", "grid": true},
        "y": {"title": "Measurement unit", "grid": true}
      },
      "legend": {"position": "bottom", "display": true}
    }
  }
]

Chart Types

Line charts: Time series, trends, continuous measurements
Bar charts: Categories, comparisons, rankings
Scatter plots: Relationships, correlations, outliers
Pie charts: Proportions, compositions
Area charts: Cumulative values, stacked data
Bubble charts: Three-variable relationships
Heatmaps: Matrices, correlations, patterns

Setup

API Configuration

The system requires two API services:

1. Copy the environment template:

   cp env.example .env

2. Obtain API keys:

   • Google Gemini: AI Studio
   • Tavily Search: Tavily Platform

3. Update .env with your keys:

   GEMINI_API_KEY=your_key_here
   TAVILY_API_KEY=your_key_here

The system includes fallback functionality for development and testing.

Usage

Basic Workflow

1. Open agent-flow.html to begin analysis
2. Upload your data files (JSON, XML, CSV, or text)
3. Specify analysis objectives
4. Run the processing pipeline
5. View results in dashboard.html

Processing Pipeline

The system employs five specialized agents working in sequence:

Explorer: Assesses data structure and recommends processing approach
Parser: Extracts and structures raw data
Summarizer: Identifies key patterns and insights
Search: Adds relevant external context
Synthesizer: Generates final charts and narrative

Dashboard Operation

• Charts render automatically from processed data
• Interactive elements provide additional detail
• Layout adapts to content and screen size
• Updates occur in real-time during processing

Technical Details

Browser Support

Modern browsers with JavaScript enabled. Mobile-responsive design with graceful degradation.

Performance

• Efficient chart rendering with Canvas/SVG
• Streamlined agent processing
• Minimal external dependencies
• Optimized for typical dataset sizes

Security

• Local file processing only
• No data transmission beyond API calls
• Environment variables for sensitive keys
• Input validation throughout

Customization

Adding Chart Types

Extend validation in synthesizer-agent.js, add rendering logic to dashboard-updater.js, and update agent prompts accordingly.

Modifying Analysis

Edit prompts in analysis-prompts.json or adjust agent logic in individual files. The orchestrator coordinates all agents.

Visual Styling

CSS variables control colors and typography. Chart styling uses Chart.js configuration options.

Error Handling

The system validates data at each stage, provides clear error messages, and includes fallback content when processing fails. Loading indicators show progress during multi-agent processing.

License

Open source for personal and commercial use.