Using d3 with Angular.js

[00:00 - 00:09] There are other JavaScript frameworks that are commonly used to create complex web applications. So we just went through one.

[00:10 - 00:21] We were talking about how to combine D3 with React. So this lesson has all of the code for a very similar app, but written in AngularJS.

[00:22 - 00:30] I think it's using version 8, which is the most recent version. So Angular is very widely used.

[00:31 - 00:49] And I wanted to include this chapter and the next chapter, which looks at spelt just to give an idea of how this kind of chart library could be created with React, with Angular, with spelt, with all these different frameworks. And the principles are largely the same.

[00:50 - 01:05] Hopefully this code also comes in handy for people who are more familiar with Angular applications and want to create charts in their own Angular applications. So if you look at the code, we'll just run through it really quickly.

[01:06 - 01:29] What I would recommend is watch this video and then go through the same steps we went through previously with React, but now with this Angular code base. So start with the timeline, go through filling that out, and then filling out the chart component and the line component, then the access component.

[01:30 - 01:46] And once you're done filling that out, go ahead and look at the completed versions and see maybe how you could have done it differently or think about why you did it differently from this code base. Maybe your way is better.

[01:47 - 02:00] That's totally possible. So I'll just walk through this code base really quickly, but afterwards, if you want to run through and try to get your hands dirty with the code, I think that would be a really great way to practice what we've learned.

[02:01 - 02:20] So we also have all the completed code. If you go into this app folder and look at this app.module.ts, you can see all of these different imports.

[02:21 - 02:34] So these top imports are just the normal components that aren't filled out. But if we comment those out and uncomment these lines below, these are grabbing components from this completed folder.

[02:35 - 02:45] And these are all the already filled out components. So that is when we'd update your Angular declarations to pull from these completed components.

[02:46 - 03:14] So if we look at our timeline component, our completed timeline component, the template looks very similar where we have a depth. We're adding this gradient, which is being pulled from chart.

[03:15 - 03:30] I don't know why I keep clicking on that chart and then gradient, this gradient component. And then we have our group element for X scale, group element for our Y scale, our line component.

[03:31 - 03:52] And we actually have two line components because we're doing that gradient fill underneath the line, which is an area. And then you can see we also have our styles and we have our TypeScript file with all of the logic where we're calculating the dimensions.

[03:53 - 04:02] We're listening for window resize and then updating those dimensions. And then we're updating our scales here.

[04:03 - 04:10] So we're creating our time scale, our linear scale for the Y axis. We're creating our scale successors.

[04:11 - 04:26] And we want this Y zero accessor for the bottom of this area, which is just going to be the bottom of the chart. Our chart component, again, is going to look very similar.

[04:27 - 04:51] It's not doing too much, especially for the Angular component where we're pretty much just drawing our wrapper under bounds. And then for our line component, we are creating this path template where we're creating this line string private variable.

[04:52 - 05:06] And then we have this update line string method where we call it when anything changes. So this is the same code we had before where we're using this line generator with the type.

[05:07 - 05:23] So it's either line or area, passing in accessors and then interpolation and switching it if we want to render an area instead of a line. And then converting that into a line string that we're passing to this path.

[05:24 - 05:48] And then our access components, last one I'm going to run through, the template , it looks pretty much like what we did with the React component. We have a group for if the dimension is an X dimension and a separate group that shows up if we're in the Y dimension.

[05:49 - 06:04] So for our X axis, we have a totally separate template code just to keep those things a little bit more organized. And we're drawing a line, we're mapping over each tick in the ticks array.

[06:05 - 06:14] And then we're transforming it and formatting our tick so that they show up in the right place. And we're also adding a label if label exists.

[06:15 - 06:42] So we can see in our TypeScript file, we can see that we're creating those ticks in this update ticks function. And then deciding do we want one per every 100 pixels, we want per every 250 pixels, we want one per every 70 pixels, like on the Y axis, and then we're creating those ticks and using them in the template.

[06:43 - 07:06] So hopefully you can see that the code is very similar, but also just the syntaxes are very different and the lifecycle events are going to look different. And in order to really understand this code, you're going to want to understand both Angular, so both the framework and D through really well.

[07:07 - 07:40] And since this course is devoted to learning D through really well, I would recommend just knowing your framework and then combining it in a way where you're rendering with your framework and you're just using D through to create the ticks, to create those scales, to turn data dimensions into physical dimensions and use all the goodies that come along with D three. But just also understanding your framework and how to render elements to the DOM.