VolcanInfos — Interactive Volcanic Data Visualization

Static web application for visualizing volcanic geochemical data (Temperature, Pressure, oxide compositions, etc.) with interactive 2D and 3D scatter plots.

Overview

• 2D Charts: scatter plots with confidence ellipses, lasso/rectangle selection
• 3D Charts: scatter plots with group centroids, free rotation
• CSV Import: drag & drop or browse, with preview and validation
• Manual Entry: dynamic form based on CSV columns
• Manage Data: view and delete user-added points individually or all at once
• Data Correction: drag user points on the 2D chart to correct positions, with undo/redo
• Export / Contribute: CSV download + submission instructions
• Toast Notifications: styled auto-dismissing notifications (replaces browser alerts)
• Loading Spinner: full-screen overlay while base data loads
• Guided Tutorial: step-by-step onboarding overlay on first visit, re-triggerable via "?" button
• Password Protection: Netlify edge function with HTTP Basic Auth (WIP gate)

Tech Stack

Component	Technology
Frontend	Vanilla HTML/CSS/JS (ES Modules, no build step)
Visualization	Plotly.js 2.27.0 via CDN
Fonts	Syne (headings) + Space Mono (monospace) via Google Fonts
Local Storage	localStorage (user data)
Data Format	CSV
Hosting	Netlify (edge functions for auth)

Quick Start

# ES Modules require an HTTP server (file:// won't work)
python -m http.server 8000
# Then open http://localhost:8000

Detailed Documentation

Document	Description
Architecture	Architecture overview, patterns, and design decisions
Project Files	Detailed description of every file in the project
Service Layer	Data API, static backend, migration to a dynamic backend
UI Components	Sidebar, 2D/3D charts, detail panel, modals
Data Format	CSV structure, columns, types, missing value handling
Contributing	Data contribution workflow and adding dimensions
Scripts Reference	What each JS file does, key functions, and links to detailed API docs

Project Structure

VolcanoWebsite/
├── index.html                  # SPA entry point — 3-column layout
├── css/style.css               # Dark theme
├── js/
│   ├── config.js               # Centralized configuration
│   ├── events.js               # Pub/sub event bus
│   ├── app.js                  # Main orchestrator
│   ├── columns.js              # CSV column configuration
│   ├── csv.js                  # Pure CSV parser/exporter
│   ├── selection.js            # Point selection state
│   ├── services/
│   │   ├── api.js              # Data access facade
│   │   └── static-backend.js   # Static implementation (CSV + localStorage)
│   └── ui/
│       ├── sidebar.js          # Axis selectors, volcano filter
│       ├── chart2d.js          # 2D Plotly chart (scattergl + ellipses)
│       ├── chart3d.js          # 3D Plotly chart (scatter3d + centroids)
│       ├── detail-panel.js     # Right panel: point detail, stats
│       ├── correction.js       # Data correction: drag points, undo/redo
│       ├── toast.js            # Toast notification system
│       ├── modals.js           # Modals: upload, entry, manage, export, contribute
│       └── tutorial.js         # Guided tutorial overlay (step-by-step onboarding)
├── data/volcanoData.csv        # Main database
├── netlify.toml                # Netlify config (edge function routing)
├── netlify/edge-functions/
│   └── basic-auth.ts           # Password protection (HTTP Basic Auth)
└── docs/                       # Detailed documentation (see links above)

Conventions

• English UI and code
• camelCase for JS, kebab-case for CSS
• HTML IDs in camelCase (axisX, plotDiv, modalUpload)
• All tunable values in js/config.js