Bar Graph (RadioItems) – Python Dash Plotly

hi everyone thanks for tuning in so in this tutorial we’re gonna look into how to build bar charts using Dash by Plotly. Dash by Plotly is a tool to build interactive data visualization web apps using Python alone it’s a really cool tool that really recommend it and will see many more videos about how to make the best use of it and how to create data visualization apps before we start the tutorial i would recommend opening up the description and below the video and clicking on the links and open up all the links so you have all these browsers open all these tabs because they will really help follow along the tutorial and teach you many things. Bar charts… so this bar chart when do we usually use bar charts. Bar charts are usually used to compare between categorical or nominal values and it usually has two axises. One of them is category values and the other one is the numerical value in this case time spent on on-site tending to animals in this case we are going to see how to use how to build a bar chart and two radio items we’re going to have one here and one here below and we’re going to connect between the radio item and what the user wants on the bar chart alright oh and the last thing is we are using the data that we used when we created the pie chart was is real data and it comes from NYC open data and it represents it’s an excel sheet which is right here also will be in the link below and it represents all the calls made to in New York City – Park Rangers to try and save or tend to animals that are in distress okay so how do we create this bar chart and the radio items let’s jump right into it okay so this is the code remember that I’m using specific versions of pandas and – and plotly so I would recommend using the same ones or very close versions to these ones because very older versions or a lot newer versions might not work with this although it should ok so first the first thing you want to do is obviously import all the libraries in order to make this – web app then you want to insert CSV data into your data frame read it into a panda’s data frame and in the next section here I’m actually playing around a little bit with the data frame so in this first line I’m actually dropping some rows about ten rows out of nine hundred and something that has multiple animals in one row and multiple age groups or no animals were found where the Ranger getting to the park answer the call and found no animals I dropped those rows I’m also extracting the month out of this is one of the column date and time of initial call so I’m actually extracting the month out of that time because I don’t really need or want the hours the minutes the days or the year I just want the month so I’m creating a new column with a month and here I’m just making this isn’t that necessary I just want to make it a lot nicer so I’m copying columns and just two new columns with with prettier names or names that make it easier later down the road when creating the plotly graph but again it’s not really necessary okay so I’m starting the – app here and then I’m going into the layout usually it’s one of the first things that you’ll do you’ll go into the layout so this layout has I think four or five different divs section and on the webpage the first dig is going to be the the title New York City calls for animal rescue the second one is gonna be the radio item that we’re going to use and I’m going to give it the idea of the x-axis the 31 is going to be another next section is going to be another radio item is going to be the second one that we saw and I’m going to call it y-axis and then the last section is going to be the graph right here okay so let’s go into the radio item the first radio item so first as you can see I have the label here and then I’m going to go into the

dash components and call the radio items now radio Adams is gonna have several properties and we’re gonna use these properties style value options and ID again you every – component has obviously profit is in them you really want to use the documentation to know what these properties are all about and what other properties actually exist so if you open the link you would go into this Rader item properties and you can see that there are several several of them we’re gonna use the ID which almost all component needs the options property is style and value okay let’s go back to options options we see in this case it’s a dictionary of labels and values and they’re their format is supposed to be a string so that’s how we’re going to do it we want to do is with a string let’s go back okay so the first way to item I gave it as you recall I gave it the idea x-axis you can give it whatever you want but I want to make it easier for myself to remember down the the road what I’m referring to so I call it x axis and the option is going to be the label this is what the user is going to see on the radio item month call made and this is actually the value that it’s gonna it is going to be a string and it’s called month of initial these values month of initial call and animal condition actually refer back to the excel column so each excel column represents the value here animal condition is an excel column month of initial call is an excel column well a copy of it because up here we said monthly initial I’m sorry the module initial call is actually a copy of a date and time of initial call column okay so we have the radio the first radio item with the label the options and now we’re going to set the first value meaning the value that the page is gonna devalue that it’s going to appear when you first load the page so that value is going to be animal condition which again refers to the animal condition column in the excel sheet and the width is gonna be 50% because I don’t want the radio item to be too too large okay so now we’re going into the second radio item right here and we’re going to call it x axis ie we’re gonna give you the idea of x axis and the options are gonna be in this case the options the labels and the values are are the same which is definitely okay it’s going to be amount of animals and time spent on site and the value that’s gonna load automatically is time spent on site and then style with 50% so remember the values that are going to lower matically or time spent on site on the x axis and animal condition on the Masari this is on the y axis and arm condition on the x axis so should go here when you refresh refresh the page you’ll see that animal health loads here and time spent on hours those first okay so we have both radio items they’re not connected to anything yet they’re just radio items the last part is the graph and we’re calling the dash component graph and we’re just giving it the ID to graph it it doesn’t have anything in there yet there’s no bar chart there’s no picture there’s nothing it just called graph and we’re going to fill that in with within the section below okay so here’s a callback the callback is where all the magic happens and the callback is where you really want to define the interaction between the user and the data or the data that the user wants and the graph that’s going to be created because of that choices or that data that the user chose so in this case we’re saying app callback we’re saying that we’re gonna have two inputs one of them is going to be the first input is going to be the x-axis radio item and remember this is the ID of the first radio item and we’re going to say that we’re the property is going to be the value so whatever the user is going to change in the in that radio item is actually going to be the value that is going to be set and the second the second input that is going to

