How to visualize global wildfire data on front-end? or on charka ui?

Wildfires are a global problems for several countries and threaten lives, communities, wildlife, and forests every year. Wildfire also cause significant changes into out climate.

With this wildfire project my objective is to make every frontend and full stack engineer has opportunity to build a wildfire showcase using the publicly available satellite data. This tutorial covers various aspects of designing Chakra UI layouts and building maps using geo-spatial data.

Chakra UI: Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications. If faster to build web component as you develop the layout the style directly in your component.

The tutorial timeline as below:

• (00:00) Tutorial Starts
• (00:17) Tutorial Intro
• (01:58) Final product sneak-peak
• (07:10) Global Active Wildfire Data Website
• (13:56) Last 7 days wildfire data in JSON
• (18:41) Chakra UI Template with react-map-gl/deck-gl
• (24:50) Base Source Code Setup
• (30:35) Base Project Code Review
• (35:33) Base Code Geo map layout design
• (40:33) Creating wildfire map route
• (45:59) Side-by-side code and design
• (48:31) Wildfire JSON data integration
• (53:40) Scatter-map viz
• (01:00:23) Heat-map viz
• (01:06:17) MODIS and VIIRS data merge
• (01:15:12) Sidebar for data filtering
• (01:22:05) Filter data by date
• (01:30:11) MODIS/VIIRS based filtering
• (01:35:04) Wildfire confidence value as range slider
• (01:39:08) Various map layout switch
• (01:44:04) Hexagon viz
• (01:51:18) Final code review and demo
• (01:53:53) Final code push to GitHub
• (01:56:49) Project completion Recap

Download wildfire dataset for any country or region: https://github.com/prodramp/publiccode/tree/master/chakra-ui-tutorials/wildfire-chakraui-demo

Download California Wildfire Dataset from Kaggle: https://www.kaggle.com/datasets/avkashchauhan/california-wildfire-dataset-from-2000-2021

Please visit:

Prodramp LLC | https://prodramp.com | @prodramp https://www.linkedin.com/company/prodramp

Content Creator: Avkash Chauhan (@avkashchauhan) https://www.linkedin.com/in/avkashchauhan

Tags: #ai #aicloud #h2oai #driverlessai #machinelearning #cloud #mlops #model #collaboration #deeplearning #modelserving #modeldeployment #keras #tensorflow #pytorch #datarobot #datahub #aiplatform #aicloud #modelperformance #modelfit #modeleffect #modelimpact #modelbias #modeldeployment #modelregistery #modelpipeline #neptuneai #pythondsp #pythonaudio #streamlit #pythonapps #deepchecks #modeltesting #codeartifact #dataartifact #modelartifact #onnx #aws #supervisor #ec2 #supervisord #kaggle #wildfire #naturaldisaster #kepler.gl #mapbox mapboxgl #wildfireml #lightgbm #xgboost #classification #regression #react #chakraui #datavisualization #dataengineering #frontenddevelopment #wildfire ... https://www.youtube.com/watch?v=8UmpbLwkLIk