Uploaded February 2023 | Updated September 2026, 2 weeks ago

---

In this video I'll teach you how to visualize machine learning data using JavaScript. We visualize the data I collected from you when I made this call for help: youtu.be/Yw2QZ1vq2ek

The data is just JSON files like the one we generated in the last lesson. Each of these contain the session id, student name and 8 different drawings. At the moment there are 496 files and you can get them from Github. The number is still growing and I’ll be updating it from time to time.

📁 Data
github.com/gniziemazity/drawing-data

Now the drawings are grouped together by student and that’s not convenient for Machine Learning in the long run, so, I’ll teach you how to process this raw data into a more manageable form: a dataset where each drawing is a sample. I’ll also teach you how to make a data visualizer app, but the processing we do at first doesn’t really need an interface. So, I’ll be working with Node JS, a back-end environment for JavaScript.

To follow along, install Node JS:
nodejs.org/en/download
Make sure you add 'node' and 'npm' to the PATH environment variable when asked!

⭐️HOMEWORK⭐️
Style the data viewer page in a different way and share your updates on my Discord server:
discord.com/invite/gJFcF5XVn9
I'll choose my favorites and showcase them in a future video.

Draw for me :-) I will use your data in the future:
Call for help video: youtu.be/Yw2QZ1vq2ek
Data collection tool: radufromfinland.com/projects/ml

💻 Code
github.com/gniziemazity/ml-course
✔️ Use P1 to follow along
✔️ P2 is the code after this lesson

⭐️TIMESTAMPS⭐️
00:00 Introduction
01:26 Processing data with NodeJS
10:04 Drawing PNG images with NodeJS
15:26 Backwards compatibility with the Drawing App
20:05 Data Viewer Web App
30:49 Styling the page