Главная
Study mode:
on
1
- Tutorial Starts
2
- Tutorial Intro
3
- Final product sneak-peak
4
- Global Active Wildfire Data Website
5
- Last 7 days wildfire data in JSON
6
- Chakra UI Template with react-map-gl/deck-gl
7
- Base Source Code Setup
8
- Base Project Code Review
9
- Base Code Geo map layout design
10
- Creating wildfire map route
11
- Side-by-side code and design
12
- Wildfire JSON data integration
13
- Scatter-map viz
14
- Heat-map viz
15
- MODIS and VIIRS data merge
16
- Sidebar for data filtering
17
- Filter data by date
18
- MODIS/VIIRS based filtering
19
- Wildfire confidence value as range slider
20
- Various map layout switch
21
- Hexagon viz
22
- Final code review and demo
23
- Final code push to GitHub
24
- Project completion Recap
Description:
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

Prodramp
Add to list
0:00 / 0:00