Rick's AI Graphing Website (RAGW)

Version 1.0 - AI-Powered Astronomy Data Visualization

A web-based application designed to simplify astronomical data visualization through natural language queries. Built for educators, researchers, and students who need quick, intuitive graph generation without complex tools.

🌟 Features

Core Functionality

• Natural Language Queries: Describe what you want to visualize in plain English
• AI-Powered Parsing: OpenRouter integration with cost-effective LLM routing
• Single-Page Interface: All features accessible without navigation
• Real-time Visualization: Interactive charts with zoom, pan, and tooltips
• Multiple Data Formats: Support for CSV, JSON, and TXT files (up to 10MB)
• Astronomy-Specific Charts:
  • Hertzsprung-Russell (HR) Diagrams
  • Sky Maps (RA/Dec plots)
  • Light Curves
  • Redshift Histograms
  • Orbital Path Plots

Data Management

• Drag-and-Drop Upload: Intuitive file upload with preview
• Auto-Detection: Automatically identifies astronomy columns (RA, Dec, Magnitude, etc.)
• Large Dataset Support: Handles 10,000+ rows efficiently
• In-Memory Storage: Datasets stored in browser memory (no cloud storage costs)
• Guest Mode: Full functionality without requiring account creation

Visualization & Export

• Interactive Charts: Built with Chart.js with zoom plugin
• Multiple Export Formats: PNG, PDF, HTML
• Shareable Links: Generate links to share graphs with colleagues
• Graph History: Save and reload previous visualizations
• High-Resolution Exports: Suitable for papers and presentations

User Experience

• Dark Mode: Easy on the eyes for long sessions
• Responsive Design: Works on desktop, tablet, and mobile
• Accessibility: WCAG compliant with keyboard navigation
• Large Fonts: Optimized for users 40-60 years old
• Zero Navigation: Everything on one page

🚀 Quick Start

Prerequisites

• Node.js 18+ and npm/yarn
• Firebase account (free tier)
• OpenRouter API key (pay-per-use)

Installation

1. Clone the repository

git clone https://github.com/yourusername/ricks-aigraph.git
cd ricks-aigraph

2. Install dependencies

npm install

3. Set up environment variables

Create a .env.local file in the root directory:

# Firebase Configuration
NEXT_PUBLIC_FIREBASE_API_KEY=your_firebase_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.appspot.com
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id

# OpenRouter API Configuration
OPENROUTER_API_KEY=your_openrouter_api_key

# Site Configuration
NEXT_PUBLIC_SITE_URL=http://localhost:3000

4. Run the development server

npm run dev

5. Open your browser

Navigate to http://localhost:3000

📖 Usage Guide

Basic Workflow

1. Upload Your Data

   • Drag and drop a CSV, JSON, or TXT file into the upload area
   • Preview your data to verify correct parsing
   • Supported astronomy columns are automatically detected

2. Enter a Query

   • Type a natural language description of your desired visualization
   • Click "Show Examples" for inspiration
   • Press "Generate Graph" to create your visualization

3. Interact with Your Graph

   • Zoom with mouse wheel
   • Pan by clicking and dragging
   • Hover over data points for details
   • Toggle grid lines and logarithmic scales

4. Export or Share

   • Download as PNG for presentations
   • Export as PDF for papers
   • Generate HTML for interactive embedding
   • Create shareable links (requires sign-in)

Example Queries

Basic Scatter Plots

Plot RA vs Dec for all stars
Scatter plot of distance vs magnitude

HR Diagrams

HR diagram: temperature vs magnitude
Hertzsprung-Russell plot with temperature and luminosity
Create an HR diagram for cluster stars

Histograms

Histogram of redshifts with bin size 0.1
Distribution of stellar magnitudes

Light Curves

Light curve: time vs magnitude
Plot brightness over time for this variable star
Time-series of flux measurements

Sky Maps

Sky map of galaxy positions
Plot celestial coordinates for quasars
RA and Dec scatter for Messier objects

Data Format Requirements

CSV Example

RA,Dec,Magnitude,Distance
45.2,12.5,8.3,150.2
67.8,-23.1,9.1,245.7

JSON Example

[
  {"RA": 45.2, "Dec": 12.5, "Magnitude": 8.3, "Distance": 150.2},
  {"RA": 67.8, "Dec": -23.1, "Magnitude": 9.1, "Distance": 245.7}
]

Recognized Astronomy Columns

The system automatically detects these column types:

• RA: Right Ascension (ra, right_ascension, alpha)
• Dec: Declination (dec, declination, delta)
• Magnitude: Apparent/Absolute magnitude (mag, magnitude, m_v, m_b)
• Distance: Parsecs, light-years (dist, distance, parsec, pc, ly)
• Redshift: Cosmological redshift (z, redshift)
• Temperature: Stellar temperature (temp, temperature, t_eff, teff)
• Luminosity: Solar luminosities (lum, luminosity, l_sun)
• Time: Julian Date, MJD (time, date, jd, mjd, hjd, bjd)
• Flux: Brightness measurements (flux, intensity, counts)
• Wavelength: Spectral wavelength (wavelength, lambda, angstrom)

Built-In Astronomy Datasets

Query without uploading - instant results:

• Planets: 8 solar system planets with mass, distance, diameter, moons
• Stars: 10 brightest stars with magnitude, temperature, distance
• Exoplanets: 15 confirmed exoplanets (Kepler, TRAPPIST, Proxima b, etc.)
• Variable Stars: 10 variable stars (Cepheids, Miras, RR Lyrae, Eclipsing)
• Galaxies: 6 nearby galaxies (Milky Way, Andromeda, LMC, M87, etc.)
• Spectral Lines: 8 major lines (H-alpha, H-beta, Ca II, Na D, etc.)
• Messier Objects: 5 famous deep-sky objects (M31, M42, M51, etc.)
• HR Diagram Data: 8 stars spanning main sequence to giants
• Orbital Paths: Generated elliptical orbits with any eccentricity
• Light Curves: Synthetic variable star data

