Build a Chart using JavaScript (No Libraries)

In this tutorial I teach you how to implement a chart using JavaScript and HTML Canvas. Our javascript chart app will allow to drag and zoom the data with the mouse and style the points using transparency, colors, emojis and I’ll even teach you some image processing techniques to recolor the emojis. This custom chart supports hovering over and selecting items as well.

We implement the chart using vanilla JavaScript (without using libraries). But we will use some math, especially interpolation quite a lot. If you understand what I do, great! Otherwise, maybe watch my math-related videos first:

Interpolation:

Linear Algebra:

Trigonometry:

A good chart component is a useful tool and customizing it can be very important depending on the task at hand. We use this chart in the Machine Learning Course where we plot our feature values but later we'll customize it to do other things as well:

Today's video also teaches how to generate fake data.

💻 Code

⭐️TIMESTAMPS⭐️
00:00 Intro
00:01:36 Generating Fake Data
00:19:35 Creating the Chart class
00:25:28 Extracting data and pixel bounds
00:29:50 Drawing the data
00:37:20 Drawing the axes
00:52:59 Mouse interaction
01:06:32 Zooming the data
01:16:56 Styling the points
01:27:51 Recoloring the emojis
01:38:30 Emphasizing points on hover
01:45:30 Selecting points on click
01:48:05 Connecting the chart with the list
01:54:25 Fine tuning
01:56:32 Debugging and fixing issues
02:04:32 Outro and Homework

[diegocassinera]

Your students are lucky to have a good professor that makes complex ideas simple.

[codewithchikwa]

Thank you so much for your hardwork Radu. I am learning a whole lot. If Karelia had MSc in Software Engineering I would enrol ASAP.

[jeuxmathinfo]

Very useful !!! 👍👍👍. I work in Medical Research, with Python... but I love JavaScript without libraries 🙂.
Thank you so much !!! 🙏🏅🏆

[Radu]

Please like the video if you learned something today and let me know what you think? :-)

[robertosotoalvarez]

I learned a lot on this video. Raju not only showed us how to draw a graph, but he did teach us a lot of Javascript and document tricks of the trade. Thanks a lot Radu!

[dobrerazvan]

Thank you for all the great videos, a little token of appreciation

[tudormihaigirbovan]

Very nice intro Radu. I think Rock Lee is proud of your training. 😁

[pesterenan]

That was really impressive! You make magic with JavaScript hahah! :D

[MrCakot]

Really nice! Found a little optimalization for the scaling. Rather than clamping the scale, apply the scale direction on number one (so it will never be negative number) and then multiply the scale with this number. Like this: const scale = 1 + dir * 0.2;
dataTrans.scale *= scale;

[weixintoo]

Hi Radu, thank you for your hard work making this tutorial for us. And I just discovered your channel and find that your channel has a lot interesting projects. As a javascript beginner, it is a bit scary to start a project myself. I believe the scary part is because of some difficulties I may be facing. Can you please share how did you start approaching a project from scratch and how did you overcome the difficulties when you encounters unknown problems/ difficult parts that is beyond your knowledge, and maybe what have you done in the past to practice your coding? Hopefully you can reply me when you are free=) Thank you!

[wesamissawi]

Great tutorial. I was following the No black Box Machine Learning tutorial when you used your own files for to make charts.. Naturally, I had to watch this too - to keep the No Black Box claim pure.. Now, after a 2hr YouTube video which took me a week to watch - not sure.... Off to video 4. Great job again. Thanks.

[letsstudytogether-wq]

Thank you! You rock! I understood almost everything 😁 But I can't repeat🤣

[tjnaz]

Just what I needed to stay up all night :) coding with Radu, coding with Radu. Man that's very catchy

[cristianaugusto]

amazing this course inside the ML course hehehee Happy New Year!

[vijayserpentj]

hi, i asked u to make chart tutorial some months ago, u told me u will do that, thanks for doing it

[hericklenin]

Muy buen canal. Me suscribí al instante. Gracias.

[robertosotoalvarez]

Where did you get those images and how to insert them into the Javascript text code? I searched in vain.

[zohaibqurban]

this series will be continue in future

[rajaryan]

please make a video on complete collision between static and dynamic rectangles/objects for making plateformer like games. i am requesting you to please make a video on that

[imrekiss]

Can anybody explain me this code line: const {samples}=this; ?