🎨 Comparative Visualization Generator

Generate interactive, comparative D3.js visualizations through natural language - no coding required!

✨ Features

• 📊 Comparative Visualizations - Automatically compare data from two sources
• 🔄 Interactive D3.js - All visualizations are interactive and web-ready
• 💬 Natural Language Interface - Describe what you want in plain English
• 🔄 Iterative Refinement - Continuously improve visualizations through conversation
• 📋 No Coding Required - Technical complexity handled behind the scenes

🏗️ Architecture

flowchart LR
    classDef userClass fill:#f9f,stroke:#333,stroke-width:2px,color:#333,font-weight:bold
    classDef frontendClass fill:#bbf,stroke:#33f,stroke-width:1px,color:#005
    classDef backendClass fill:#bfb,stroke:#3b3,stroke-width:1px,color:#050
    classDef dataClass fill:#ffd,stroke:#b90,stroke-width:1px,color:#840
    
    User([👤 User]):::userClass
    
    subgraph Frontend["🖥️ Frontend"]
        direction TB
        SI[Streamlit Interface]:::frontendClass
        VR[Visualization Renderer]:::frontendClass
        HM[History Manager]:::frontendClass
    end
    
    subgraph Backend["⚙️ Backend"]
        direction TB
        DP[Data Processor]:::backendClass
        OAI[OpenAI API]:::backendClass
        CV[Code Validator]:::backendClass
        CSW[Safety Wrapper]:::backendClass
    end
    
    User -->|"1️⃣ API Key"| SI
    User -->|"2️⃣ CSV Files"| SI
    User -->|"3️⃣ Natural Language"| SI
    
    SI -->|Preprocess| DP
    DP -->|Structured Data| OAI
    SI -->|Query Context| OAI
    
    OAI -->|D3.js Code| CV
    CV -->|Invalid| OAI
    CV -->|Valid| CSW
    
    CSW -->|Safe Code| VR
    VR -->|Visualization| SI
    
    SI -->|Results| User
    
    HM <-->|Version History| SI

    style Frontend fill:#eef,stroke:#99c,stroke-width:2px
    style Backend fill:#efe,stroke:#9c9,stroke-width:2px

Loading

🚀 How It Works

1️⃣ Enter your OpenAI API key

Connect to the OpenAI API to power the visualization generation engine.

2️⃣ Upload your data files

Provide two CSV files with matching schemas for comparison.

3️⃣ Create visualizations through conversation

Simply describe what you'd like to see in natural language.

4️⃣ Interact with your visualizations

Explore the data through interactive D3.js visualizations.

📋 Requirements

• Python 3.7+
• Streamlit
• OpenAI API key
• Internet connection for D3.js libraries

🔧 Installation

# Clone the repository
git clone https://github.com/sundarmd/comparative-visualization-generator.git

# Navigate to project directory
cd comparative-visualization-generator

# Install dependencies
pip install -r requirements.txt

# Run the Streamlit app
streamlit run streamlit_app.py

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.