Using d3 with Svelte.js

[00:00 - 00:13] So I went to go over one last framework because Felt is a framework that I've been using more and more. I think it's a really great JavaScript framework, especially for people who are newer to JavaScript frameworks.

[00:14 - 00:32] And that's because a lot of the code just looks like basic JavaScript, HTML, and CSS. And it also leans into something called reactive coding. So you can divine variables with a dollar sign instead of constarlet or bar.

[00:33 - 00:47] And it will update that variable whenever any of the dependencies change. So it'll update this dimensions object whenever with their height or margins updates, which is really nice when you're trying to keep things in sync.

[00:48 - 01:00] Just throughout your application. So whatever would recommend if you're interested in creating Felt apps, if you're unfamiliar with Felt, go to spelt. dev.

[01:01 - 01:32] And they have a really good tutorial. So just walk through it. Maybe try out some things on your own. And then once you're more familiar with Felt, go through the previous lessons in this module that go through all of the steps with the timeline in the React code base and trying to get bogged down with the React syntax, but kind of learn the general layout and how the puzzle pieces fit together because it's largely going to apply to the Felt code base as well.

[01:33 - 02:04] And then once you walk through the timeline in this Felt code base, go ahead and uncomment these completed versions of these Felt components and maybe walk through, see what you did differently than this code base. Maybe what you did is better. Maybe what I did is better. Just figure out the pros and cons from the different ways to write this code and maybe try to do the scatter plot.

[02:05 - 02:24] Maybe try to do the histogram, whatever you need to do to understand how these pieces fit together. So to walk through it really quickly, we have this app.spelt component. Looks a lot like the React app component where every four seconds we're grabbing new data.

[02:25 - 02:43] And then we have a timeline, a scatter plot and a histogram. And then just to go through the timeline really quickly. So for the timeline, we're pulling in these individual components, grabbing a unique ID for that gradient.

[02:44 - 03:02] Defining our props. So these are things that are passed to timeline for whenever it's instantiated, in this case in F. And we have width and height. And this is because in Felt you can bind to the width and the height of any element, any div.

[03:03 - 03:19] And what Felt does is it makes an iframe and then whenever the iframe is res ized, it'll update the variable names. So our width and height variables will always be in sync with the size of this outer div.

[03:20 - 03:40] We have margins, we're combining this in a reactive statement, so our dimensions will always stay up to date, even when the width changes. Like so. And then we have reactive statements for X scale, Y scale, our scaled accessor functions.

[03:41 - 03:54] We go ahead and use our chart component. We add the gradient, X axis, Y axis. And then we draw an area with a gradient and then a line with no gradient.

[03:55 - 04:17] And then within this chart folder, we have our line looks very similar. We're saying we're creating this line generator updating it if this is an area. This syntax is kind of just helpful in Felt. It'll create a block and then update anything in that block of one of the variables changes.

[04:18 - 04:43] And then computing that line and throwing it in here. We also added this style so that we can pass in something like the fill, a specific fill for this line. We also have a chart component. And this is a little bit of a hack. I've obtained a great way to do this in Felt.

[04:44 - 05:08] But I want to try out using context. So the way Felt context works is it expects the contents to not change. So we're passing in a writeable. So we have this current dimensions object. And then whenever we're using this context say in axis.

[05:09 - 05:32] We are grabbing that dimensions, writeable, and then just you can do dollar sign and a variable name. If it's a writeable to grab the value and keep that updated. So kind of a workaround for now. So in our access, we're grabbing however many texts we want.

[05:33 - 05:50] And we have this all in one component. It's a little bit hard to do multiple components in the same file for Felt. So this just felt right for me. If you're going to go ahead and make your own access component, feel free to use the same one.

[05:51 - 06:03] Or maybe you have a separate access horizontal and access vertical component. It's totally up to you. Whatever feels right for your Felt app.

[06:04 - 06:32] So we have a dynamic styles depending on if it's an X or Y dimension axis. And then we have our gradient. We have our circles. Yeah, so just. And we also have that naive way of doing that axis. So we're binding the ref variable to this G element.

[06:33 - 06:49] And then if that exists, we're selecting that node using D3 Select, creating a D3 selection object and calling our access generator. So very, very similar to the react app. So feel free to poke around.

[06:50 - 07:04] And hopefully this just gives a good template for. I learned D3. I learned S felt. How do I put them together? And as usual, my answer is.

[07:05 - 07:29] Let S felt handle as much as possible and use D3 for all the things it's really good at. Except for the DOM manipulation. So colors and manipulating data grabbing data. All of these things that are really useful. But then letting S felt handle the drawing to the DOM is just a really nice workflow.