Python Data Visualization With Bokeh

[Music] this video is sponsored by dev Mountain if you're interested in learning web development iOS or UX design dev Mountain is a 12-week design and development boot camp intended to get you a full-time position in the industry to learn more visit dev mountain comm or click the link in the description below hey what's going on guys so I wanted to kind of mix it up today and do something a little different we're gonna be dealing with data visualization with Python and a library called bouquet but what this does is it allows us to take pretty much any data structure at all in any kind of file whether it's a CSV or JSON file or hard coded data whether it's from a database and we can create a visualization so basically create charts whether it's scatter plots or line charts or our bar charts and you can create some really cool stuff so it's used a lot for like stocks and stuff like that you can see some more examples on the website here and the gallery but what we're gonna do is something pretty simple I found this article with some of the top highest horsepower cars in the world and it gives us the car it gives us the horsepower the price and the image and what we're going to do is put all that stuff into a CSV file a comma separated values file and we're going to take that and create this horizontal bar chart from it which lists the cars we're actually we're only taking a to the 12 the top 8 and then the horsepower and if we hover over either these bar any of these bars here you'll see that we get the car the price the horsepower the image so we also have a legend over here we have some tools so we can for instance drag it around we can select certain bars if we want so we can zoom in zoom out we can save it as an image we can disable the tooltips so it's a fairly simple example I think that even if you're in the beginning stages of learning Python I think you'll be okay the way that it works as far as the browser goes is we can generate the HTML on the JavaScript and we're gonna do is just generate the whole file however you can generate what what are call components which is just a script tag and a div so if you wanted to take that and integrate it into any project you had no matter what it was it could be static HTML or you know PHP or react view something like that or another another Python framework like Django or flask anything at all you can integrate this library with alright so let's get started let's jump into vs code alright so whenever we do anything with Python it's good practice to create a virtual environment and the best way to do that is by using pip env okay so you need Python installed obviously once you have python you'll have access to pip which is the package manager and you want to install pip env okay once you run that you'll have access to the pipi and V command and you want to run pip env shell and that's gonna create a virtual environment it's gonna create this pip file which will include any packages that you install all right so I'm gonna clear this up and we're going to now use pipi and V to install voce and also we're going to install pandas so that we can use a CSV file basically bring it in as a data frame and use that data and you can see that they both got added to our packages all right so let's clear that up and now what we want to do is create our Python file which I'm just going to call main PI and before I get into actually creating the the chart for the car horsepower I'm just going to do something very simple and just plot some numbers on a line graph or a line chart so let's bring in will say from bouquet dot plotting we want to import figure which is used to create plots we want something called output file so that we can tell it the name of the HTML file to generate and then show is going to actually generate and show that HTML file all right as far as our data I'm just going to create a list let's say 1 2 3 4 5 and go ahead and copy that down and let's put some other numbers we'll do 4 6 2 4 & 3 and let's just change this variable to Y okay and now what we want to do is set the output file and I'm just going to call it index dot HTML okay now we want to add our plots so we're going to set a variable I'm just going to call it P and we're gonna set it to figure and this can take in multiple attributes and if you look at the documentation it'll show you everything that you can use we're going to add a title I'm just going to say simple example and just going to add a label for the X and y axis so x-axis label let's just do x-axis and we'll copy that down and let's do y-axis label oops okay so that's our figure or a plot which comes from the figure function and now we want to let's let's render our glyph so there's different types of glyphs ultimately we're going to be using an H bar which is a horizontal bar graph but right now I'm going to use a line chart so we're going to say P dot line and we want to pass in our data which is x and y okay and we can add like a legend if we wanted to so I'll say legend equals I'm just going to do test and then we can set the line width since it's a line chart depending on the type of glyph did you'll get different attributes so we'll set that to two and then finally let's go ahead and show our results by running show and passing in our plot okay so just this should actually create what is this okay so that we're getting this because envious code what you want to do is go to your command palette so command shift P our control shift P and if you type in Python you'll get this select interpreter and you want to make sure you choose your pippi and V environment okay you know you can see that red line went away so we'll go ahead and save that and now down here we're just going to run our file so let's say python main dot pi and there we go so it generated this index.html and you can see that it's marking our data so X is just 1 through 5 and then Y we have 4 6 2 4 3 and if we look at our graph here chart we have 4 6 2 4 3 okay so it's marking that on the X at on the y-axis and you can see these are our labels that we added to to the figure now by default you're gonna have on the title is up here we have the legend but by default you're gonna have these tools so this is to basically move it around if you want we have the zoom in zoom outs save so you actually save it as an image then we have the reset and then this just goes to the documentation and this top one goes to the home page alright and I'm going to show you later how you can add and remove certain tools here if you want okay or if you just if you don't want any tools at all you can do that as well all right so that's how we can create a very simple visualization pertaining to some data so now let's take it a step further and start to create our cars horsepower chart so I'm gonna create a new file and I'm going to just call it cars dot CSV okay so this is the file that we want to grab the data from now I'm just gonna paste this in you're probably not going to want to type this in if you're following along so I'll put the link to the github repository in the description and I'll have this file there so basically this is just a CSV file we have four fields car horsepower oops price and image okay so you can see this first one is the Hennessey Venom f5 1600 horsepower 1.6 million for the price and then it has a link to the image ok so we have eight different cars with these four fields so I'm gonna go ahead and save this and let's go back to our main dot PI file here and let's see we're not going to be using this data so what I want to do is read in CSV and we're going to use pandas for that so I'm going to create a variable called DF for data frame and we're gonna send set that to pandas dots and then there's a method called read underscore CSV I'm sorry we need to bring in pandas so imports pandas all right so we're gonna read CSV and we just want to pass in the name of the file which is gonna be cars dot CSV all right now later on we're gonna be using something called column data source but for now I'm just gonna put the data frames for each field directly in a variable so let's say car set that to D F and we want the car column okay then I'll set a variable for horsepower HP set that to DF and we want horsepower okay now we're gonna leave this because we still want to generate an index.html let's go down to our figure and since we're using an H bar glyph which is a horizontal bar chart we need some stuff in here such as Y range so basically the data for the y range and that's gonna be the cars okay our car we're going to set it to this variable here let's see I also want to add put a comma here we want to add a plot with which I'm gonna set to 800 okay so this is just pixels and then let's do plot height and if you guys want to change this that's fine I'm gonna set this to 600 okay and then for the title let's change this simple example to cars with top horsepower now I don't we don't need a y-axis label because it's just the name of the cars however the x-axis label I'm just gonna say horsepower okay now here's where we can actually set the tools I'm going to show you if we set two if we set tools to nothing it'll actually get rid of them all so I'm going to do that for now but I'm gonna add some later on now down here where we create our glyph we're not using a line anymore we're using h-bar okay and if we go to the documentation let's see so I was actually as a search for it there's a lot of documentation so search for h-bar so you can see right here Boca Boca bouquet model glyphs H bar and it gives you some examples there using the column data source which we're going to use in a little bit but if you look over here you'll see some of the other glyphs so we have line which we just looked at we have V bar which is a vertical bar chart we have step patch oval arc and just to give you some idea of what some of these look like bezzie a Bezier however you say it ellipse hex so there's a bunch of different things you can do some of them are really advanced so back to our file here in the H bar we're gonna let's just clear all this out and we'll go on a new line so we need to set a y-value which we're gonna set to the car okay just like up here we said the Y range is gonna be the car down here we just want to set Y to car and this will give you want to go back to that documentation this will give you the different properties okay so all of these you can see so right here Y so property type this is the y coordinates of the Centers of the horizontal bars so the data for the y coordinates we also need right so right is gonna be horsepower because that's what we want at the bottom so let's go and say right set that to our HP variable our horsepower left is gonna be just zero and then we can set the height of each bar which I'm going to set to zero point four we can set a color I'm going to show you how to create a color map later so that each bar can be a different color for now we're just going to make them all solid orange okay and then let's see we can also add a little bit of opacity if we say fill alpha and let's set that to 0.5 and I think that should be good for now okay now down here actually I think that's good let's try and run it so we have our show so it should generate the file so run that and there we go so we have our title cars with top horsepower we have our y-axis data which is the cars and then down here the on the x-axis we have the horsepower and notice that there's no tools it does have this little icon which brings you to the the bouquet library website but none of the tools show now if we want to add the tools on our own we can do that so let's go up to tools and let's say we want the the pan so that's how so we can move it around let's say we want the box select so we can select certain boxes are certain parts of the of the visualization and again you can check the documentation out for more of this stuff we want zoom in let's do zoom out and let's do save all right so if we save that we run this again and now you can see we have our tools okay if we use the box select we can go ahead and select certain boxes all right we might want to add the reset too as well I think it's reset let's try it over on that again and yeah there it is so that way if we were to let's say select a couple of these and we want to reset at we can and you can again save it as an image too so let's see the next thing I want to show you is how we can use a column data source instead of just putting them in direct variables like this we're gonna bring in up here from bouquet plotting we're gonna bring in column data source okay now we're using this because it allows you to do extra things such as tooltips stuff like that so instead of setting these variables I'm actually going to just get rid of these and let's say we want to create a column data source from the data frame so we're gonna create a variable called source set that to column data source and just pass in our data frame which we got from the CSV using pandas okay now down here we have to change a couple things so for the glyph th bar we can actually now pass in source and set that to the source variable above and now instead of using this these variables here we can actually use the column names so we can put in quotes here we can say car which is going to now pertain to this okay so we want to match that we also want horsepower so let's get rid of this and let's say horsepower all right now we do have an issue because up here when we're using an H bar glyph we have to include a wide range in the figure and we don't have the car variable anymore so what we can do is let's actually create a variable for the car list because this takes in a list so I'm going to say car underscore list and we can take from the source the data so source dot data and car okay so we want the car and then there's a method called to list actually it's all lowercase to list like that and then we should be able to just pass in right here car list if you want to just pass this in right here and not create the variable of course you can do that as well but that should work okay so we should still be able to generate our our chart so let's try it okay so now you can see it still works now you see how every time I run show it creates a new tab you can also use save if you want so what I'm gonna do and you guys don't have to do this but I'm gonna bring in save up here and down at the bottom I'm gonna comment this out and let's say save file so I'm just going to call save instead of show and pass in P so now when I run it it doesn't it's not going to open up a new tab automatically I'm just gonna go to index.html and I'm gonna use my live server extension oh I wanted to show you guys this too so let me just fix this up a little bit with pretty air so this is what it creates for us an HTML file with the style sheet for a bouquet the CDN for the JavaScript and then there's a div with the class of BK root okay so that's where the the chart is inserted and then we have a script this is all the JSON data and then down here we have our JavaScript so it generates all this stuff for us so you don't even if you just know Python you don't have to know any JavaScript to deal with this all right but yeah I'm gonna open this with live server so now I can just reload every time we make it change every time we run Python main dot pi all right so let's see we have column data source now I want to work on the tooltips so there's actually let's see there's a tool we can bring in let's go up top here and let's say from bouquet dot models dot tools I'm gonna import the hover tool and then down here let's go under the h-bar glyph and let's say add tooltips so I'm going to set a variable called hover and I'm gonna set it to that hover tool that I just brought in not hover tool however tool and we can do this a couple different ways we could just create I believe a dictionary of tuples where we can just have different fields but you can also put HTML and you can basically format it however you want so that's what we're going to do we're going to say hover dot tooltips and we want to set it we want to use the the triple quotes here triple double quotes and inside here we can put our HTML so I'm going to put a div and inside here we'll put an h3 and then when whenever we want to access the data for that particular or tooltip we can use the @ symbol so we can say at car okay since I want to put the car in the h3 and then I'm gonna put a div can't use M it here let's put a div and in here I'm going to put a strong tag okay so this is gonna be the price so I'll say price and then we can access the price with the @ sign and then price okay so any fields that you have in that CSV file you can access now I'm gonna copy this down because I also want to put the horsepower so right here let's just - no just do HP and then we even have the image so we can put that in here as well let's get rid of all the stuff and the div and then we'll put in an image tag with a source and the source is gonna go to at I think it's just called image right and then we'll put an alt and I'll just leave that blank okay so that's our tooltip actually we want to make sure we put a width because these images are pretty big so let's set a width of 200 all right now the last thing we need to do for these to show up is take our plot variable here and just call add tools and pass in hover that's it okay so actually I'll just put this up here let's save it let's run Python main dot PI and let's go back to our browser here and reload and now you'll see as I hover over we get the car the price the horsepower and the image which is pretty cool and again you can format it however you'd like alright so let's see next thing I'm going to show you is the color frames or I should say color mapper now there's different ways to do this we're going to use something called factor C map so we want to go back into our document here into our code and let's bring in from this is actually from bouquet transform and we're gonna import factor underscore C map okay so basically we're gonna add a color palette based on a factor and that factor is going to be the horsepower now you can create your own color palettes but there are some available so I'm gonna use one that's from bouquet so let's say bouquet Dodd's palettes oops palettes and I'm gonna use one called Blues eight so blues eight it's just different shades of blue and then to implement this we're gonna go down to our H bar glyph and instead of color we're gonna do fill color and we're gonna set this to the factor C map okay and this is gonna take in a couple things it's gonna take in the factor which is Carm sorry I said horsepower but we're saying car and then we're going to set the palette to blues 8 which we brought in above and the factors I'm sorry car this is not the fact this is just the title the factors go here and we don't have access well actually I think I think we can just do car let's try that we should be able to do that I think so I'm gonna save this and let's go ahead and run this invalid syntax all we need a comma right here okay so expected an element of either sequence got car so it's talking about our factors okay so you know what we're gonna do is use our car list variable this right here just like we added for the Y range outside car list see if that works okay so let's go back and there we go so now we have the blues now this is really light because we have the alpha so I'm gonna set the fill alpha to 0.9 and run that again and now it's a little darker okay so let's see we can also add a legend okay if you want to have a legend for each car so to do that we're gonna go it's go right under the H bar let's say add legend so we can do p dot legend dot orientation okay so you can basically set it to either vertical or horizontal I'm gonna do horizontal I'm sorry I'm gonna do vertical not horizontal because I want it to fit right in here so it's good I want it to go vertical otherwise it'll go all the way across and there's the I mean you can add margin and padding and there's all types of stuff you can do guys this is this is very basic compared to some of the stuff that you can do so let's see we also want the location of the legend so let's do P dot legend dot location and I'm gonna do top right okay so you can do like top left top center bottom center bottom right bottom left whatever you want and then I'm gonna just make the font size a little smaller so let's do P dot legend dot label underscore text underscore font underscore size and set that to let's do ten pixels alright so we'll go ahead and save that let's run the file oh I'm sorry in order to use the legend we have to go into our glyph here and just say legend and let's set that to car needs to know what to put in the legend and there it is so now each car has its own legend with the specific color from the palette alright so hopefully this this stuff is making sense and I know it's pretty basic but you can come up with different ideas for different types of data and you know the H bar glyph is just one of many so if you want to check out some of the other ones you can even have controls and stuff like that maybe we can look at some of the some of the examples after but the last thing I want to do is show you how we can basically generate like I said a div and a script tag if you wanted to put this into another file so to do that we would go up top here and bring in components which comes from I believe it's bouquet in bed so okay dot embed and we want to bring in equals we want to import components all right and then once we do that we could go down to the bottom here and let's say print out components or print out div and script not crypt so we can create a variable for script and div and set that equal to component and then I'm sorry components and then pass in our p-value now that'll create it and it's up to you what you want to do with it you could print it to a file you could even insert it automatically into an HTML file but I'm not going to go through all that I'm just going to simply print them out so let's print out the script we'll print out the div and then the script alright so let's try that so we'll clear this up and we'll run this and now you'll see what it printed out if we go to the top is right here so this is where we ran it and it printed out this div so you would take this and put it wherever it could be a react application it could be something anything at all any you know HTML file PHP file and then just add this this script right here so all this stuff this has the JSON inside of a variable and then some JavaScript down here and it will basically insert it into the Dom okay so you can put it into any file you want and like I said there's ways to insert it automatically into an existing file but it's it's a little more advanced than I want to get in this tutorial alright so I think that's pretty much it guys so if this is something that interests you data visualization with Python I would highly recommend that you go and try to create something yourself because that's exactly what I did I found this library I looked at the documentation found some kind of article that had a little bit of data that I could take and use and create something from and that's how you learn so you're not gonna learn much just by copying the code so really try and understand that documentation is probably the best resource for learning just about anything but even better than tutorials so as long as it's good documentation so I mean if we want to take a look at some of the stuff that we can create with this library let's let's go to the home page and if we go to gallery and see this is interactive query tool for IMDB which is the the big movie database and you can see that all these little plots I believe this is a circle glyph they're all movies and they have the title of the year the the amount they made at the box-office and you can have little sliders over here so as I slide this back and forth it's gonna raise the the amount in millions so this is a hundred and two million all these movies made at least a hundred and two million so bring this way up and you can see you have the Dark Knight Rises four hundred forty eight billion the Avengers six hundred twenty three billion so it's pretty cool we can change we can go by genre the year released so you can add controls like this which is really cool and Python is great for anything that has to do with data let's see this is a weather map so this shows the record the average and the actual for different cities so we have Boston was just freezing right now Seattle what's this distribution discrete smooth so a lot of stock market stuff this is used for or even have this like 3d stuff like this so there's a lot you can do with this library so I know it's this is something different it's not you know the usual stuff that I deal with but I wanted to do something different I want to start venturing out into other stuff I'm so hopefully you guys enjoyed this and even if it's not something you're going to use in your career or whatever just play with it you know doing any kind of programming is gonna it's gonna make you a better programmer even if it's not stuff you're gonna use every day it's still training your mind to think in that way alright so thanks guys thanks for watching and I will see you in the next video

Channel: Traversy Media

Views: 151,791

Keywords: python, python data visualization, python chart, bokeh, python bokeh

Id: 2TR_6VaVSOs

Length: 33min 54sec (2034 seconds)

Published: Tue Feb 26 2019