How D3.js and Svelte Complement Each Other

[00:00 - 00:11] So if you've made it this far and you know what D3 is, you're probably asking what about D3. If you don't know what D3 is, don't worry about it, we'll review below and you'll be using it a little bit in this course.

[00:12 - 00:20] But it's not the key tool that you'll be using to architect your visualizations . So for those unfamiliar, what is D3?

[00:21 - 00:26] We can read more about D3 on its documentation. You can see how it works on a high level.

[00:27 - 00:44] But to summarize, it's a JavaScript library that makes it easy to integrate data directly into the document object model. It's a series of modules that basically simplify the process of retrieving data, transforming data, and then representing data in the DOM.

[00:45 - 01:05] So D3 makes it easy to take large bits of data, let's say 10,000 objects, and bind them to the DOM, linking it to HTML or SVG elements in our web page. So to illustrate how it works or why it's powerful, let's look at an example of vanilla JavaScript, no D3 at all, that sets those five circle elements that we looked at last lesson.

[01:06 - 01:25] So in vanilla JavaScript, we would create this array, we would then grab all of the circles using this code, this document.get elements by tag name. Then we write this imperative for loop that iterates through each index and then sets the circle of that index, and sets that attribute of CX equal to data I of 10.

[01:26 - 01:37] Pretty complex, pretty annoying. In D3, we would reduce this code by a factor of four, where we basically write this one liner that selects all circles, binds the data, and then sets the attribute together.

[01:38 - 01:52] So D3 makes it easy to interact with elements on a web page, by leveraging both its selection methods and its data binding. So it's been so popular for like 10 years, and it's been a de facto requirement for complex visualization roles in newsrooms.

[01:53 - 01:57] So why aren't we going to be just learning D3? First of all, a lot of D3 resources already exist.

[01:58 - 02:09] And if you want to learn vanilla D3, I would recommend Amelia Wattenberger's New Line course, her book, and her master class. But in the above example, we're using D3 syntax to do a lot.

[02:10 - 02:24] We're selecting elements, we're binding data, and we're updating attributes. And so what if there were a better way than writing these specific commands and having to know each of these methods by hand that eventually just produce SVG output?

[02:25 - 02:40] What if we had a tool that enabled us to bind our data to the elements directly in line? Rather than learning the select all syntax, the data syntax, and attribute, we just wrote the SVG tag, the circle tag, and the attributes within.

[02:41 - 02:42] And we do have that tool. It's called Svelte.

[02:43 - 02:51] Remember that this example from the last lesson is a Svelte scatter plot that produces the exact same output as this. So yes, it's technically longer.

[02:52 - 03:08] But what we see is this separation of concerns between our logic, which lives in the script tag, and our presentation, which lives in the markup. We also notice that our markup input looks awfully familiar and definitely resembles the SVG output we're going to be producing, right?

[03:09 - 03:17] We see that we're producing an SVG with five circles inside. Whereas here, you'd have to really understand D3's and the other two internals to know what's happening.

[03:18 - 03:28] So you don't have to understand what's happening here. But the key point is that in D3, there's a disconnect between what we write, which is our selection methods, and what is rendered, which is the SVG and its constituent elements.

[03:29 - 03:35] In Svelte, we're literally writing what we render. We're writing an SVG tag, and that is what is produced.

[03:36 - 03:49] And we include our data directly using tools like this, each block, and these inline data bindings thanks to these mustache curly braces. This makes for a better developer experience, better debugging, and a better mental model.

[03:50 - 04:09] So to summarize this split, traditional JavaScript, which was this first example up here, requires us to give instructions in our code, telling JavaScript what to do and where to insert data. Example two, which was D3, does actually the exact same thing, but with more concise code.

[04:10 - 04:24] But example three, the Svelte example, allows us to stop giving instructions at all and write our content directly with data embedded. But wait, there's more about D3, which is that we're going to be using D3 throughout the course.

[04:25 - 04:37] We're just not going to be using its complex selection methods and data binding, OK? Because a lot of people think of D3 as this all-encompassing, singular tool that they use for every aspect of their data visualization project.

[04:38 - 04:42] And they think that their entire project is going to be built using D3. But that's the wrong approach.

[04:43 - 04:59] See, D3 is a collection of modules that can be used in isolation, depending on what your project needs at any given time. This example down here, this packed circle scatter plot or swarm plot, kind of shows all of the different modules in D3.

[05:00 - 05:11] This is from Amelia Wadenberger. But what it's showing is that there are maybe 30 to 40 different modules that each have all of their own functions and methods within, and all sort of very different purposes.

[05:12 - 05:24] So some of these are going to be well suited for interacting with the DOM, like D3 selection, which is what we were using above. But some are really good for array manipulation, like D3 array, or scaling data, like D3 scale.

[05:25 - 05:33] So we're going to be using D3 selectively. We're going to select the modules that work well, that don't interact with the DOM, but instead do other things.

[05:34 - 05:44] And we're going to use those and let's felt handle the rest. So in combination, these two tools are going to be used to produce the most powerful and efficient data visualizations.

[05:45 - 05:53] And the way that I like to split this up is spelt for the DOM, D3 for the data. To be more descriptive, spelt is going to be used for DOM manipulation.

[05:54 - 06:08] And D3 is going to be used to construct scales, manipulate arrays, and when necessary, create relevant shapes. As you can see here, this is kind of like the split of their separations of concerns and what should take on what purpose.

[06:09 - 06:21] Matthias Stahl, who works at Der Speagull, a great spelt, and D3 expert, has put it this way. He said, you should use D3 for the maths and the paths, and you should use spelt for everything else.

[06:22 - 06:24] So that's a really good kind of split. Am I doing math that's complex?

[06:25 - 06:28] Am I generating SVG paths? If so, D3.

[06:29 - 06:32] Am I not framework? That's the perfect split.

[06:33 - 06:43] So, so in D3, in action would look something like this. Again, you don't need to understand exactly what's going on, but I think this is helpful to kind of see the split.

[06:44 - 06:59] Here we're writing spelt code in our script tag, and then we import scale linear from a D3 module called D3 scale and construct this scale right here. Then we use that scale in our markup to scale our data points to physical points on the canvas.

[07:00 - 07:03] So this is an example, right? We're not using D3 to select all the circles and render them.

[07:04 - 07:17] We're still using spelt, but within our individual attributes, like our CX, we're using X scale, which we imported from D3. So we're using spelt for the DOM, D3 for the data.

[07:18 - 07:26] In this example, it illustrates how you'll use spelt and D3 together throughout the course, leveraging each tool's best parts to create better data visualizations.