🌧️ São Paulo Climate Data Dashboard

A comprehensive, public-facing platform for visualizing 20+ years of flood and rainfall data in São Paulo, Brazil.

🎯 Overview

This project transforms raw climate data from the CGE (Centro de Gerenciamento de Emergências) into interactive, accessible visualizations that serve multiple audiences:

• 🏘️ Citizens: Plan routes and avoid flood-prone areas
• 🔬 Researchers: Access historical climate data for studies
• 🏗️ Urban Planners: Identify infrastructure priorities
• 🚨 Emergency Services: Optimize response based on patterns

✨ Features

📊 7 Question-Driven Visualizations

1. Historical Trends - "How has flooding changed over time?"
2. Rainfall Correlation - "Does more rain mean more floods?" (with Pearson coefficient)
3. Hourly Patterns - "When should I worry about floods?" (24x7 heatmap)
4. Seasonal Analysis - "Which months are riskiest?" (Radar chart)
5. Duration Statistics - "How long do floods last?"
6. Regional Comparison - "Which neighborhoods get more rain?"
7. Calendar Heatmap - "What were the rainiest days?" (365-day view)

🚀 Technical Features

• ✅ Modern UI/UX: Glassmorphism, smooth animations, gradient backgrounds
• ✅ Fully Accessible: WCAG AA compliant, ARIA labels, keyboard navigation
• ✅ Responsive Design: Mobile-first, 320px to 1920px
• ✅ Performance Optimized: Lazy loading, caching, code splitting
• ✅ Bilingual Support: Portuguese and English
• ✅ Open Data: Public API, downloadable datasets
• ✅ Real-time Updates: Daily data refresh from CGE

🗄️ Rich Dataset

• 20,030+ flood events (2004-present)
• 203,376 rainfall measurements
• 44 subprefectures monitored
• 20+ years of historical data

🏗️ Architecture

Frontend

• Framework: React 18.3 + TypeScript 5.5
• Build Tool: Vite 5.4
• Styling: Tailwind CSS 3.4
• Charts: Recharts, Chart.js
• Maps: Leaflet + React-Leaflet
• Animations: Framer Motion

Backend

• API: FastAPI (Python)
• Database: SQLite
• Data Collection: Automated daily scraping
• Hosting: Render
• Cache: In-memory with TTL

🚀 Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/yourusername/climate-data-web-page.git
cd climate-data-web-page

# Install dependencies
npm install

# Run development server
npm run dev

Open http://localhost:5173

Build for Production

npm run build
npm run preview

📁 Project Structure

climate-data-web-page/
├── src/
│   ├── components/          # React components
│   │   ├── Dashboard.tsx    # Main dashboard layout
│   │   ├── ProjectOverview.tsx
│   │   ├── HistoricalFloodsCard.tsx
│   │   ├── RainfallFloodCorrelationCard.tsx
│   │   ├── FloodHourlyHeatmapCard.tsx
│   │   ├── SeasonalPatternsCard.tsx
│   │   ├── FloodDurationDistributionCard.tsx
│   │   ├── SubprefectureRainfallComparisonCard.tsx
│   │   └── RainfallCalendarHeatmap.tsx
│   ├── pages/              # Page components
│   ├── types/              # TypeScript type definitions
│   ├── utils/              # Utility functions
│   │   ├── apiClient.ts    # API wrapper
│   │   ├── chartConfig.ts  # Chart theming
│   │   └── performance.ts  # Performance utilities
│   ├── hooks/              # Custom React hooks
│   └── index.css           # Global styles
├── public/                 # Static assets
├── TESTING.md             # Testing guide
├── DEPLOYMENT.md          # Deployment guide
└── README.md

🌐 API Documentation

Base URL: https://web-scrapper-cge.onrender.com/api

Endpoints

Floods

• GET /floods/this-month - Current month flood count
• GET /floods/time-series - Historical trends (yearly/monthly)
• GET /floods/hourly-patterns - Time-of-day patterns
• GET /floods/seasonal-patterns - Monthly averages
• GET /floods/duration-stats - Flood duration distribution
• GET /floods/by-subprefecture - Counts by region
• GET /floods/all - Full dataset export

Rainfall

• GET /rainfall/daily-totals?year=2024 - Daily rainfall data
• GET /rainfall/by-subprefecture-monthly?year=2024 - Regional comparison

Analytics

• GET /analytics/rainfall-flood-correlation?start_date=2024-01-01&end_date=2024-12-31

🎨 Design System

Colors

• Primary: Green (#10B981) - Climate/nature theme
• Accent: Emerald gradients
• Danger: Red (#EF4444) - High flood alerts
• Warning: Amber (#FBBF24)
• Info: Blue (#3B82F6)

Typography

• Font: System UI stack
• Scale: Display, h1, h2, h3, body-lg, body

♿ Accessibility

• ✅ WCAG AA compliant
• ✅ Keyboard navigable
• ✅ Screen reader optimized
• ✅ High contrast ratios
• ✅ Focus indicators
• ✅ ARIA labels throughout

📈 Performance

• Lighthouse Score: 90+ (target)
• Bundle Size: < 1MB gzipped
• Load Time: < 3 seconds
• TTI: < 5 seconds
• Caching: 5-minute client cache, 24-hour backend cache

🧪 Testing

See TESTING.md for comprehensive testing guide.

# Run linter
npm run lint

# Build and test
npm run build
npm run preview

🚢 Deployment

See DEPLOYMENT.md for deployment instructions.

Quick Deploy to GitHub Pages

npm run deploy

🤝 Contributing

Contributions are welcome! Please:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📊 Data Sources

All data is collected from the CGE (Centro de Gerenciamento de Emergências) website. Data is automatically scraped daily and stored in a SQLite database.

Data Limitations

• Not all floods may be recorded
• Rainfall aggregated by subprefecture
• 24-hour update delay
• Dependent on CGE data accuracy

📝 License

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

👨‍💻 Author

Fabricio Neri

• LinkedIn
• Email: fabricionl@al.insper.edu.br

🙏 Acknowledgments

• CGE (Centro de Gerenciamento de Emergências) for public data
• Open source community for amazing tools
• Contributors and testers

📞 Support

For questions, issues, or feature requests:

• Open an issue on GitHub
• Contact via LinkedIn
• Email: fabricionl@al.insper.edu.br

---

Made with ❤️ for a better São Paulo