https://github.com/uzo-felix/isolines
https://github.com/uzo-felix/isolines
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/uzo-felix/isolines
- Owner: Uzo-Felix
- Created: 2025-04-08T16:10:24.000Z (2 months ago)
- Default Branch: main
- Last Pushed: 2025-04-08T18:09:18.000Z (2 months ago)
- Last Synced: 2025-04-08T19:25:33.208Z (2 months ago)
- Language: TypeScript
- Size: 194 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Isoline Visualization with Javascript
A application for visualizing isolines, using:
- CONREC algorithm for contour generation
## Features
- Adaptive contour level calculation
## Prerequisites
- Node.js v16+
- npm/yarn
- CSV data file (see [Data Preparation](#data-preparation))
## Getting Started
### 1. Clone Repository
```bash
git clone https://github.com/Uzo-Felix/isolines.git
git branch -M main
cd isolines
```
### 2. Install Dependencies
```bash
npm install
# or
yarn install
```
### 3. Data Preparation
1. **Obtain ERA5 Data**:
- Download MSLP data from [Copernicus Climate Data Store](https://cds.climate.copernicus.eu/)
- Use Panoply to export as CSV:
- File → Export → CSV
- Save as `msl.csv`
```bash
mv msl.csv data/
```
### 4. Run Application
```bash
npm start
```
## Project Structure
```text
├── public/data/
│ └── msl.csv # ERA5 data file
├── src/
│ ├── components/ # Visualization components
│ └── utils/ # CONREC algorithm implementation
```
## Key Implementation Details
### Data Processing
- **Chunking**: 100 rows per chunk (configurable)
- **Coordinate Handling**:
- Normalizes longitude (-180° to 180°)
- Special pole value handling
- **Value Scaling**: Automatic contour level calculation
### Visualization Features
- Dynamic D3.js coordinate system
- Viridis color scale for contour levels
- Automatic gap closing (μ = 1.5√2)
- Adaptive spatial indexing with grid buckets
### Performance Optimizations
- Web Worker parallel processing
- R-tree inspired spatial indexing
- Memory-efficient TypedArrays
## Customization
Modify in `src/App.tsx`:
```typescript
// Adjust contour levels
const step = range / 10; // Change denominator for different level density
// Modify visualization parameters
const xScale = d3.scaleLinear().domain([-180, 180])...
```
## Troubleshooting
### Common Issues
1. **Missing CSV File**
- Ensure `msl.csv` exists in data directory