How to Build a Dynamic, Physics-Based Beeswarm Plot

[00:00 - 00:19] Hey everyone, in this lesson we're going to be building a brand new chart that 's not a scatter plot, it's a little bit more complex, and it's called a B-swarm chart . So this is what it looks like, and as you can see it does have a lot of circles like our scatter plot, but the key difference is that these circles are arranged according to physics, right?

[00:20 - 00:38] And on top of that there's a bit of additional interaction this chart offers over the previous chart where clicking then sorts these countries by continent. So as you can see per the title, this B-swarm plot is essentially visualizing every country in the world according to its happiness score.

[00:39 - 00:52] And you can read more about the data, it's from the 2022 World Happiness Report , if you're interested in that. But what's important here is basically three things that are unique about this B-swarm chart compared to the scatter plot.

[00:53 - 01:01] The first is that these circles are arranged by physics. If I were to refresh this page, these circles would not be present in the exact same positions that they're present right now, right?

[01:02 - 01:11] You would actually see a bit of randomness applied every time that this layout is generated. That's because we're using D3 force behind the scenes, which we'll get into.

[01:12 - 01:22] Second is this click interaction. This click interaction is pretty cool and it definitely was not present in the scatter plot, and it's only powered yet again by this physics-based D3 force module.

[01:23 - 01:30] This is another thing that's unique. And third, these tooltips you'll notice are a bit more dynamic than our scatter plots tooltips.

[01:31 - 01:42] And this might be more CSS-than-spelt, but I really like to bring some like whimsy and design to the visualizations that we produce in this course. And I think these tooltips are a good example of that.

[01:43 - 01:55] So in this lesson or in this module, we're going to be building this from scratch. It has all the same principles as last time, like responsiveness, if you were to resize, interactivity, and peripheral elements.

[01:56 - 02:03] So let's go ahead and begin to build it. Let's scaffold this project using the same setup that we've done for module one .

[02:04 - 02:12] So what we're going to do is scaffold our project template once again. And you'll remember that the way that you want to do this is by opening your terminal application.

[02:13 - 02:19] So here I have my terminal up. And what you're going to want to do from here is find your spelt directory, right?

[02:20 - 02:36] If you're visiting this immediately after working on simple scatter plot, our last project, you might already be in simple scatter plot, in which case all you need to do is write cd.period. And that will, or dot dot slash, that will take you back one directory.

[02:37 - 02:43] So you're back in your parent directory, right? For me, I need to find where that directory lives within my computer.

[02:44 - 02:58] So I'm going to use a series of ls commands and cd commands to basically cd into my desktop and then cd into my spelt course. And then from here, you can see I have my first spelt app and simple scatter plot.

[02:59 - 03:14] So what I'm going to do is create a new directory. Now that I'm in spelt course, right, that is the parent directory where I want this new project to live, I'm going to run this command once again, npx, dig it, and then the long name.

[03:15 - 03:34] What we'll see here is that if it did in fact succeed, it will say cloned my template to this new directory called B swarm. And we can confirm that exists by typing ls, in which case now we see my first felt app, simple scatter plot, and B swarm, this being the new directory that we just created.

[03:35 - 03:42] So let's go ahead and cd into B swarm. And if you're on Mac, I would advise go ahead and open that project using code period.

[03:43 - 03:51] If you're on windows, you might have a different way of opening it. You might find that folder, right click open, or you might open VS code first and then find the project.

[03:52 - 03:59] But here I have the B swarm project now open. I can go ahead and run an NPM install to basically install the necessary dependencies.

[04:00 - 04:10] Remember, we've done all this with simple scatter plot just going over it once again. And now if I run NPM run dev, we see this project is in fact up and running.

[04:11 - 04:17] So now that we have the project scaffolded, remember we're in a brand new directory. So simple scatter plot still exists on its own.

[04:18 - 04:23] Now we can go ahead and get started building our new B swarm chart. We'll get started in the next lesson and I'll see you there.

[04:24 - 04:43] [ Silence ]