Using JavaScript in bokeh Video Lecture Transcript
This transcript was automatically generated by Zoom, so there may be discrepancies between the video and the text.

17:09:47 Hi! Everybody! Welcome back in this notebook. We're gonna learn how you can add even more interactivity into your plots with Javascript.
17:09:56 Now, I want to point out that I don't expect any of you to know Javascript prior to seeing this video, we will learn a little bit of Javascript in a later section of the Mini-course.
17:10:08 So for basically what this video is about is demonstrating more of a demonstration.
17:10:12 And if you know Javascript, that's great.
17:10:16 If you don't know Javascript, you can see what you can do in Boca when you learn a little bit of Javascript, more of a demonstration of the capabilities of Boca, so you may want to come back to this after we learn a slight amount of
17:10:26 Javascript in a later section. Maybe you're just okay, not using bulk ever again.
17:10:32 So sort of just trying to give an approach that maybe will appeal to everybody those that know Javascript in those that do not so we're going to basically show how we can use Javascript to add some more interactivity so in the last notebook.
17:10:44 We saw how to use the regular book of commands to add hovering effects and clicking effects or selection effects.
17:10:52 And really, if we want to get more complicated with interactivity, and Boca, it's going to require us to know a little bit of Javascript and write a little bit of our own Javascript code.
17:11:02 So basically what we're gonna do is show you how you can use that Javascript code in Boca to add the interaction.
17:11:11 So when it comes to adding interactions, though one thing that's useful is to have a widget.
17:11:17 So a widget is basically a structure in your in your program or in your figure.
17:11:25 That allows you to receive input from your audience. That will then change the output.
17:11:30 So one simple example of a Widget is a button, so Boca has the button functionality.
17:11:37 So we do from Boca dot interaction import button let's go ahead and check the documentation just to be 100% sure dot models. Sorry about that.
17:11:55 Not interaction. Just dot models. So now we can call a button.
17:12:00 So we do button, and if we add a label, this label be something like useless button, because it's not going to do anything, and then, just like with your figures, you just call show button, and so now you can see we can click on this, button and it.
17:12:16 It has the feel of actually clicking on a real button on a website.
17:12:20 But it does nothing. As another example, we can add a series of checkboxes, so we can do from Boca Dot.
17:12:29 Models import checkbox group, and then we can define a checkbox group
17:12:41 And to do this, we also provide. The label equals this time.
17:12:46 It's a list of options should probably import the checkbox group and maybe labels equals the different options.
17:12:55 And now just like with the button, we can interact with this and select option.
17:13:00 1, 2, or 3, or all of them are just 2 of them, or none of them.
17:13:05 But once again nothing happens, and then finally the final example of a widget will see as a slider, and so from Boca dot models impulse slider.
17:13:19 And so here I create a slider with a pointless value.
17:13:22 Why is it pointless? Because, no matter what that, what the value is, I can I?
17:13:28 Nothing happens, I interact with it. So for a list of the All, the Slider, or how the sliders, all the widgets, you might be interested in, check out the widgets documentation page, and they sort of give you examples of all the various widgets you might want to add
17:13:44 Okay. And then they also show example code of how to actually add them.
17:13:49 So what are these widgets good for? How do they get used?
17:13:53 Well, the widgets are good for receiving input from a user and then using that input to all to your graph.
17:14:00 So, for instance, maybe these options tell the Boca figure whether or not to plot a certain line, so maybe this would be the line for study group A, the line for study group B in the line for study group C, and by clicking on them.
17:14:16 Or clicking them off, you can control what gets plotted, or maybe with this Slider, the user puts in like a value into the Slider, and then that somehow gets used to determine something in your plot and so how does that work well, typically people need to write Javascript code if you're
17:14:34 Using Boca people would write Javascript code that will take in the value, update the plot and then plot it.
17:14:44 So, how does that work? Well, you need to have a custom.
17:14:46 Js class. And so first, let's go ahead and import that.
17:14:51 So from Boca dot models, we're going to import custom.
17:14:58 Js. And so what custom Js is is a class that takes in as an argument custom. Javascript code, written as a python string, and then uses that code takes in that string turns it into the Javascript code.
17:15:13 You've written in the background of, you know the running background of your computer, and then does what you told it to do with that code.
17:15:22 At the same time, in order to make this example, plot work, we're also going to import the column from layouts and all this argument's going to do is allow us to put both a widget and a figure in the same graph.
17:15:35 So from Boca dot layouts we're gonna import column.
17:15:42 Okay. And so here is an example. I'm not gonna code this up live because it would take a while.
17:15:48 But what I'm gonna do is have the line y equals X, and we're going to add a slider that's going to take in an exponent for X.
17:16:00 So the thing that we're actually going to be plotting is the line Y equals X to whatever power the Slider is and so it's going to start off as y equals X because the starting value of the Slider is going to be one but then the user can go in and change whatever value they want
17:16:16 From all the way up to 100 and steps of one.
17:16:20 So when I do this, I first plot my regular line, using the data that I've created.
17:16:25 But now I add my slider, and then, in this custom, Js code, this custom, Js.
17:16:32 We put in our ars, which sets the source for the Slider.
17:16:35 Okay, so this is the source of the data. This is the actual slider.
17:16:41 And then this code will say, Take in, take in the value from the selection for the Slider store.
17:16:49 It in a variable called power, taken the X from the data.
17:16:54 And now for the new! Why go ahead and do the transmission X.
17:16:59 To the power of whatever the argument was. And now your source data is going to be this new X and Y, and then that will get plotted.
17:17:06 So when I call Slider Js on change, this is saying that run this Javascript on any chain from the Slider, using the custom Js function I've provided above.
17:17:18 Now I promised I would tell you about this column, so Column allows you to put in sort of 2 display objects from Boca.
17:17:26 So first, you're going to put in Slider. Then we put in the figure, and so when we call show for that, it will link the 2 and display them in the same sort of plot.
17:17:36 And so now we can see, as I change my power, or you change it.
17:17:42 We can see how the plot changes in response. Okay.
17:17:50 So once again I just like, I said before, I don't expect any of you watching to know Javascript before we cover a little bit of it in our section on Web Browser.
17:18:00 Interact web browser visualizations. But if you do know Javascript, this is a way to make way more interactive plots by adding widgets and then writing some custom.
17:18:11 Javascript code that allows the user to interact with the widget and then have it impact the plot.
17:18:17 If you don't know. Don't worry. You can always come back and check it out after you learn some Javascript, and if you do know now, you know alright, so I hope you enjoyed seeing this little demonstration, and encourage you to maybe go learn.
17:18:30 Some Javascript. I hope to see in the next video.