Fire events visualization tool

Web application for visualizing fire data from VIIRS satellite observations. It highlights active fires, fire perimeters and fireline activity to help understand fire progression.

Data sources

The app uses data from multiple STAC collections, generated by the FEDs algorithm, which tracks fire movement and severity using VIIRS thermal observations from the Suomi NPP and NOAA-20 satellites. The visualization includes:

• Fire perimeters (NRT) — eis_fire_lf_perimeter_nrt: Most recent fire perimeter data from the current year
• Firelines (NRT) — eis_fire_lf_fireline_nrt: Fireline segments indicating the movement front of active fires
• New fire pixels (NRT) — eis_fire_lf_newfirepix_nrt: New fire detections since the last VIIRS overpass

VIIRS sensors provide updates approximately every 12 hours. For more detailed information about these and other collections, see the related OpenVEDA documentation.

Technologies

• React, TypeScript
• Deck.gl + Vector tiles for rendering the fire data
• ParticleLayer for visualizing wind information
• Simple video (webm) export functionality for recording animations
• Recharts for charting of the fire stats
• U.S. Web Design System for theming a gov-style UI

Getting started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

# Clone the repository
git clone https://github.com/NASA-IMPACT/us-fire-events-tool.git
cd us-fire-events-tool

# Install dependencies
npm install --legacy-peer-deps

# Create a .env file in the project root and set your environment variables
VITE_MAPBOX_TOKEN=your-mapbox-access-token
VITE_FEATURES_API_ENDPOINT='https://openveda.cloud/api/features'

# Start the development server
npm run dev
# or
yarn dev

Visit http://localhost:5173 to see the application.

Development

This project uses Vite for development.

Scripts

• npm run dev: Start development server
• npm run build: Build for production
• npm run lint: Run ESLint
• npm run preview: Preview production build locally

Expanding ESLint Configuration

For production applications, we recommend enabling type-aware lint rules:

export default tseslint.config({
  extends: [
    ...tseslint.configs.recommendedTypeChecked,
    // Alternatively, use this for stricter rules
    ...tseslint.configs.strictTypeChecked,
    // Optionally, add this for stylistic rules
    ...tseslint.configs.stylisticTypeChecked,
  ],
  languageOptions: {
    parserOptions: {
      project: ['./tsconfig.node.json', './tsconfig.app.json'],
      tsconfigRootDir: import.meta.dirname,
    },
  },
})

You can also install React-specific lint plugins:

// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'

export default tseslint.config({
  plugins: {
    'react-x': reactX,
    'react-dom': reactDom,
  },
  rules: {
    ...reactX.configs['recommended-typescript'].rules,
    ...reactDom.configs.recommended.rules,
  },
})

License

This project is licensed under Apache 2, see the LICENSE file for more details.

Acknowledgments

• Fire data produced by the FEDs algorithm, based on Chen et al 2020's algorithm for California
• VIIRS thermal sensor data from Suomi NPP and NOAA-20 satellites