As an expert AI assistant specialized in full-stack development and SaaS application architecture, your task is to generate a complete, single-page React application based on the provided problem description. The application should focus on analyzing and visualizing the acceleration of global warming, inspired by the Hacker News discussion about a significant acceleration post-2015, accounting for natural variability factors.
**1. PROJECT OVERVIEW:**
The primary goal of this application is to provide a user-friendly platform for visualizing and understanding the accelerated trend of global warming. It aims to address the user problem of comprehending complex climate data by presenting clear, actionable insights derived from scientific preprints. The core value proposition is to make advanced climate data analysis accessible to a broader audience, including researchers, activists, policymakers, and the general public, enabling informed decision-making. The application will ingest and process global temperature data, adjust it for major natural variability factors (El Niño, volcanism, solar variation), and highlight statistically significant acceleration trends, especially post-2015.
**2. TECH STACK:**
- **Frontend Framework:** React.js (using functional components and hooks)
- **State Management:** Zustand (lightweight and efficient for managing global and local states)
- **UI Library/Framework:** Tailwind CSS (for rapid, utility-first styling)
- **Charting Library:** Chart.js or Recharts (for interactive data visualizations)
- **Data Fetching:** Axios (for making API requests if needed, though MVP might rely on local data)
- **Routing (Optional for SPA):** React Router DOM (if multiple views/pages are considered, though MVP is single-page)
- **Build Tool:** Vite (for fast development server and optimized builds)
- **Deployment:** Netlify or Vercel
**3. CORE FEATURES & USER FLOW:**
- **Data Input/Selection:**
- Users can select pre-loaded datasets (e.g., adjusted global temperature anomaly data, raw data) or potentially upload their own CSV (future feature).
- Initial MVP will use pre-loaded mock data simulating the preprint's findings.
- **User Flow:** Upon loading the app, the user sees default visualizations. A control panel allows switching between different data views or parameters.
- **Data Processing & Adjustment:**
- The application will simulate the adjustment process for natural variability factors (El Niño, volcanism, solar). This will be pre-computed for the MVP.
- **User Flow:** This happens server-side or during build time for the MVP. The user selects 'adjusted' or 'raw' data, and the corresponding visualization is displayed.
- **Trend Acceleration Visualization:**
- Display line charts showing global temperature anomalies over time.
- Highlight the post-2015 period and compare 10-year rolling averages or trends.
- Use distinct colors or annotations to emphasize the accelerated periods.
- **User Flow:** The main chart displays the selected data. Users can hover over data points to see specific values and dates. Zoom/pan functionality might be included.
- **Statistical Summary:**
- Display key statistics: overall trend, acceleration rate (e.g., change in slope), average temperature for selected periods, variability metrics.
- **User Flow:** A dedicated section or tooltip displays these calculated statistics relevant to the currently visualized data.
- **Data Export & Sharing:**
- Allow users to download the displayed chart as an image (PNG/JPEG).
- Provide options to share a link to the current view (preserving selected data and parameters).
- Allow downloading the processed data in CSV format.
- **User Flow:** Buttons for 'Download Chart', 'Share Link', 'Download Data' are present in the UI.
**4. UI/UX DESIGN:**
- **Layout:** Single Page Application (SPA) layout. A main content area for the chart and statistics, a sidebar or top bar for controls (data selection, time range, adjustment toggles).
- **Color Palette:** Use a professional and serious color palette. Blues and grays for neutral data, a contrasting color (e.g., red or orange) to highlight warming trends or acceleration. Ensure good contrast for accessibility.
- **Typography:** Clean, readable sans-serif fonts (e.g., Inter, Lato). Use appropriate font weights and sizes for hierarchy (titles, labels, body text).
- **Responsiveness:** Mobile-first design approach. Ensure the layout adapts gracefully to various screen sizes (desktops, tablets, mobiles). Charts should be responsive and legible on all devices.
- **Interactivity:** Tooltips on charts, interactive legends, intuitive controls.
**5. COMPONENT BREAKDOWN:**
- **`App.js`:** Main application component, sets up layout, manages global state initialization.
- **`Header.js`:** Displays the application title and potentially a brief description or logo.
- **`ControlPanel.js`:** Contains controls for selecting datasets, toggling adjustments, setting time ranges.
- `DatasetSelector.js` (Prop: `datasets`, `onSelect`, `selectedDataset`)
- `AdjustmentToggle.js` (Prop: `isAdjusted`, `onToggle`)
- **`ChartComponent.js`:** Renders the main data visualization using Chart.js/Recharts.
- Props: `data`, `options`, `type` (e.g., 'line', 'bar')
- **`StatisticsDisplay.js`:** Shows key calculated statistics.
- Props: `stats` object
- **`ActionButtons.js`:** Contains buttons for export and sharing.
- Props: `onDownloadChart`, `onShare`, `onDownloadData`
- **`Footer.js`:** Copyright information, links to data sources, acknowledgments.
**6. DATA MODEL & STATE MANAGEMENT (Zustand):**
- **State:**
```javascript
// Example Zustand store
import { create } from 'zustand';
export const useStore = create((set) => ({
rawData: [], // Array of { year: number, temperature: number }
adjustedData: [], // Array of { year: number, temperature: number }
selectedDataset: 'adjusted', // 'raw' or 'adjusted'
isLoading: false,
error: null,
// Actions
fetchData: async () => {
set({ isLoading: true });
try {
// In MVP, load mock data
const mockRaw = mockRawData; // See SAMPLE DATA
const mockAdjusted = calculateAdjustedData(mockRaw); // Simulate adjustment
set({ rawData: mockRaw, adjustedData: mockAdjusted, isLoading: false });
} catch (err) {
set({ error: 'Failed to load data', isLoading: false });
}
},
setSelectedDataset: (datasetType) => set({ selectedDataset: datasetType }),
}));
```
- **Mock Data Format:**
```json
// For rawData and adjustedData
[
{ "year": 1880, "temperature": -0.16 },
{ "year": 1881, "temperature": -0.09 },
// ... more data points
{ "year": 2023, "temperature": 1.20 }
]
```
- **Statistics Object:**
```json
{
"period": "1945-2023",
"overallTrendSlope": 0.015, // degrees C per year
"accelerationSlope": 0.0005, // change in slope per year^2
"last10YearAvgIncrease": 0.3,
"current10YearTrend": "Significantly Faster than Previous Periods"
}
```
**7. ANIMATIONS & INTERACTIONS:**
- **Chart Loading State:** Display a skeleton loader or a subtle animation while data is being fetched or processed.
- **Hover Effects:** Smooth tooltips appearing on chart data points, highlighting the corresponding bar/point.
- **Transitions:** Subtle transitions when switching between datasets or adjustment modes (e.g., fade effect on the chart).
- **Micro-interactions:** Visual feedback on button clicks (e.g., slight scale change).
**8. EDGE CASES:**
- **No Data:** Display a clear message if no data is available or loaded.
- **Error Handling:** Show user-friendly error messages if data fetching fails or processing errors occur. Log detailed errors for debugging.
- **Data Validation:** If user uploads data (future feature), implement validation for format, range, and completeness.
- **Accessibility (a11y):** Ensure keyboard navigation, proper ARIA attributes for interactive elements, sufficient color contrast, and screen reader compatibility. Chart data should be accessible via tables or alternative descriptions.
**9. SAMPLE DATA (Mock):**
Provide mock data arrays simulating global temperature anomalies, adjusted and unadjusted, from ~1880 to the present. Include a significant upward trend post-2015 in the adjusted data.
```javascript
// Example Mock Data (First 5 and Last 5 entries)
const mockRawData = [
{ "year": 1880, "temperature": -0.16 },
{ "year": 1881, "temperature": -0.09 },
{ "year": 1882, "temperature": -0.10 },
{ "year": 1883, "temperature": -0.17 },
{ "year": 1884, "temperature": -0.15 },
// ... (approx. 100+ entries)
{ "year": 2019, "temperature": 1.10 },
{ "year": 2020, "temperature": 1.02 },
{ "year": 2021, "temperature": 0.92 },
{ "year": 2022, "temperature": 0.87 },
{ "year": 2023, "temperature": 1.15 }
];
// Simulated adjusted data (example - replace with actual calculation logic if possible)
const calculateAdjustedData = (rawData) => {
return rawData.map(item => {
let adjustedTemp = item.temperature;
// Simulate acceleration effect, especially post-2015
if (item.year > 2015) {
adjustedTemp += Math.min(item.year - 2015, 10) * 0.05; // Add more warming post-2015
}
// Simulate some effect of El Nino/La Nina etc. (simplified)
if (item.year % 5 === 0 && item.year > 1950) { // Every 5 years, simple oscillation
adjustedTemp += (Math.random() - 0.5) * 0.2;
}
return { year: item.year, temperature: parseFloat(adjustedTemp.toFixed(2)) };
});
};
// Mock data for El Nino/Volcano/Solar (for more advanced simulation - optional for MVP)
const mockNaturalVariability = {
"ElNino": [{ year: 1983, effect: 0.2 }, { year: 1998, effect: 0.25 }, ...],
"Volcano": [{ year: 1991, effect: -0.3 }, ...],
"Solar": [{ year: 2000, effect: 0.05 }, ...]
};
// In the store, call: const mockAdjusted = calculateAdjustedData(mockRawData);
```
**10. DEPLOYMENT NOTES:**
- **Build Command:** Use `npm run build` or `yarn build` via Vite.
- **Environment Variables:** Use `.env` files for configuration (e.g., API endpoints if any, though MVP is self-contained). `VITE_API_URL` etc.
- **Performance Optimizations:**
- Code Splitting: Vite handles this automatically for larger apps.
- Image Optimization: Ensure charts are rendered efficiently. Consider lazy loading if many components are added.
- Memoization: Use `React.memo` and `useMemo`/`useCallback` where appropriate to prevent unnecessary re-renders.
- **HTTPS:** Ensure deployment uses HTTPS.
- **CORS:** If an external API is used, configure CORS appropriately on the backend.
- **PWA (Optional):** Consider making it a Progressive Web App for offline capabilities and better mobile experience.