 Yeah, so I'm Stephen Hill, and we're going to be talking about OK. This is my GitHub, our Twitter handle, the GitHub repo. Everybody should be set up just to read, right? We're going to be using Jupyter Notebooks. So there's a few steps involved in this. One is to get the Conda repository. Two, or sorry, the repository that I set up for the course. Two is to get Conda and get your Conda environment, which I think everybody got that far. And then to then activate that Conda in the virtual environment, and then from that virtual environment start a Jupyter Notebook server. And then you should have this, when you open your Jupyter Notebook server, if you just run Jupyter Notebook from inside this directory, it'll look like that. The reading goes out of date. I changed Notebooks to Material because it was warm and just beautiful. And so this is your like a file browser, right? So these are the files, the introduction one. This is what we're looking at here. This has a setup. So once you get the environment setup to the Notebook running, you can click on the cell. The Jupyter Notebook is kind of a mix between a Python IDE and an interactive Python shell. So you can put code in here. It doesn't actually execute until you hit Shift Enter. And then it'll run everything in that cell, and then it'll put you off immediately below it. And just like your Python shell, all the commands you've run previously will be stored in number 8. You can access them and build on them and those. But if you look at the Notebook, the order of the cells on the page won't change what was executed previously, right? So just because the cell is higher, if you don't ever run it, it doesn't get run. And it's not in memory. So just to carbon-centric that. So when you run this first cell, you should see it doesn't import. It gets the version that prints them out. You should see this, that you have a Python and a Notebook, right? Yeah. Yeah, so you downloaded the GitHub repo from a command shell like this here. You're going to execute your Notebook. Yeah, but actually, sorry. First, you have to activate the virtual environment. Yeah, yeah, yeah. Great. So you run that, that all comes up. Next, this is, you're going to import OK, and then just this little command here. It's pulling some JavaScript libraries from the web. It looks like everybody had success with that. So that's excellent. And then this next cell is kind of doing a similar thing at home. And the Hall of Views library is a shader. And then telling them we're going to use OK to output Hall of Views. And that's shader. So, great. I only seen green tickets. Go ahead and take your green tickets off. And it will keep going. So the schedule of this, this is a rough outline. Ten minutes to be able to set up an intro. We were fortunate everybody came super early. So I think we're all set up pretty much. I'll finish going through this. Then we're going to go through the basic plotting interface for both a plotting API. We're going to look at a pseudo streaming data example. And that's, yeah, pretty much anything for people. And then data shader, plotting lots of data. And then I'm going to focus over it. And then I have ten minutes. And really, again, percussion. While we're going through, particularly when we get to exercises, please ask questions. Let me know if there's any questions you have. And again, if I'm going to pass, if I'm just digging it up. So about me, I like to solve data-driven problems. I've been doing that for a long time. In my current position, I'm a researcher at NIST in Gaithersburg, Maryland. I do scientific software applications and analyze data. I'm looking at certain protein and highly concentrated solutions to understand the structure of these proteins. And I'm in that position for another two weeks. In two weeks, I'll be starting at Cruz Allen Hamilton. We'll be visiting that. A PhD from George Washington University and our father of three. This is my youngest. He was born a week and two days ago. So she goes with me while I was cleaning all this up. Yeah. So about bokeh, interactive data visualization. And that's the key. I imagine a lot of you are familiar with maybe map quality or quality or other things. How many of you, just to kind of get a feel, how many of you have used bokeh before? Raise your hands. Okay, so a few. How many of you have heard of bokeh? Yep. And how many of you have maybe seen a bokeh dashboard that somebody else made and you kind of played with it? Okay, great. So by the end, you're always going to fall. So the way bokeh works is it's a layered tool where we have your data and then we want to make D3-like visualizations using the HTML canvas, but we don't want to leave Python, right? So there's the bokeh Python layer and then there's the JavaScript layer below that. So bokeh, from Python, you send commands to bokeh but then send commands to JavaScript and passes it there and that renders on your browser to know or to learn a bokeh or whatever it may be. And because of that layered approach, you can actually pull out the Python bit and you can put in R, for those of you who's R, or Scala, and if you have some other program language that you'd like to work with bokeh, they're happy for contributions. And it can handle large datasets, dynamic datasets streaming, and those are pretty cool. So there's three different levels, or three different API. The lowest level is the bokeh models level. We're not going to cover that today, but I put links here to the docs and the tutorial notebooks so that if you want to go into that or if you have that need, you can find it. So on top of the bokeh models, you have bokeh plotting and it'll create bokeh models, objects. And that's what we're going to start out by looking at. And then the third level, it was bokeh charts up until a few months ago. Now they've replaced that with all of these and there's a lot of active development that has just taken place and they've just put out a lot of great documentation for that. So be sure to check out all of these other resources here. And some of what you're going to see today, I've adapted or pulled in from a lot of these other resources. There's a lot more material than what we could cover in two hours here. So I've tried to pick a few things that I hope are interesting and give you a feel of taste any day you start. So with that, let's come up and click on the basic plotting interface and it'll open this next notebook. Everybody here, if you're looking at this outline, click on the basic plotting interface, it'll open the next notebook for us, which you'll look like this. So we first import the base import and close the data plotting. Then we're going to load the JavaScript layer. This is loading it from your web. If you're not connected to the internet, you can get the JavaScript locally instead of you also have to import the resources and then when you do plotting out the notebook, pass it the resources in line and that will instead do it locally. I had to look that up a couple of times because I'm just frustrating because I wish I had to do that. Thank you. Okay, so, and then there's a lot of palettes that Bokeh has available to you and I really like this method of importing them so that I'm going to use this palette, create all my visualizations and consider that it doesn't like this palette. All right, let's go back and just switch out the import and then all my tools are done. Yeah, so now I have this other palette and all the palette is is just a list of hex strings for the colors. So a different list of hex strings. You can also just use basic colors like blue, red, yellow, and red. Try it. And then I'm going to use NumPy to create our data and then with that I'm going to set my sets. So, say that again. It's not right to do that. So, of course, set my sets. Yeah, a room to underscore. Try it. So, one great thing you can do is this supports tab location. So here I have color blue and set the tab and it'll tell me what's available and I'll just wait a second. See if that works out. Does the category 10 and then there's word 10? Oh, that's what it is. Let me come back. So let's start out with a plot and just, so when you're generating a poker plot you can pass any of the input values except either a single value or a series of values that's a list, a NumPy array and as a data frame column I think series said yeah, you pass it in and it'll, there's a really good job of matching up. So if you only pass in one value for the x and 30 values for the y it's going to match that up, expand it out. And so then for this tutorial we're going to be looking at a Gaussian function a lot we're also known as a normal distribution there's a wicking input we'll look at that later but this is the gist of it there's this sigma factor that controls how y in our distribution is going to be and this mu factor which controls where the average is at and then f of x that's going to be the y axis and x is going to be the x axis so for what it's worth that's the data that we're going to keep creating at once so let's do this I'm going to make three Gaussian distributions and here I create a figure object then with that big object I'm calling the diamond attribute passing it in x a NumPy array y1 is also a NumPy array and then I'm invoking it by show and there with those three lines of code we get this that's a pretty good plot and you have interactions you can zoom I'm just going to zoom actually so we're about to so run that and then answer this quiz what do each of these things do if you want to learn about figuring different outputs there you go so go ahead and execute that plot and then do that quiz and when you're all done go ahead and put the green signal of the one you're going to have to do that plot can you scroll up please so I can see the fill again do you want to do it again I'm just going to zoom in so that you can have a look let's see if that's what it looks like maybe we're too far away so I'm going to go let's go to the top see what's going on I'm just going to go I'm just going to go I'm just going to go I'm just going to go I'm just going to go so I'm just going to go I'm just going to I'm just going to Okay. Oh, you can see kind of like the graphic of the audio. Okay. Okay. All right. I figured I had some clever way for you guys to track it. I mean, Carl's not done that. Is Carl here this year? Okay. I just have to call him. All right. Okay. Take care. Okay. Okay. Yeah, it's, it's, but it's, yeah. Yeah. All right. Yeah, you move it around. What about this box with the magnifying glass? I mean, the funny, I don't know. Yeah. I don't know. You should go on the axis. All right. Okay. What is this? Okay. And this. This guy. Yeah. Right. Yeah. So this is actually the answer to the next question. Where do you go to get information about from the client page? We put that help one. It takes you to this one page on the documentation. And we only covered a few, but there's a whole lot more. So this is the first level of interaction. We said there's a zoom in box. There's a crosshairs. You can have crosshairs that you can use. You can have a hover tool where you hover to your point and it'll show information about that data point. You can even make it so that the hover tool, you hover over your point and it pulls in an image. There's a really cool, really great company out in Utah, Recruiting Analytics, and they're doing cell analysis. And they pull out a bunch of features from an image of a cell sample. And they plot that on this feeding plot. And each data point represents an actual image. Using this hover tool, you have one more line to this list that says image and then a path. And then it pulls in from that data point number the correct image that goes with it. So their biologist can look at the data. They can hover over the dot. They can see the image come up and analyze it further. They can look real-time. A whole bunch of them. What if you want to add a tool to the default set that you don't want to replace the default set? Yes, I think you just have to add all the defaults back in, and then that one too. I may be wrong in that. I was wondering if there is a method on the plot that allows you to just add them later, you know. When you replace some of them, but not all of them, which is odd. There are some core tools that don't go when you use them as another one. So that's a great question. What I would do to get the answer to that is come over here to the Gitter OK channel, and put that in and say, how do I do this? I was trying to Google what I read at that time. Yeah, yeah, yeah. No, it's a great question. I'm glad you asked because they are extremely active on the Gitter channel. They are very helpful. You know, so if it's more of a, that would be another great question to throw on the second overflow. They are a great community, and they will help you in whatever you need to do. So, yeah, lots of great resources. Then, that was the answer to number two, the quick batch help button, and that actually tells you how to get different interactive tools. And then, who figured out one additional tool? Well, I just want to do one, so. Yeah, so then, in addition to these tools that you can configure, the figure method and the diamond method, they have several keyword arguments you can supply that provide ways to adjust as well. Here, I'm adding a title, I'm adding an x-axis label, y-axis split height, the range I want to show. For the diamond, I'm going to change some of the colors and the alpha values, I'm going to add a legend, and there we go. Now, we'll do this. And you'll notice I used line color and the fill color, so this line color, you can also just use color and just alpha instead of line alpha and fill alpha. So, go ahead and do this next quiz. Look back up at what I just did there real quick and explore to figure out which settings both arts and keyword arts did I show for the figure, which I showed for the diamond, and then which took a single value, which did I use in the way of values, because I said you could use either one, and so yeah, go ahead and do a lot of that quiz. When you're done with the green, that's the deal. And to enter your answers, you can just double click this. So, those palettes supposed to be color-coordinated, so one color, and they're all like, they're just not clean or something like that. Yeah, yeah. If you want to go to the other side, you can see all the palettes they have. For note, each of these different palettes have different uses. The category 10 that I'm using is from the D3 palettes. It's also using Vega. Then it has all the color-coordinated palettes. And then the other one I mentioned was this color-coordinated palettes. So, some of these are color-coordinated, and some of them are color-coordinated. Continuous greening. Have a little suppose that you didn't answer all of the questions. We did talk to you. Glad to have you here. You're about to get to play with these palettes. So, one good choice is more color-coordinated palettes. Down. Down. Down. So, how do you guys do on a quiz? Is there anything that... Any questions? I was just talking around here. He was noticing that, yeah, the way the series works, you have to have the same number of elements and you have data points. If you don't... If you do more than one, but it doesn't match up, I think it may trump into data and have 10 data points and you already have 5 values. It'll either trump data, throw an error, or use that. So, yeah, you wanted to match up. How I did that, was I actually used the data values, and now I'm calling it so that the Gaussian is going to go from 0 to the reason of max value, so I divided by that max value. And then I wanted the alpha to go from 0 to 1, so now the alpha is going to go right to 0 to 1. I didn't want to find out though, but I just made it go from 0 to 1 to 0. So, it just kind of... It kind of shows what you can do. I'm not sure why you would call this this way. At least trying to show what you can do. So, this is a bunch of the different values you saw. In addition to diamond, there's a lot of other markers you can use, there's an asterisk circle. This circle is pretty common, and it's a little bit unique. It has a radius value. You can set that radius value equal to some data feature, and that can be informative as well. There is an issue to get a hexagonal dose. But yeah, so now I defined three different gaussians up at the top. One was Y1, Y2, Y3. They just had a different mean and sigma. So I want you guys to generate a plot of all three of those. And so, look at this code up here, and then up here. Copy, pull that down, adapt, hack, make it, so that you adjust... Use a different color for each one. Use a different alpha for each one. There are a single value, a series of values. You can use what I did, or do something more interesting. Change the legend for each one. And then also, in addition to markers, where there's an individual data point for each... individual marker for each data point, there's also the line option, which makes a line. So for one of those three, either Y1, Y2, or Y3, you can use the line and kind of explore how that works. It's pretty much the same. You obviously don't have fill-out points, but yeah, use lines, and then two of those other markers. So now, maybe... Thank you. Maybe, like, five or ten minutes. Yeah. We're all done. Do you have questions or issues? Are there any general questions? If you want to get interesting, you could also plot the same data twice. Let's see what that does. Yep. Yeah. Yeah. Yeah. There was a question somebody asked. I tried mine, but I didn't know where they were. What, what am I wrong? So, let me just say... How do you get help? So I have your fill-out line question mark. So here is all the input... So, it expects an X and a Y, and if I just want to make it work, I can just put my X and Y and see how it works. Then there's keyword arguments. Here is the keyword argument, which we have in our library. We can actually script the code. There you go. There's also an output order. So... Vocate provides this great... We're not going to do that. We're not going to do that. We're going to get to that point. Yeah. I can use... I... Here inside the cell, I'm going to say... These are a couple of guesses they have for me. Yes. The question mark pulls up. No. So, what would it make it work? Like, would it buy a free bed? It's like, we just came to buy it. So, like, one of the videos for the exercise is one of the morning hours of that one. Do you want to... I encourage you to try to play around and figure it out. Ask the guy next to you who looks smart. See if you can figure it out. I'm happy to answer that. I kind of wanted to be a startle. I lost the mark. I'll give my back to you. Okay. Somebody dropped an iPhone. Okay. Okay. Okay. Yeah. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. have a little bit of finer control, so, and then in, before, I don't know if you noticed we did bokeh.plotting, not output notebook, here I'm doing bokeh.io, not output notebook, they're the exact same functions, just in plotting there's a shortcut to get to these traits from the I at the end. So, great, new ports. Now, here, I'm going to explain this before I do this. Yeah, so, on the very top here, I'm randomly creating two different new approaches, a new X, a new Y, and I'm going to create two random sigma values for my actual distribution. Now I'm going to create a figure that should look just like what we had before. This looks a little bit different. I mentioned here I'm manually creating the data source and you'll see that I'm giving it an empty list for both X and Y. You'll see why I'm doing this in a second. Now I'm going to create a, this circle one is from, I'm doing my big dot circle which is one of those markers we use. I'm passing it here, this source is a humor argument where instead of providing it with individual value or series for X and Y, you can tell it, I have this source, I want X to be the X value from the dictionary, Y to Y, and I'll plot that. The color is just the same value, just the same here. The show command is going to update every time. I'm going to use the handle on that right here in this while loop. It's using that handle to repeatedly push to the image and these two commands are randomly selecting a new value based on the mu X1, sigma X1, the Y1, the Y1. And as I do that, I'm going to give this plot which is adding new points. Yeah, I'm going to, well, if you put a slate in here. Yeah, so, pretty cool. I am doing a pseudo streaming data. I'm not like pulling those data from the web. Yeah, my question is what kind of processing overhead do you see in this? I mean the problem we ran into that you alluded to where the math plot line is, if you have an ever increasing series of data, you jam these enormous arrays into a new drawing, it doesn't even read very far, you just grind. Yeah, yeah, so, let me, I don't know if I have that. So up here at the top, you can see my process level, right? Let me just read on this slide and show you how much it goes up. It's going up a little bit. Yeah, we've got 5.4 laptops, right? 2.4 laptops, but yeah, I mean, it is going up a little bit. It might be because of the grid. I'm pushing, you kind of have to, I mean, I'm pushing a lot of data, you don't need to show every pixel. So although we could average over a day, we could average or something, but is there a way to get it to update only the parts of the chart that have changed as opposed to completely updating the chart every time you jam in the array? So depending on how you push and the way you call this, it will either re-render an old plot or just update the parts you've changed, and I'm 90% sure I did this right, and I'm only updating the data points there. This example came out of actually somebody who wanted to set something up like this, and the way we originally thought about it was regenerating the old plot, clearing the plot, regenerating the plot again. So this, you'll notice it's like, no, it's not like the leading and re-rendering the plot. It's just adding more data points as it goes. So kind of just playing around, look at the one you generated, and can you get a feel for what mu x is, what mu y is, what sigma x and sigma y is, and you can zoom in on that, check it out, and then after you do run this cell, and you can see how much you've worked in the actual values that you've generated. Once you do that, play the green sticky note. Yeah, I mentioned here I'm manually generating new data. You can see it would be pretty simple to change this while looping to some kind of querying or querying the Internet, querying your data source, and pull that in instead of manually generating, and you can then, well, I think the same way I'll update this, this data source, and then of course that's what you were saying, but I'll put this data source here. Always run, always run. If you want to sort of apply it without the end of the year, it's there. You know what I mean? Yeah, so if this is, if this is a list, you could do something like, you could replace the entire data source, and then just truncate the end and run the center. Yeah, I have an example of that, and I'm going to run it. I'm going to run it. I'm going to run it. And then I'll run the whole redrawing, and then here it will change, it's still running redrawing, and it'll just redraw the whole staging area. So like, first I'll update all the data, which is a way to see the data source, and then I'll run it. Yeah, it's adjusting as if the data form is supported. So here, the new data X is assigned to the list XOA. And then we just show the list and then show the values. But it's very similar to this address. And I can read the link to this. Yeah, I'll put a link to my annotations. Either not all of them, but there's a few of them. I'm just curious, a lot of the commands that you're doing seem to specialize in notebooks. Is it much different using this if you're not inside your computer if you're just trying to look more with age or a server at or something? That's the, in the fourth part of this, we'll look at broken server. And it's very similar to the calls that you're referring to in the push notebook. There'll be a sort of a community. So sorry, the question was this notebook, it's very specific. The commands that we're using right now are very specific to this notebook. How does that generalize to using the script and running to a website? Yeah, it'll generalize a little longer and I'll show that. Great, so let's, you guys got to kind of play with your new and similar values. Let's go through this exercise. I want you to copy that book from above, add a second dictionary. So now you're going to do a new X2, a new Y2, and add a second plot in that same window. Now every iteration of the Y1 is going to put two points on there. One for each of the two issues. This one is for that main source. Yeah, give it a different color. Yeah, and so I originally had a sleep function in here, and then I got annoyed because one of the things that I got in my company didn't crash, so I went down. Yeah, I think it's rendering stuff. I'm not sure on the back end what it looks like, where the weight is coming from for this. I mean, it may be drawing something. Yeah, yeah, you can do that. I think it should be like that. So the question was, why does it render as slow as it does when you make it go faster? And there's going to lag in the back end of the model. And I think one of the things that's fascinating is the count of the model. And this is going to be like 5, 10, 20, and then there's going to be a push mark. So if you get your distribution, go ahead and see if you can get the mean and standard distribution rate together. So take off your green sticker and let it all the way down. So for the second distribution, do you mean the new source? Yep. So the question was, for the second distribution, do we make a new combination? Yeah, we'll do that. We'll do that. Yeah. And then you're plotting a figure that takes that weight. Is that circle? So my thing is the figure, and then circle one is the first set of circles, right? And just similar to the last one, if you do my thing... In the last one, my thing would be... Yeah. Once you got that, go ahead and put it there. The question is, I'm just really lost in the song. This is pretty good. Mean and standard distribution for it. You don't need to do that again for a second distribution. You can either... This one's doing mean values, and x and y, and x and y. You can copy them. And don't change the figure all the time. The person had to change the number. I want to try to... It's going to pick a round. It's going to pick a round. The two is how many values you get. So it's going to output two values. One of the two is going to go on the left. One of the two is going to be c. Otherwise, it's going to be c to the left. Yeah, yeah. If you leave it on, it's going to be c to the left. It's going to be c to the left. It's going to be c to the left. It's going to be c to the right. Yeah, yeah. So it's going to be c to the left. It's going to be c to the right. So I have to create a second video source. I'm going to do... I have to create a second video source. Yeah, yeah. I'm going to do this. This is where I'm going to... I'm going to do this. I'm going to do this. Yeah, you would... Well, I probably set up some of the... I'm going to do some of the... So, do you have some slides? Do you have any slides? No. I've got to hear that. I'll tell you about it. Um, do you have any slides? Yeah, I have some slides. I don't have any slides. You can go to this one. I have a solution that you can learn in a second. Yeah. It's going to go with data 1 and data 2. X and Y are from data 2. I don't know where it goes. Okay. Oh, yeah. I'm going to set up a prediction. Okay. Okay. Okay. Okay. Okay. So, I see my solution. Go ahead. So, what I did here is I changed how many values I wanted to get. I changed that to 4, so that non-primarily I ran it into 4 values. 3 to these. X2 and Y2. Create the data source. Create the plot. Create the set of circles. And then, um, do the dictionary, the restructure. I'm going to do the string. Now, I need to look at doing both the blue dot and the blue dot. I'm curious about the way that the doctors are doing it. Yeah, I'm just curious about the way the dots are drawn. The orange dots seem to always be on top of the dots. Independent. Is this the index? Yeah. Yeah, yeah. So, the question is, how are these drawn, which is on top? If you look, the orange is on the plot in a second. Yeah. The blue first, the orange second. And this, that can lead to problems in overlap. And the next, the next question is going to talk about ways we can look at that. The next phase of the order that you call dots, right? Yeah. With the data set to, you can call that, that's what you call it in a second. Yeah, it's the kind of, it's not going to come in the order that you call dots. There's a lot of, there's a lot of, there's a lot of. This is just in the wild with you. I think it's everybody in the audience. Absolutely. I think it might be. Yeah. The order by the screen. Yeah. Yeah. Yeah. Yeah. Great. So, let's go to the next question. Okay. What's the idea of sharing? So, what happens when you have a lot of data? I'm going to leave. And for holidays, holidays is the new higher level planning API for Vocay. I'll show you. We're going to tell holidays when we want it to output to Vocay. You can also output to that while living. You can live. Maybe I'm not sure. Yeah. So, what happens when here, I'm, this method is going to give me a set of Gaussian points essentially at U and sigma and it's going to be, by default, it's going to be 10,000. So, let's look at five different Gaussian distributions. So, 22 minus 29 minus 22 and zero zero. And let's see what happens when you plug. Oh, no. Yeah. Not really clear what's going on, right? So, well, maybe, maybe I should use the alphabet, right? I have a lot of overlap. Let's go back and add an alphabet. Okay. Yeah, maybe that's a bit better, right? I, oh, yeah. Somebody up front here just mentioned that this killed his browser. So, what happened here is Vocay takes all those points, it passes all of them to the browser, and now the browser's storing all that in JSON and rendering all of those points. Does it compress the JSON before it sends it or does it? I don't know the answer if it compresses it or not. I'm not sure about that. Does that make the difference, especially if you're done, once you've got a server, if you're going along the way? Yeah. She just did what I wanted to do. You're done. Everybody here. Right, so, maybe this isn't the best way about this, right? Maybe you need a new laptop. I do need a new laptop. So, that's a very good question. I'll figure it out for you. The line output is zero. Doesn't that just make the line transparent? Right, I did. Yeah, I changed the fill output at point three in the line output. This is hiding your data. Why is that? Well, it's hiding the lines. You still see the fill. And I can set it to the same. I don't think it looks as good for someone. Yeah, the lines... Yeah, so, I sat here and I filled out with these output values until I got something that looked sort of located, right? Not very generalizable. So, this isn't the best way about this. And that's what we're about to see. Question? I'm seeing one of the two, like, circles that look oddly defined. I'm wondering, is that sort of, like, added in the data around this edge? We'll get more than three of them. Right, so the question was, he started to see structure in the data, but what is that telling us? If you go back, I can see what statement values I put in. I can see where the mean values I put in. So, there is structure in this data, but it's kind of hard to see right now. So, let's dig into that first. That's where data sheeters come in. Data sheeters, the similar ways interface is all of these. So, all of these, you create a common object and it's here. I used all of these. I'm going to, I want to create a common object. When I passed in all the data points, I gave it a label. I pulled it about the different dimensions. So, the first column in my point is the dependent variables. The second column is the dependent variables. And I'm going to write the original one. This is all the data. So, now, what is this element on it? What if I just render that? So, what if I just show, hey, the default output, when I just go look at it, it shows me a part. It looks about the same as that first one. If I, so, when I print it, I get the text description. And it's this all of these point elements. These are common values. So, I went to just output it directly. It's pretty logical about how it goes about this. But we didn't get, that didn't give us anything better, right? So, now, I'm going to use the data shade in operation. And if I go back to P, I loaded this from HelloView's operation data shear. I pulled in the data shade and the dinosaur. So, right. So, now, what does that look like? I'm going to use this. Now, it's not rendering every point. Now, I get this nice visualization. You can put it on it. You can put it on it. You can see it on here. Different groups, right? So, what's going on there? What happened? There's three components. There's bokeh, that's setting the X and Y range for what I want to plot. Then data shader, it's going through this kind of process here where it looks at the data. It, in the backend, generates a scene. It'll look at each of the pixels and say how many points are in that pixel. And it does a color mapping to then assign a color based on the density of the points. And then it creates an image on that which then passes back to bokeh, parallel to hollow views. And hollow views embeds that image in the bokeh. And every time I zoom in on this, it reiterates that process. And it's using Numba in the backend. I'll go check out that process just a little bit. To do this very quickly. And it regenerating those things. So, it has three analogs and every time it changes. All right. If bokeh will give it the new X, Y range, it will re-process it. As I, there's a lot of options you can adjust with this. In general, this is kind of the format you're going to use. And this is based on pipe parsing. That was one of the financials you got when you set up the environment. You passed this ops. It's where it raises plot options, and it raises style options, and it raises normal options. But I don't expect you to walk away from here knowing how to do that. It'll be a lot better. Will it be controlled with colors, for example? Yep. Yeah. You can control the color map. To shape to this point, it's a lot better stuff. The points are always going to be points. Because you're essentially doing a scatter but then aggravating them a lot. Question for you? Is there like a standard refresh rate for me? Or we can do a scatter against generating? Right. The question is, what's the standard refresh rate when you zoom in? I am not sure. The answer to the question is pretty fast. I have always been pretty fast. I'm not sure. Have you ever done it on like a Raspberry Pi as opposed to a machine with two cores? No, I don't know. The question was how to do this for handle on not as great a hardware? I'm not sure. I know that the back end for this is optimized and you can see the number which writes the program. It's very long. So it should work well. So one thing I wanted to point out is as I zoomed in, it looked... As I zoomed in, the colors changed. It has to do with spreading. Here I'm also calling the line spread on the second plot. If you look at how I generate these plots, it's very, in all of you, it's very simple to generate these plots. I do add and it added two sets of data to make these two functions, right? For these two figures. And they're actually linked. Zoom in. They have a link xy. So the one on the left is the original raw one that I had. The one on the right here is using dynamics to spread out the pixels a little differently. And when you zoom out, they look essentially the same as you zoom in and you start to see how that compares. You might want one on the other. I get that. That's there. And the key takeaway here is compared to where we started with this plot here for the left plot breaker. This, you can really see what's going on in your data. You can see, it looks like, you look at that, you see five different distributions. There's one large one, and then there's four that make a box. The spread is different on them. You get much better insight into what your data is doing. That's right. For this exercise, I want you to pull in that code from above, read, adjust, change the number of points, go loud, go nuts, make it big. Don't do billions of points. You might run into a van. Or determine the laptop. No, I love... Yeah, so... You can use a lot more points than what I did here with 15,000 points for the laptop to generate the figure. You can do millions of points. As long as you'll fit in random, it'll render and it'll do that color mapping for the pixels and you'll be able to see it. And if you go look at the data shears documentation, they have all these examples with the mirror and taxi cap data set, which the full data set is 60 megabytes, and they're visualizing that. And you can pull out that. The demos are even like one for five, but you can look at this scale very well. So, on the scalability, say we have to have 10 computers or every one to spread the processing, is this stuff smart enough to spread out across? So, the question is, how do I distribute the processing back in across... Can you have a guess? I would look at the project GASC. GASC is a project for creating and distributed computation, and it'll break up things like what's going on here. D-A-S-K and it'll break it up across different, whether it's server or machines, it's similar to SPARC machine. Can it run on top of things? Yeah. Yes. Are you sure? Yeah. The specificities that have to be refreshed, but yeah. It is a Python synonym or a similar method pool to you. And it's needed to fight things. So, go ahead and adjust the position of the new values, the signature values, and play around and see what else you can do. And for this, you don't need that on your project. Whereas in here, I just added what you showed the added signature and signature values. You can see that. We only have about two minutes left. Let's go to the broken server. We'll come back to the navigation one. So, in the beginning, I talked about the different layers of you have the Python layer which pushes out JSON to the JavaScript layer which then pushes to the browser. The broken server is a way to keep those in sync with each other. Where you keep the Python in sync with the server and they talk about if you can update the Python, it will update the server. It's far more important to come back here. It's not that server or if you want to fix my title to change the .p1 to to kind of get right into this. I want you guys to take this code. Actually, you have a code server that you use for your materials. You have a code server. So, from here, type in bokeh server and that will open. This is the bokeh server that we just created. So, what's the code going into this? Come back to the notebook here. There's essentially four parts to the bokeh server. The given is your imports. So, then we're going to create some widgets. We have the button we did. The server. Exactly. So, we have a button. We have a text input here. And then, we have this output here. So, then we're going to add a column to the widget which that's this update and it's going to change the output text property to be hello and then that input value. And then, when you push the button on click right here, you're defining that this button is going to be the function. And then the third component of this is creating a layout. How do you want it to be arranged configured? And then the fourth is this is going back to the question about push notebook when we're doing the streaming example. Here, KERDOC is the current document and I'm going to add this to create this server. So, let's I want you guys to have this. I want you guys to add a select widget where you can have another box here that will select different ingredients. Maybe you want to use different languages or maybe you want to say hey, do more slang about it. So, add a select widget to this server app and open up the server.py add in a new server widget and run it to see and test yourself. And I put a link here to the documentation. I have a link to this. When you finish, go ahead and put the grains to be up on your laptop. So, cheers. I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I I