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

12:33:13 Them back in this video, we're going to talk about how you can use d, 3 js, in conjunction with buttons or other widgets.
12:33:21 So d threej dot js, Ks can be used to interact with most HTML elements, notably including interactive elements like a button, a selector, an input, area a checkbox, or really any other kind of Widget that you might think of so that's really it so let's
12:33:38 dive right into the code, and we can see an example.
12:33:43 So in this example, we're going to have a button up top.
12:33:48 And this div called Div. Button, and then our graph in the bottom, called Div. Svg.
12:33:53 So the first thing we do is we append the button.
12:33:58 So I select the relevant Div and then to append a button.
12:34:01 All you need to do is, do a penned, and then it's just called a button and so this button you want to give it like an Id or a class that we can select it later.
12:34:10 And then the text, just is the text that's displayed upon the button.
12:34:15 So now that we have that, and we have the charts, I then go back, and I'm going to select my button and all that's going to happen is when somebody clicks on the button.
12:34:25 It's going to change the color of the circle to green.
12:34:28 So that's all this Button is going to do, just to demonstrate what buttons can do.
12:34:33 So you provide an update to the button, a click update and then when that happens, it allows you to interact with the plot. So you could imagine how you could use this to make much more complicated.
12:34:45 So maybe you have a button that you click, and then an animation starts, and then it goes back to the beginning, and you could run the animation as many times as you'd like.
12:34:53 But for this simple example, just to show you what's possible, I wanted to show you how you can click a button and then make it do something on your charts.
12:35:00 Okay, so let's check it out so here we've got our scatter plot.
12:35:06 And here we've got our button, and once I click this, the points are going to turn green and now they're green, and they're always going to be green, because I didn't make it that they would go back so you could do this.
12:35:16 You could imagine adding another button that says, color points, whites, and then it tings it back to the beginning.
12:35:21 So this is useful again, as I said, for more complicated interactions or starting animations.
12:35:29 So as an example like we could go to Mto data.com.
12:35:36 One of my first blog posts. I use this sort of interaction. So I think let's see.
12:35:46 Here's an example. Where I looked at the payrolls for various Nba teams, and I had these selectors, and so I could choose a different season that I had data for.
12:35:57 So maybe I want 38 to 39.
12:36:00 And now you can see the different payrolls for the various players on the Portland trailblazers.
12:36:06 Or you could change the team to maybe a team that I like a little bit better the Cleveland Cavaliers although they were not very good.
12:36:15 In 2018 2019. But now you can see how these are.
12:36:19 These are not buttons they're called selectors, I believe, but they can be used.
12:36:25 They can be used as well. And this just has a simple update on it as well.
12:36:32 Okay. Alright. So that's gonna be it for this lecture.
12:36:37 Just kind of showing you what's possible with D, 3 dot js, and what you can use in conjunction with Reggae.
12:36:44 HTML elements to make more interactive plots for your audience.