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...
🚀 Watch this video ad-free on Nebula https://nebula.tv/videos/codingtrain-...
🕹️ p5.js Web Editor Sketch: https://editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge 177: Soft Body Physics
🎥 All videos: • Coding Challenges
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/wor...
🌎 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/...
🌎 Improvements in the GISTEMP Uncertainty Model: https://agupubs.onlinelibrary.wiley.c...
🌊 National Centers for Environmental Information: https://www.ncei.noaa.gov/access/meta...
🔗 Suggestion from ABohyn: https://github.com/CodingTrain/Sugges...
🔗 p5.loadTable: https://p5js.org/reference/#/p5/loadT...
🔗 p5.TableRow: https://p5js.org/reference/#/p5.TableRow
🔗 lerpColor(): https://p5js.org/reference/#/p5/lerpC...
Videos:
🎥 Climate Spiral: • Climate Spiral
🚂 Polar Coordinates: • 3.4 Polar Coordinates - The Nature of...
🚂 Translate, Rotate, Push/Pop: • How to Rotate Shapes in p5.js (transl...
Related Coding Challenges:
🚂 48 White House Social Media Data Visualization: • Coding Challenge #48: White House Soc...
🚂 58 3D Earthquake Data Visualization: • Coding Challenge #58: 3D Earthquake D...
🚂 96 Visualizing the Digits of Pi: • Coding Challenge #96: Visualizing the...
🚂 109 Visualizing 500,000 Subscribers: • Coding Challenge #109: Visualizing 50...
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/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord: https://thecodingtrain.com/discord
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 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-o...
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecod...
#data #visualization #datavisualization #climatespiral #climatechange #p5js #javascript
Watch video Coding Challenge 178: Climate Spiral online without registration, duration hours minute second in high quality. This video was added by user The Coding Train 22 April 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 88,146 once and liked it 2.8 thousand people.