Coding Challenge 178: Climate Spiral

Coding Challenge 178: Climate Spiral

HomeThe Coding TrainCoding Challenge 178: Climate Spiral
Coding Challenge 178: Climate Spiral
ChannelPublish DateThumbnail & View CountDownload Video
Channel AvatarPublish Date not found Thumbnail
0 Views
Learn how to create your own climate spiral using p5.js and temperature data. Originally designed by climatologist Ed Hawkins, the climate spiral is a visual representation of changing temperatures over time, illustrating the urgent need to combat 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?listPLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
All videos: https://www.youtube.com/playlist?listPLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

The references:
️ National Center for Atmospheric Sciences: https://ncas.ac.uk
️ Ed Hawkin 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 to 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?idgov.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?vjWoCXLuTIkI
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 Visualization of 3D seismic data: https://youtu.be/dbs4IYGfAXc
96 View the digits of Pi: https://youtu.be/WEd_UIKG-uc
109 Visualization of 500,000 subscribers: https://youtu.be/Ae73YY_GAU8

Timestamp:
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 data
4:34 Download data
5:13 Use loadTable() to preload data
7:01 a.m. View the data
9:28 Configure the base model
10:42 a.m. Polar coordinates
12:36 Add month labels
4:11 p.m. It’s data time!
5:05 p.m. Draw the spiral
6:09 p.m. Configure global variables
7:04 p.m. Map x, y positions with data
8:27 p.m. Loop through all 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 the 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 Exit

Editing Mathieu Blanchette
Animation by Jason Heglund
Music by Epidemic Sound

Website: https://thecodingtrain.com/
Share your creation! https://thecodingtrain.com/guides/passenger-showcase-guide
Suggested topics: https://github.com/CodingTrain/Suggestion-Box
GitHub: https://github.com/CodingTrain
Discord: https://thecodingtrain.com/discord
Join: http://youtube.com/thecodingtrain/join
Shop: https://standard.tv/codingtrain
️ Twitter: https://twitter.com/thecodingtrain
Instagram: https://www.instagram.com/the.coding.train/

Coding challenges: https://www.youtube.com/playlist?listPLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Introduction to programming: https://www.youtube.com/playlist?listPLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFFTA

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 automatically generated. If you encounter an issue, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new

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

Please take the opportunity to connect and share this video with your friends and family if you find it useful.