🔧 Configuration

Firebase Setup

1. Create a Firebase project at console.firebase.google.com
2. Enable Authentication (Email/Password)
3. Configure OAuth Domains (Important for production):
   • Go to Firebase Console → Authentication → Settings
   • Click on the "Authorized domains" tab
   • Add your production domain (e.g., ricks-aigraph.vercel.app)
   • Add any additional domains where your app will be hosted
   • Note: localhost is pre-authorized for development
4. Create a Firestore database
5. Enable Storage
6. Copy your configuration to .env.local

OpenRouter Setup

1. Sign up at openrouter.ai
2. Generate an API key
3. Add to .env.local
4. Default model: mistralai/mistral-7b-instruct (cost-effective)

Vercel Deployment

1. Push your code to GitHub
2. Import project to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy

# Or use Vercel CLI
npm install -g vercel
vercel

🏗️ Architecture

Tech Stack

• Frontend: Next.js 14 (App Router), React 18, TypeScript
• Styling: TailwindCSS with custom dark theme
• Charts: Chart.js with react-chartjs-2 and zoom plugin
• Authentication: Firebase Auth (email/password)
• Database: Firebase Firestore
• Storage: Firebase Storage
• AI: OpenRouter API (Mistral 7B Instruct)
• Export: jsPDF, html2canvas

Project Structure

ricks-aigraph/
├── app/
│   ├── components/         # React components
│   ├── api/               # API routes
│   ├── layout.tsx         # Root layout
│   ├── page.tsx          # Main single-page interface
│   └── globals.css       # Global styles
├── lib/
│   ├── firebase.ts       # Firebase configuration
│   ├── firestore.ts      # Database operations
│   ├── openrouter.ts     # AI query parsing
│   ├── chartConfig.ts    # Chart.js configuration
│   ├── dataParser.ts     # CSV/JSON parsing
│   ├── astronomyHelpers.ts # Astronomy-specific utilities
│   └── context/          # React contexts
├── types/
│   └── index.ts          # TypeScript definitions
└── public/               # Static assets

🎨 Customization

Changing the AI Model

Edit lib/openrouter.ts:

model: 'anthropic/claude-3-sonnet' // More capable but expensive
model: 'mistralai/mistral-7b-instruct' // Cost-effective default

Adjusting Chart Colors

Edit lib/chartConfig.ts to customize chart appearance:

backgroundColor: 'rgba(68, 97, 242, 0.6)', // Change color
borderColor: 'rgba(68, 97, 242, 1)',

Adding Custom Astronomy Types

Edit lib/dataParser.ts to add new column patterns:

const ASTRONOMY_PATTERNS = {
  // Add your custom pattern
  Velocity: /^(vel|velocity|v_r)$/i,
}

🧪 Testing

Manual Testing Checklist

• Upload CSV file with astronomy data
• Generate HR diagram
• Create sky map
• Export as PNG
• Export as PDF
• Create shareable link (authenticated)
• Test guest mode
• Test on mobile device
• Test keyboard navigation
• Test with screen reader

Common Use Cases

1. Star Cluster Analysis: Upload Gaia data, create HR diagram
2. Galaxy Survey: Upload SDSS data, create redshift histogram
3. Variable Star Study: Upload time-series data, create light curve
4. Exoplanet Research: Upload catalog data, create scatter plots

📊 Performance

• Target Load Time: < 5 seconds from query to visualization
• Dataset Limit: 50,000 rows (soft limit)
• File Size Limit: 10 MB
• API Cost: ~$0.01 per 100 queries (Mistral 7B)
• Hosting: Free on Vercel Hobby tier

🔒 Security & Privacy

• Authentication: Firebase Auth with secure token management
• Data Storage: Encrypted Firestore with user-scoped access
• API Keys: Server-side only, never exposed to client
• Guest Mode: Data stored locally, not sent to servers
• No Tracking: Minimal analytics, GDPR compliant

🤝 Contributing

This is a personal project for Rick's astronomy teaching needs, but suggestions are welcome!

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request

📝 License

MIT License - See LICENSE file for details

🆘 Troubleshooting

Chart Not Displaying

• Check browser console for errors
• Verify dataset has at least 2 columns
• Ensure column names match query

AI Query Fails

• Verify OpenRouter API key is set
• Check API quota/billing
• Try simpler query or use example queries

Firebase Errors

• Verify all Firebase environment variables
• Check Firebase console for service status
• Ensure Firestore rules allow read/write
• OAuth Domain Error: If you see "domain is not authorized for OAuth operations":
  • Go to Firebase Console → Authentication → Settings → Authorized domains
  • Add your production domain (e.g., your-app.vercel.app)
  • Wait a few minutes for changes to propagate

Upload Fails

• Check file size (must be < 10MB)
• Verify file format (CSV, JSON, TXT only)
• Ensure file has proper headers

📧 Support

For issues or questions:

• Create an issue on GitHub
• Email: support@example.com
• Documentation: docs.example.com

🙏 Acknowledgments

• Built for Rick, astronomy educator extraordinaire
• Powered by OpenRouter AI
• Chart.js for beautiful visualizations
• Firebase for backend infrastructure
• Vercel for hosting

🔮 Roadmap

Planned Features

• Multiple dataset overlays
• Custom color schemes
• Collaborative sharing
• Advanced statistical analysis
• 3D visualizations
• Jupyter notebook integration
• Python API for programmatic access

Version History

• v1.0.0 (2025-11-05): Initial release with core features

---

Made with ❤️ for astronomy education