Autograph

A powerful data visualization tool that combines AI-powered chart generation with real-time data analysis. Ask questions about your data and get instant tables and interactive charts.

Features

• 🤖 AI-Powered Analysis: Ask natural language questions about your data
• 📊 Interactive Charts: Generate beautiful Plotly charts (bar, line, scatter, pie, and more)
• 📋 Data Tables: Create and modify tables dynamically
• 💬 Conversational Interface: Build upon previous responses with follow-up questions
• 📈 Real-time Visualization: See your data come to life instantly

Tech Stack

Backend

• Flask: Python web framework
• Google Gemini AI: For natural language processing and chart generation
• CSV Data: Top 100 SaaS companies dataset included

Frontend

• Next.js: React framework with App Router
• TypeScript: Type-safe development
• Tailwind CSS: Utility-first styling
• Plotly.js: Interactive charting library
• React Plotly: React wrapper for Plotly

Quick Start

Prerequisites

• Node.js 18+ and npm
• Python 3.8+
• Google Gemini API key

1. Clone and Install

git clone <repository-url>
cd autograph

# Install frontend dependencies
cd frontend
npm install

# Install backend dependencies
cd ../backend
pip install -r requirements.txt

2. Environment Setup

Create a .env file in the project root:

GEMINI_API_KEY=your_gemini_api_key_here

Get your API key from Google AI Studio.

3. Run the Application

Start the backend:

cd backend
python app.py

Backend runs on http://localhost:3001

Start the frontend:

cd frontend
npm run dev

Frontend runs on http://localhost:3000

Usage

1. Data Tab

• View the complete SaaS companies dataset
• Browse all 100+ companies with their metrics
• Refresh data with the refresh button

2. Chat Interface

Ask questions like:

• "Show me the top 5 companies by valuation"
• "Create a bar chart of companies by employee count"
• "Make a scatter plot of ARR vs funding"
• "Convert this to a pie chart"

3. Output Tab

• Tables: View structured data in clean HTML tables
• Charts: Interactive Plotly visualizations with zoom, pan, and hover
• Iterative: Ask follow-up questions to modify existing visualizations

4. Raw Response Tab

• Inspect the AI's JSON response
• Debug chart configurations
• See the complete data structure

API Endpoints

GET /

Health check endpoint

{
  "message": "Autograph backend running",
  "routes": ["/api/data", "/api/generate"]
}

GET /api/data

Returns the complete SaaS companies dataset

{
  "data": [...],
  "count": 101
}

POST /api/generate

Generate charts and tables from natural language

Request:

{
  "message": "Create a bar chart of top companies",
  "data": {},
  "type": "table"
}

Response:

{
  "message": "Here's your bar chart",
  "data": {
    "data": [
      {
        "x": ["Microsoft", "Salesforce"],
        "y": [3000, 227],
        "type": "bar",
        "name": "Valuation (Billions)"
      }
    ],
    "layout": {
      "title": "Top Companies by Valuation",
      "xaxis": {"title": "Company"},
      "yaxis": {"title": "Valuation ($B)"}
    }
  },
  "type": "graph"
}

Chart Types Supported

Tables

• Clean HTML tables with sorting and styling
• Dynamic column generation
• Responsive design

Plotly Charts

• Bar Charts: {"type": "bar"}
• Line Charts: {"type": "scatter", "mode": "lines+markers"}
• Scatter Plots: {"type": "scatter", "mode": "markers"}
• Pie Charts: {"type": "pie"}
• Histograms: {"type": "histogram"}
• Box Plots: {"type": "box"}
• Heatmaps: {"type": "heatmap"}

Dataset

The included dataset contains 100+ SaaS companies with:

• Company Name
• Founded Year
• Headquarters
• Industry
• Total Funding
• ARR (Annual Recurring Revenue)
• Valuation
• Employee Count
• Top Investors
• Product
• G2 Rating

Development

Project Structure

autograph/
├── backend/
│   ├── app.py              # Flask server
│   ├── requirements.txt    # Python dependencies
│   └── data/
│       └── top_100_saas_companies_2025.csv
├── frontend/
│   ├── app/
│   │   ├── page.tsx        # Main application
│   │   ├── layout.tsx      # App layout
│   │   └── globals.css     # Global styles
│   ├── package.json        # Node dependencies
│   └── next.config.ts      # Next.js config
└── README.md

Adding New Chart Types

1. Update the system prompt in backend/app.py
2. Add examples for the new chart type
3. Test with the frontend Plotly renderer

Customizing the Dataset

Replace backend/data/top_100_saas_companies_2025.csv with your own data and update the system prompt to reference your dataset structure.

Troubleshooting

Common Issues

502 Bad Gateway Error

• Check if GEMINI_API_KEY is set correctly
• Verify you haven't exceeded Gemini API quotas
• Free tier: 50 requests/day, paid plans have higher limits

Charts Not Rendering

• Check browser console for JavaScript errors
• Verify Plotly data structure in Raw Response tab
• Ensure data arrays are properly formatted

Backend Not Starting

• Check Python dependencies: pip install -r requirements.txt
• Verify port 3001 is available
• Check for missing environment variables

API Quotas

• Free Tier: 50 requests per day
• Paid Plans: Much higher limits available
• Reset Time: Daily quotas reset at midnight Pacific Time

---

Built with ❤️ using Flask, Next.js, and Google Gemini AI