D3 + Javascript Frameworks

We'll talk about the best way to incorporate d3 when using a javascript framework like React, Svelte, or Angular.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.

Lesson Transcript

  • [00:00 - 00:09] Okay, so this lesson we're going to cover something that I know a lot of you have been waiting for. We're going to talk about how to combine D-3.js and JavaScript frameworks.

  • [00:10 - 00:29] So the web has gotten really complicated, so we've created these frameworks to help us handle these more complicated applications on the web, and to make our development experience a little bit nicer. And these JavaScript frameworks include things like React.js, Angular.js, Felt.

  • [00:30 - 00:48] js, Few.js. Those are some of the bigger ones. So it can be a little bit tricky to combine D-3 and one of these frameworks, and that is because they both want to control the DOM or the structure of the web page.

  • [00:49 - 01:19] So we're going to go through one example that is D-3 and React.js, but these principles really apply to all of these frameworks, and we're going to briefly go over at the end how you might be able to extend these principles to two specific frameworks. We're going to go over Angular and Felt with a full code base for both of those , and hopefully whatever framework you're using, maybe you're in the future, and there's a new one.

  • [01:20 - 01:26] Wouldn't be surprised. So hopefully you can extend these principles to work with whatever framework you're working with.

  • [01:27 - 01:44] And also, once you start thinking about D-3.js as a utility library that you can kind of combine with any framework, you'll be able to think of some more unorthodox ways to use it. So I actually recently used it on this date picker over here.

  • [01:45 - 01:53] It doesn't look like a chart, but there's a few things I used from D-3 here. There's D-3 date.

  • [01:54 - 01:58] Help me create the weeks for each month. You can cycle through the month.

  • [01:59 - 02:16] You can, from each of these presets, you can figure out the beginning and the end of the week using timeweek.floor time with dot ceiling. Converting these inputs into specific dates, you could say like next Tuesday or next Wednesday.

  • [02:17 - 02:26] We have a color scale going on here which shows the traffic for each of these days. So being able to create that heat map, I'm using D-3.

  • [02:27 - 02:42] And there are a few other ways, but it really comes in handy, not just for creating visualizations, but for really any time you have data or data manipulation that you need to do within more complicated applications. So I'm really excited about this.

  • [02:43 - 02:47] Hopefully you enjoy this module as much as I do, and let's dig in.

  • [00:00 - 00:09] Okay, so this lesson we're going to cover something that I know a lot of you have been waiting for. We're going to talk about how to combine D-3.js and JavaScript frameworks.

    [00:10 - 00:29] So the web has gotten really complicated, so we've created these frameworks to help us handle these more complicated applications on the web, and to make our development experience a little bit nicer. And these JavaScript frameworks include things like React.js, Angular.js, Felt.

    [00:30 - 00:48] js, Few.js. Those are some of the bigger ones. So it can be a little bit tricky to combine D-3 and one of these frameworks, and that is because they both want to control the DOM or the structure of the web page.

    [00:49 - 01:19] So we're going to go through one example that is D-3 and React.js, but these principles really apply to all of these frameworks, and we're going to briefly go over at the end how you might be able to extend these principles to two specific frameworks. We're going to go over Angular and Felt with a full code base for both of those , and hopefully whatever framework you're using, maybe you're in the future, and there's a new one.

    [01:20 - 01:26] Wouldn't be surprised. So hopefully you can extend these principles to work with whatever framework you're working with.

    [01:27 - 01:44] And also, once you start thinking about D-3.js as a utility library that you can kind of combine with any framework, you'll be able to think of some more unorthodox ways to use it. So I actually recently used it on this date picker over here.

    [01:45 - 01:53] It doesn't look like a chart, but there's a few things I used from D-3 here. There's D-3 date.

    [01:54 - 01:58] Help me create the weeks for each month. You can cycle through the month.

    [01:59 - 02:16] You can, from each of these presets, you can figure out the beginning and the end of the week using timeweek.floor time with dot ceiling. Converting these inputs into specific dates, you could say like next Tuesday or next Wednesday.

    [02:17 - 02:26] We have a color scale going on here which shows the traffic for each of these days. So being able to create that heat map, I'm using D-3.

    [02:27 - 02:42] And there are a few other ways, but it really comes in handy, not just for creating visualizations, but for really any time you have data or data manipulation that you need to do within more complicated applications. So I'm really excited about this.

    [02:43 - 02:47] Hopefully you enjoy this module as much as I do, and let's dig in.