d3.js Introduction Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

17:07:50 Hi! Everybody! Welcome back. We continue to learn about Web browser-based visualization by talking about D.
17:07:58 3 Js. Introducing what it is. So d. 3 dot. J.
17:08:02 S. The D 3 stands for data, driven documents.
17:08:05 This is a Javascript library that allows you to manipulate HTML documents with data.
17:08:11 So as an example, you could use d. 3 js. To take in a data set and then populate a table with relevant statistics.
17:08:17 You can create plots by adding elements to an Svg.
17:08:22 Based upon the arguments from some data set. If you're interested, you can check out the D 3 Jas website here, as well as the documentation for the version of the D.
17:08:33 3 Js will be using. So, as I said, we have a version we'll be using, which is 7.8 point 2.
17:08:39 That's the version that these notes were written, for, however much of what we'll be talking about holds for, at least from version 5 onwards, some of it may be specific to later versions, or things may have been edited out in later versions, as they update the software if you come into an error, where you're
17:08:59 running something, and it doesn't look like it's working anymore.
17:09:02 I encourage you to just check one. Just make sure you don't have any tiny bugs that you're missing, and to type in whatever version you're using along with the error that you're using.
17:09:11 So if you want to have a version, installed on your laptop, you can go to this document.
17:09:19 You can go to this link and follow the download instructions from there note that if you're accessing these notes at a much later date, it the version may no longer be 7.8 point 2.
17:09:30 You'll have to do a web search if you want that particular version.
17:09:33 However, I will say this is optional. You do not need to download d.
17:09:38 3 J. S. In order to get them. We're going to be linking to the online version of the library. In these notes.
17:09:46 So as long as that version still exists at the web address that we've provided in the notes, your code will still work and run. D.
17:09:53 3 js, just fine from version 7.8 point 2.
17:09:58 So to think of some motivating examples. I've provided some links here.
17:10:02 So, for instance, this is A. D. 3 Js. Gallery.
17:10:07 You can see all the cool things that you can do, so maybe I let's see which one do.
17:10:17 We want to use. Let's just go with this one stacked grouped bars.
17:10:21 Okay. So you can see, this was created. And all these little transitions that are happening are.
17:10:26 It was all made with D. 3 dot, J. S.
17:10:31 Okay, so that's one example. Another example is just the gallery at observable.
17:10:39 This was a website created by the guy who wrote the initial package, and I think still maintains it.
17:10:47 So you can see all these examples streaming at the bottom.
17:10:50 These are different. D, 3 dot, Js, graphics that have been made.
17:10:57 So here's an example that we can check out. So, looking at different changes, within men's tennis over the years.
17:11:05 Okay. This was made with D, 3 dot. J. S. As some personal inspiration.
17:11:10 This was my first data blog post made with D 3 dot, J.
17:11:15 S. Where I looked at some stuff of basketball.
17:11:20 So, for instance, I can. We made this. I made this nice interactive for these basketball teams.
17:11:25 You can find the existing team, and if you want to, you can check out the blog posts to learn more about it.
17:11:34 But all of this was made with D. 3 dot Js.
17:11:37 Including this nice animation, so we'll learn the tools that you would need to make this post.
17:11:43 Not exactly how to make all of it in-depth, but we'll learn the tools that you could then put together to make the post yourself, and then finally return to this 5 38.
17:11:53 Exactly that I like. This was made with probably using D 3 dot js, but it could certainly be made with D 3 dot.
17:12:01 Js, so all this interaction and all these interactives can be made with D, 3D.
17:12:04 Js, okay, so now we're motivated to learn more about d 3 dot.
17:12:11 J. S. And that's it for this introduction. So hopefully, you're really excited to learn more about D, 3 js, and you watch the rest of our d 3 dot.