Machine Learning Course - Lesson 2: Visualizing Data with JavaScript

preview_player
Показать описание

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

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:
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:
I'll choose my favorites and showcase them in a future video.

Draw for me :-) I will use your data in the future:

💻 Code
✔️ 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
Рекомендации по теме
Комментарии
Автор

Here's an extra challenge! Can you spot your drawings as I'm going through them? :-D

Radu
Автор

This channel is hidden Gold mine, and Radu sir is the Genie inside it.

Anutosh
Автор

Hello Radu, I'll watch this later, but came to give you a like (it surely deserves it) 🙂

MrJackferson
Автор

I'm still watching the video but this is SO INTERESTING!!! The way you made that progress indicator, is so cool! Also, all the file manipulation is really awesome to learn! You are making an awesome job Radu! I'm so happy to be a sub of your channel :D

pesterenan
Автор

Lol 😂 showing Master Roshi's house for my username.
Although I have no idea what you said in Japanese(maybe)😅

Thanks again for this incredible course!

Android-
Автор

42:29 I like the creative idea of the anonymes artist to give each label a special touch. 😅

VR_Wizard
Автор

I thought I had made a spectacular car and house until I saw what the others did :-) I love the dataset the community created! Another great chapter of this course!!!

___dp
Автор

Yaaaay my drawings appeared on the video! Hahahah at 39:12, unfortunately I clicked prematurely on end, so my clock ended up just being a circle! xD

pesterenan
Автор

btw to see the node version just do "node -v"

ninjacodertech
Автор

Love your lessons ! They are the best!😁

vlad_the_player
Автор

A point about the node testing, yes you can do it in the terminal outside visual studio, however this will not test if it works inside studio. The terminal opened by studio has the same environment settings as dev studio.

diegocassinera
Автор

Help i really dont know what to do. the image files generate, but they all come back blank. I'm using vscode on an M1 mac node version 20.9.0

TomasOBrien
Автор

39:00 Some of these are really funny, I paused to see what people were drawing. You should have made a special video just on that haha. Awards for the best house or fish :D :D How about an application that only gives you 5 seconds to draw something and when the algorithm actually recognises what it is you get a point.

Frankslaboratory
Автор

14:55 it creates a buffer with black color, it does not take ctx data into it... all of the images are black... anyone has a hint here?

Artavazd.kirakosyan
Автор

Hi radu and friends this might be an inconvenience since I don't have a discord, I've been trying to fix this error for days on the chapter 2 lesson on utils.js file in common folder done the tutorial correct but on line 8(on utils.js and line 32 on dataset_generator.js) it writes referenceError process is not defined

bobthebuilder
Автор

i recommend to use es module syntax (import/export) since it is compatible for both node and browser

rumahmilky
Автор

Hi Radu,
please mention the link in description where user can draw this will encourage people like me to draw again in different way so that we can help in data quantity.

basiccoder
Автор

Where i have to style the page
Github?

MadaraAzukar
Автор

Sir please suggest me a project i can do as a major

nikkg
Автор

I am not capable of designing but I believe I made it a bit more efficient hopefully

noahibrahim