affect the output is y axis for your item and that if you remember was the second radio item ID so we’re saying that it’s going to affect the value if the user chooses a certain value within that radio item this is this is what’s going to be chosen and both these values the the option that they choose from X acts the first radio item and the option they choose from the second radio item is going to affect this output meaning it’s going to affect the figure of the graph in essence what I’m trying to do here is say that when they choose whatever they choose on those radio items the values they choose there is actually going to in some degree build a figure and the figure that we want to build is a bar chart so we’re going to go below and we’re going to build that bar chart okay so under every or most callback decorators you want to have a function you want to create a function I’m going to call it update graph you can call it whatever you want and then you need arguments in there and the arguments in the function are always arguments that refer to the input so the first argument refers to the first input value and the second argument y-axis refers to the second input value in this case is the value I call the x-axis you can call whatever you want it’s just easier for me to connect and remember what this refers to and this refers to but you can call it one two or a B or whatever you want okay so you start the function the first thing you usually want to do is always make a copy of your data frame because you do not want to play around with the data frame inside the function this is what people what you would call a global object because it was defined outside the D F was defined at the very beginning so outside of the callback and you don’t want to mess around with it within the callback so just create a copy and we’ll call it D F F all right so I’m gonna use now I’m going to create my bar chart or at least I’m gonna give it some body and I’m gonna say let’s call potli Express and we’re gonna call the bar method and in the bar map that we have properties we have several properties so again before we go into the properties here always use the document documentation to get a better understanding of what each one of these means and what are the options that you can put in there so if you open the link below the video he was seeing that motley express dot farm has all these parameters sorry not properties and one of them is the data frame the other one is the X other one is the Y and they’re both either a name of a call or pandas series which is actually what we have in the data frame one of the columns you can play around with color and I think I did I’m using also title and a few other things but anyway there’s many many parameters in here and every single parameter has a definition so you’ll know better what it what it refers to and how to what kind of value to put in it is it a string is it an array is that is it a list and that’s how you that’s how you build the bar so this bar chart as we recall we’re going to put the data frame we’re gonna call it DF which is a copy of the main data frame and the X in other words the x axis of the bar chart is going to be x axis x axis is actually comes from here which is the first argument of the definition x axis which is the if you recall is going to refer to the first radio item or the value of the first radio item so whatever they choose the user in the first radio atom will go into the x axis of that bar chart and whatever they choose on the second radio item y axis will go into the y axis of the bar chart so this is just a nice and neat way of saying the same thing as dff let’s let’s say the chose on the x axis animal conditioned column or the excel sheet that’s what they want to analyze that was the x axis so these two things are the same as this but it’s a lot neater to write it this way and this is

how you’re supposed to do it so this is how we’re doing it so we have the x axis we have the y axis from what the user chooses and then we have I wanted to add a title you don’t have to put a title you do have to put x axis and y axis but you don’t have to put a title I’m gonna put one and I want the title to be well I know the title is a string because I read the documentation and the parameter told me is that the title is a string so I’m going to create the string in this case I want it to be the y-axis which is also a string it’s not a list it’s not a racist string and I’m gonna add by to it and I’m going to add the X access to it at the very end and then you’ll see when we’re going to the graph it creates a nice title based on what the user chooses you can play around with it and see what how it works for you or if it doesn’t make sense just take it out okay so these are their parameters as a bar chart and this is actually how it works so let’s save this unless going to the bar chart and take a look of what we just built so this is the x-axis categories that’s the label that I gave it and this is a y-axis so if I’m as a user choosing to see all the months the categories of all the months a call was made I’m going to see January February March April all the way to December and I want that bar to show me an analysis by the time according to or a breakdown of the time spent on site by the Ranger so in this case this column in the excel sheet represents all the hours that the ranger or the rangers spent in a particular month and let’s say this is August tending to animals so we can see that for example in August they spent 200 in about 75 hours tending to animals and in July also I’m about 175 so obviously the summer months are the most active months tending to animals while the winter months January February and all the way at the end here December are kind of a slower months with fewer animal fewer our spend tending to animals and one last example before we go back to the code we can also look at for example amount of animals on the y-axis and we can see that also again the category categories are breakdown breakdown of months but we want to see the amount of animals that were or tended to so we can see that there’s about 150 animals and almost 200 animals that were tended to in August and July while January and February were slower months and which makes sense because it’s the winter what’s cool about this bar chart and plotly is that not only does it represent the total but it also represents every lime presents a call every single line he represents a call and the darker the line the higher they amount in this case so if we’re talking about amount of animals each transparent line is represents one animal in one call but the darker line represents more animals the dark a dead line gets in this case it’s seven here it’s three here it’s five animals so it can tell you a little bit about the average of animals that are attended to for each month for example here in November there’s very few dark blue lines meaning that probably every call was one animal that was tended to while in the month of March or January there are a few more darker blue lines mean that which means that every month I recall those if you err maybe more than one animal maybe two animals or three animals on average okay let’s go back to the code and see what else we can do with a bar chart that’s all bar it has different more parameters than just x-axis and y-axis it also has a way to play with the color which is another way to add another dimension to add to the bar chart so I added I want to I want the graph or the bar chart to do an analysis of all the calls made but also add the color

