How to Build an Interactive Scrollytelling Scatterplot

[00:00 - 00:08] Hey everyone, welcome back to the course and to your fourth and final module. In this module we're going to be building something pretty exciting, which is a scroll-y-telling article.

[00:09 - 00:29] So those of you that come from data visualization are probably pretty familiar with scroll-y-telling as it's a technique that's often employed in newsrooms and data visualization studios. But for those of you that aren't familiar, scroll-y-telling is basically the technique of leveraging the primary behavior on the web that is scrolling on a web page to progressively reveal more information.

[00:30 - 00:47] This could be, you know, revealing more and more information on new steps or literally linking the user's scroll position to some information that is revealed on a continuous scale as well. So you've probably seen examples. If you haven't, I've linked a couple of examples in the course notes.

[00:48 - 01:12] But we can go ahead and take a look at what we're going to be building in particular, which you may notice is this familiar scatterplot because it comes from our very first module that we build together. You'll recall that this scatterplot basically took a series of, you know, fake student data and visualized the hours they studied for a certain final exam and they're great on that final exam, on the x, y axis in a scatterplot.

[01:13 - 01:33] And what we've designed together in this module, what we'll be building, is this scatterplot that progressively builds upon itself using scrolling telling techniques. So notice that the final output is the same scatterplot that we've already designed, but the way that we get there leverages the user's scroll to basically tell a story step by step.

[01:34 - 01:48] So that's what we have to look forward to. And what you're going to notice is that, you know, this leverages a few tools from Svelte, almost no tools from D3, and a lot of tools in CSS. Because yet again, to just remind you, you know, we're just learning the tools of the web.

[01:49 - 02:01] We're not just learning Svelte, not just learning D3, we are learning all of the tools of the web in combination. So with that in mind, we can go ahead and start getting set up with our code base for this module.

[02:02 - 02:10] And this is going to be a little bit unique compared to previous setups. You will recall that in previous modules, we would basically clone my existing template.

[02:11 - 02:40] But since we already have our module one scatterplot finished, what I would recommend doing is actually just, you know, cloning that either from a Git repository, if you have it, or locally with your finder. So what I'll do is go ahead and clone module one into its own repository and start working from there. So I'm going to go into my terminal, which you'll recall we've been working in so far. Currently, I'm in the globe folder that we created from last lesson, as you can see here.

[02:41 - 02:55] So if I wanted to go back one directory to all of my Svelte data visualization projects, I would cd dot dot, which would then take me into Svelte course. Now from here on Mac, if I wanted to open this in Finder, I would write open space period.

[02:56 - 03:05] And this period basically says the current directory. So now you'll notice that I open this directory in my Finder, and I have the modules that we've worked on so far, right?

[03:06 - 03:17] Our starter template, my first felt app, module one, simple scatterplot, module two, B swarm, module three, globe. So for this, what I'm going to do is just copy simple scatterplot and paste it.

[03:18 - 03:27] I could do this on the terminal, but I wanted to visually show kind of what I'm actually carrying out here. And you'll notice that after about 10 seconds, it will in fact copy.

[03:28 - 03:40] And now I'm going to rename this to scrolly telling. So just to verify, scrolly telling will have basically the same files that, you know, simple scatterplot did because it is an exact copy of that.

[03:41 - 03:54] If I were to copy over a project with an existing like git repository, if you did initialize using git, you might know about kind of what the git folder is and everything else. So this copy and paste method might need some attention.

[03:55 - 04:01] But assuming you're just working locally, this is going to do the deed for us. This is all we need to do.

[04:02 - 04:09] So from here, we can go back into our terminal, we're in felt course. And just to remind ourselves, scrolly telling does exist as a directory that we can navigate into.

[04:10 - 04:18] So let's go ahead and do that. We'll navigate into scrolly telling, and we'll go ahead and write code period to open this up in our visual studio code.

[04:19 - 04:26] And then you can open your integrated terminal just like last time. I'm hitting control tilde, but you can also click terminal new terminal.

[04:27 - 04:38] And then from here, let's install relevant dependencies. And once that finishes, we can verify that our project is up and running by typing npm run dev and opening the local develop.

[04:39 - 04:48] Now you'll see our scatterplot all the way from last to the past to module one. And this is exactly the starting point we need to go ahead and get started with our scrolly telling module.

[04:49 - 04:54] So I'm really excited to dive into the code to build this article together with you all. And I'll see you in the next lesson.