Web application for visualizing fire data from VIIRS satellite observations. It highlights active fires, fire perimeters and fireline activity to help understand fire progression. This application is currently viewable at https://www.earthdata.nasa.gov/da
npm install @dsio/wildfire-explorerWeb application for visualizing fire data from VIIRS satellite observations. It highlights active fires, fire perimeters and fireline activity to help understand fire progression. This application is currently viewable at https://www.earthdata.nasa.gov/dashboard/tools/fire-event-explorer.
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 — eis_fire_lf_perimeter_nrt: Most recent fire perimeter data from the current year
- Active Fire Front — eis_fire_lf_fireline_nrt: Fireline segments indicating the movement front of active fires
- Fire Detections — 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.
- React, TypeScript, Zustand
- 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
- Node.js 18+
- npm or yarn
``bashClone the repository
git clone https://github.com/NASA-IMPACT/us-fire-events-tool.git
cd us-fire-events-tool
Visit
to see the application.Development
This project uses Vite for development.
$3
-
npm run dev: Start development server
- npm run build: Build for production
- npm run build:lib: Build in library mode for publishing to NPM
- npm run lint: Run ESLint
- npm run preview: Preview production build locallyPublishing to npm
To publish a new version of the Fire Event Explorer as an npm package:
$3
Update the version field in
package.json according to semantic versioning:- Major for breaking changes
- Minor for new, backward-compatible features
- Patch for fixes and internal improvements
$3
Make sure you're authenticated with npm under the correct scope. You’ll need a valid auth token with publish permissions from the relevant organization. You can also add the acquired token to your local
.npmrc file. The current scope is @dsio, but the package will soon be migrated to the @teamimpact scope.$3
Once authenticated and the version is updated, run
npm run build:lib to build the package in library mode. Once built, run npm publish. The package is published as a public package and is accessible via the npm registry.Expanding ESLint Configuration
For production applications, we recommend enabling type-aware lint rules:
`js
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:
js
// 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,
},
})
``This project is licensed under Apache 2, see the LICENSE file for more details.
- 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