analysis I’m sorry the borrow analysis I want to see burrows by color and I want it to be bar mode I want it to be group now let’s see what this means let’s go back to the documentation look at bar mode in poly bar let’s find this bar mode all the way down here bar mode there are several options there is group overlay and relatively I choose group which means they are a bar place beside one another so that’s how the colors are going to be divided up all the burrows of the colors let’s go back and see how it looks like the same this way for it to update okay so now we see that we are analyzing the same thing we’re analyzing on the x-axis the animal health or condition on the y-axis the time spent in hours for each health status but it also has a breakdown of the burrows so we can see that for example here from all the unhealthy animals not only we can see on the y-axis what’s a total amount of hours spent tending to unhealthy animals this is about 300 this is about 200 we also see by burrow so we can see in Brooklyn it was only 200 in Manhattan is about 300 hours tended and the green one Staten Island so either there were a lot of your calls or unhealthy animals in Staten Island or or there were still a lot but just just just fewer than other pearls so this is cool you can analyze may different boroughs by different colors but you can also do it in a different way you can do it by analyzing boroughs but in columns so I’ll say this there’s no need to do both it’s um same thing refresh it will seem now columns for each borough analyzing the same thing so now we’ll see we have each column as a borough and we’re analyzing also the the same thing if x-axis is a condition and the y-axis is the time spend 4 hours we don’t have to analyze it this way we can also look at let’s say a month the call was made to look at that and we can see and I want to do month column calling and I want to do amount of animals so we can see that in Manhattan the amount of animals may or calls made in in the month of what month is this in July or sorry August was the highest amount so in August we had about 175 animals that were attended to in Manhattan while while the months of the wintery month still 1 and 2 or 11 and 12 November December war over a lot lower so it’s a nice it’s a nice way to compare between boroughs and between the in this case animal and despair calls for animal in despair between the boroughs here for example we see that in Staten Island the fall was pretty active the fall had a lot of amount of animals that were tended to and less so in in the summer while in the same thing in Brooklyn you see here in Brooklyn that the fall zoom in they had a lot more action or a lot more amount of animals that were tended to then in any other borough all the borough’s have more I guess the Rangers have more work during the summer ok so a last feature we’re going to look into and this code is the layout if you want to update a layout of a bar chart in this case but it could be a pie chart it could be a scatterplot and may apply you want to call the method update layout and that also has different parameters again user documentation because there’s a lot in there and you can update many many things so for example here on update x-axis and we run updated title so what are my options within those updates go into the reference guide and you can see the x

axis here I clicked on it and I looked for category order which is what I want to update because I want the chart to represent X access categories going up from the lowest amount to the highest amount and not alphabetically or numerically so I just looked at all the options here there’s total ascending or descending mean descending and this is what every option mean total descending if the order should be determined by numerical values so I know that this is an option and this is how I actually need to put it in the graph or in the in the code so then I go back here and this is what I put at access it’s a dictionary that’s what it said in and go back and show you category by our access enumerated where does it say that it’s a dictionary I don’t think it says it here but it should anyway so it’s a dictionary this case of category order and I want it to be total ascending same thing with title you should go into the documentation you’ll see it has different options I’m what I want it to Center the titles it’s right above the graph and not to the left or to the right and this is how you Center a title using these these things so there you have it Oh Oh before that I’m returning the Bart right this is one of the most important things I can’t believe I almost forgot this so I built I built a bar chart the object I’m updating the object and now I have to return something from the function whatever you returned in the function this is very important to remember whatever you return in the function is always always refers to the output so in this case the component property of the output in this case and we’re turning the figure if I wanted to return something else maybe whatever I wanted to return will depend on the output so remember every week everything you returned in the function always refers to become the output the component property of the output which in this case is the figure remember this figure is tied to the component ID the graph and it’s right up here which is own section and this is the client ID so I’m going to whatever I’m attorney which in this case is the figure is going to return right here under the radio items and layout and this is how you close or execute your your web app so I’m glad you enjoyed well I hope you enjoyed I hope you learned a lot from this if you have any questions or you want to see something else built please feel free to comment below and let me know what you want or what you enjoyed or enjoy less or how you think I can improve because it’s only based off of your feedback that I can actually or improve the fastest and know what you want or what you need and feel free to tell a friend about about my channel about what I do I really want to I’m trying to build my own channel I’m trying to help people just like you learn more about dash and how to use Python to create cool data visualizations so the best way to do that or what would be more very helpful for me is if you tell a friend about me or just subscribe below it’s completely free and it really helps me do what what I’m passionate about so thank you very much and I’ll see you next time