p5.js Coding Tutorial | Habit Tracker (Data Visualization)

LET'S CONNECT ✨ Sign up for my newsletter at https://www.pattvira.com ✨ Instagram: https://www.instagram.com/pattvira ✨ Twitter: https://twitter.com/pattvira -- Links: 🔗 p5.js editor: https://editor.p5js.org/ 🔗 Habit Tracker - Data Visualization Code: https://editor.p5js.org/pattvira/sketches/H9ZGHN8od 🔗 Introduction to Creative Coding Playlist: https://youtube.com/playlist?list=PL0beHPVMklwgMz4Z-mNp4_udo9mjBk7pn&si=XhvQaojd6cIrxvdn References: 🔗 p5.js p5.Table: https://p5js.org/reference/p5/p5.Table 🔗 findIndex method: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex#syntax 🔗 The Ring of Time by He Yuxuan: https://whynotdesign.cc/The-Ring-of-Time-Typography-Calendar-2022 Timestamps: 0:00 Intro 0:31 Prepare the data 0:58 Upload and preload data into the sketch 2:06 Learn about the p5.Table class 5:31 Create a dates[] array to store all the year's dates 7:35 Create a runningDates[] array to store matching date indices 12:40 Draw a spiral 19:32 Add ellipses on the spiral using data from runningDates[] 22:46 Final touches