How to Code a Climate Spiral

Channel:
United States The Coding Train
Subscribers:
1,750,000
Published on ● Video Link: https://www.youtube.com/watch?v=rVBTxnRyOuE


Category:
Guide
Duration: 41:07
71,545 views
2,482

Learn to create your own climate spiral using p5.js and temperature data. Originally designed by the climate scientist Ed Hawkins, the climate spiral is a visual representation of the changing temperatures over time, illustrating the urgent need to address climate change. Code: https://thecodingtrain.com/challenges/178-climate-spiral

πŸš€ Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-coding-challenge-178-visualizing-data

πŸ•ΉοΈ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/sketches/r69De6khN

πŸŽ₯ Previous video: https://youtu.be/IxdGyqhppis?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

References:
πŸŒ₯️ National Centre for Atmospheric Science: https://ncas.ac.uk
πŸŒ₯️ Ed Hawkin's website: https://edhawkins.org
🌎 NASA Earth Observatory - Global Temperatures: https://earthobservatory.nasa.gov/world-of-change/global-temperatures
🌎 GISS Surface Temperature Analysis (GISTEMP v4): https://data.giss.nasa.gov/gistemp/
🌎 GISS Surface Temperature Analysis FAQ: https://data.giss.nasa.gov/gistemp/faq/
🌎 GLOBAL SURFACE TEMPERATURE CHANGE: https://pubs.giss.nasa.gov/docs/2010/2010_Hansen_ha00510u.pdf
🌎 Improvements in the GISTEMP Uncertainty Model: https://agupubs.onlinelibrary.wiley.com/doi/10.1029/2018JD029522
🌊 National Centers for Environmental Information: https://www.ncei.noaa.gov/access/metadata/landing-page/bin/iso?id=gov.noaa.ncdc:C00934
πŸ”— Suggestion from ABohyn: https://github.com/CodingTrain/Suggestion-Box/issues/1789
πŸ”— p5.loadTable: https://p5js.org/reference/#/p5/loadTable
πŸ”— p5.TableRow: https://p5js.org/reference/#/p5.TableRow
πŸ”— lerpColor(): https://p5js.org/reference/#/p5/lerpColor

Videos:
πŸŽ₯ Climate Spiral: https://www.youtube.com/watch?v=jWoCXLuTIkI
πŸš‚ Polar Coordinates: https://youtu.be/O5wjXoFrau4
πŸš‚ Translate, Rotate, Push/Pop: https://youtu.be/o9sgjuh-CBM

Related Coding Challenges:
πŸš‚ 48 White House Social Media Data Visualization: https://youtu.be/UrznYJltZrU
πŸš‚ 58 3D Earthquake Data Visualization: https://youtu.be/dbs4IYGfAXc
πŸš‚ 96 Visualizing the Digits of Pi: https://youtu.be/WEd_UIKG-uc
πŸš‚ 109 Visualizing 500,000 Subscribers: https://youtu.be/Ae73YY_GAU8

Timestamps:
0:00 Welcome to a special Earth Day Coding Challenge!
0:35 What is a temperature anomaly?
2:28 NASA Goddard Institute for Space Studies website
3:17 Preview the data
4:34 Upload the data
5:13 Use loadTable() to preload the data
7:01 Check out the data
9:28 Set up the base pattern
10:42 Polar Coordinates
12:36 Add the month labels
16:11 Time for the data!
17:05 Draw the spiral
18:09 Set up global variables
19:04 Map the x, y positions to the data
20:27 Loop through all of the data
21:57 Check for null values
22:43 Animate the spiral
25:17 Add one month at a time
28:47 Add color to the spiral
29:42 Connect the points with a line segment
34:45 Use lerpColor() to vary color
38:00 Use parseFloat() to convert a string to a float
38:40 We have the climate spiral
40:16 Suggestions for possible variations
40:42 Outro

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

πŸš‚ Website: https://thecodingtrain.com/
πŸ‘Ύ Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
🚩 Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
πŸ’‘ GitHub: https://github.com/CodingTrain
πŸ’¬ Discord: https://thecodingtrain.com/discord
πŸ’– Membership: http://youtube.com/thecodingtrain/join
πŸ›’ Store: https://standard.tv/codingtrain
πŸ–‹οΈ Twitter: https://twitter.com/thecodingtrain
πŸ“Έ Instagram: https://www.instagram.com/the.coding.train/

πŸŽ₯ Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
πŸŽ₯ Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

πŸ”— p5.js: https://p5js.org
πŸ”— p5.js Web Editor: https://editor.p5js.org/
πŸ”— Processing: https://processing.org

πŸ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

#data #visualization #datavisualization #climatespiral #climatechange #p5js #javascript



Other Videos By The Coding Train


2023-11-13I made a Discord Bot that says Choo Choo
2023-11-09How to Set Up a Node.js Project
2023-11-01Workflow: Terminal, Shell, Node.js, VSCode
2023-10-13Stickers!
2023-10-01Creative Coding for Beginners - Full Course!
2023-09-25New Full Processing Course Announcement (and other updates)
2023-09-22Beginner Creative Coding Course now on Nebula!
2023-08-26Did I finish Nature of Code?
2023-05-31All aboard the new Coding Train website!
2023-05-14ITP/IMA Pre-Show
2023-04-22How to Code a Climate Spiral
2023-04-13Coding Challenge 177: Soft Body Physics
2023-03-14Coding Challenge 176: Buffon's Needle
2023-01-29Coding Train Live!: Genuary Speed Run Challenge!
2023-01-18I broke ChatGPT! #creativecoding #ai #shorts
2023-01-01Coding Train 2022 in Review, Plans for 2023
2023-01-01Coding a Fractal Tree in 60 Seconds #programming #shorts
2022-12-19Leaving No Tile Unturned! Wave Function Collapse Passenger Showcase #shorts
2022-12-07πŸ‘Ύ p5.js saveGif() changes everything! #creativecoding #programming #shorts
2022-12-04Playing YOUR Versions of the Apple ][ Snake Game! - Showcase 1 #creativecoding #programming #shorts
2022-11-30A promise is a promise… Jamming with Your Tunes! 🎡 #programming #music #shorts