How to Create Your First Svelte Scatterplot

[00:00 - 00:15] Hey y'all, so let's talk about what we'll be building for our first module, our first chart, which is going to be a simple scatter plot. We're going to be building a scatter plot that looks like this, which looks simple, but it includes multiple features that are crucial to data visualization.

[00:16 - 00:27] The chart is fully responsive, so if I were on a smaller screen, as you can see here, the chart would resize and update accordingly if my browser would cooperate. And as you can see now, it's responsive.

[00:28 - 00:43] It also features hover interactions, so as I hover over certain circles, you see the tooltip updates and shows that circle is being hovered. It has meaningful peripheral elements like this final grade label, this entire axis, our study, etc.

[00:44 - 01:01] So we're going to be building this chart step by step, beginning with the broad strokes, like just painting circles, and then learning about more advanced features, like responsiveness and hover interactions, each in their own lesson. So to get set up, we're going to scaffold our project template once again, and we're going to do this in our terminal.

[01:02 - 01:11] So if you were at the last module, you were called that we created a file or a folder called my first felt app. So what I want you to do is find your terminal.

[01:12 - 01:21] So my terminal will look like this, and you're probably in my first felt app right now. This is probably where you are currently located in your terminal.

[01:22 - 01:34] And make sure that whenever you work in this new directory that we're creating, called simple scatter plot, you don't create it in my first felt app. Because remember that my first felt app is a felt directory, right?

[01:35 - 01:45] We want to go back one level and go back to our quote unquote, felt course directory. So what that means is we want to do CD space and then two dots hit enter.

[01:46 - 01:59] Now you'll notice I'm back in felt course, which we can verify by typing LS and the only thing that should be there right now is my first felt app. So to kind of visually represent this, right, this is felt course.

[02:00 - 02:15] We were previously in my first felt app, and then we went back one directory and we're back in felt course. Now let's go ahead and recreate copy this code again, where remember we are basically installing an existing template and calling it simple scatter plot.

[02:16 - 02:23] I'm going to copy this, go back into my terminal, paste and hit enter. And then once it finishes, you'll get that success message.

[02:24 - 02:28] Now remember we're still in felt course. So if I LS, we see simple scatter plot is there.

[02:29 - 02:39] We can CD into it by typing CD simple scatter plot. Go ahead and hit code space period, if your own Mac, to open up the visual studio code interface.

[02:40 - 02:51] And then you can open up a terminal if it's not already there by hitting up here terminal new terminal. And then once you have it up and running, you can write npm install.

[02:52 - 02:58] This will install all the dependencies and type npm run dev. If it worked, you should get this link that you can look at.

[02:59 - 03:05] As you can see, the chart does in fact, or the site does in fact exist. And we're ready to get started with module one.