Learn to visualize global wildfire data using Chakra UI and React in this comprehensive tutorial. Explore the process of building an interactive web application that showcases wildfire data from satellite sources. Begin with an introduction to Chakra UI and its benefits for React applications, then dive into setting up a base project with react-map-gl and deck.gl. Design a geo map layout, integrate JSON wildfire data, and create various visualizations including scatter maps, heat maps, and hexagon views. Implement data filtering options, such as date ranges and confidence values, using a customizable sidebar. Throughout the tutorial, gain insights into merging MODIS and VIIRS data, switching between map layouts, and optimizing your code for performance. By the end, you'll have created a fully functional wildfire visualization tool and pushed your project to GitHub, equipping you with valuable skills in frontend development and data visualization.
How to Visualize Global Wildfire Data on Front-End Using Chakra UI
Overview
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
Taught by
Prodramp
