How to Visualize Global Wildfire Data on Front-End Using Chakra UI

This tutorial builds a React website for visualizing global wildfire data from MODIS and VIIRS sources. It covers Chakra UI layouts, geospatial maps, scatter, heat-map, and hexagon visualizations, plus filtering by date, source, and confidence.

Syllabus

- Tutorial Starts
- Tutorial Intro
- Final product sneak-peak
- Global Active Wildfire Data Website
- Last 7 days wildfire data in JSON
- Chakra UI Template with react-map-gl/deck-gl
- Base Source Code Setup
- Base Project Code Review
- Base Code Geo map layout design
- Creating wildfire map route
- Side-by-side code and design
- Wildfire JSON data integration
- Scatter-map viz
- Heat-map viz
- MODIS and VIIRS data merge
- Sidebar for data filtering
- Filter data by date
- MODIS/VIIRS based filtering
- Wildfire confidence value as range slider
- Various map layout switch
- Hexagon viz
- Final code review and demo
- Final code push to GitHub
- Project completion Recap