Welcome back to Charming Data everybody. In this tutorial, I’m going to give you an introduction to Dash. This tutorial is going to save you hours and hours of research and coding, trying to understand how Dash Works. Dash is a wonderful library framework all in python that allows you to build interactive web application Dashboards. The goal of this tutorial is to show you how Dash is used to create all kinds of analytic web applications: anywhere from financial to web-based to machine learning to medical, and manufacturing dashboards. Everything can be done right with python. You don't need to know CSS, you don't need to know JavaScript or HTML, all in python using Dash. So here are a few examples. You can go to the Dash app gallery and this is the link below the video. I think it's the second link, so just open it up and you'll see all these different applications that can be built with Dash. I’m going to give you a few examples. Here this one is obviously a map-based application where you can look at… You have a slider or a Range Slider where we can change the different years, and you can change the Histogram. The next one is a financial web Application. You can focus on it and change the minutes of how often this updates with the stock market. The next one is machine learning object Identification, I think, so you can change the frames, you can zoom in and change it to pedestrian, you can zoom in and see more things. This one is a famous medical one that The Dash, the Dash team built. And that you can also play around with. So these are great examples of web application Dashboards that Dash allows you to build. What we're going to do next is, I’m going to teach you the theory behind Dash and the most important three pillars of Dash that will allow you to understand how to build these kind of applications on your own. So, the three pillars. One Dash components. Dash components are anything from the Slider, the Check Box, the Date Picker the Dropdown. All these Dash components are components that you need in order to create an interactive capability inside your data visualization Dashboards. So, for example, here this is something we are going to do today. We're going to create a map connected to a Dropdown. The Dropdown here is considered a Dash component. You can find more information about the Dash components on this website, also below the video. Dash Core components and Dash HTML components. I don't use a lot of HTML components. I'll use sometimes a button and I'll use the Div but most of the things you're going to learn in my tutorials and throughout this channel are the Dash core components. You'll learn about the Dropdown. I have a video on that. We're going to have to use the DCC graph to put the graph in there. The, the Radio Items, the Slider, there's many different components that we're going to review over time. Second, Plotly graphs. So, Plotly graphs are graphs, charts, and other types of data visualization plots that allow the user to visualize data. So, they arrange anywhere from the MapBox, the Scatter plot, the line chart, the bar chart. All these different graphs you can actually find here in the third or fourth link below the video. And this is the Plotly Python page where you can go and learn all the different graphs that you can create with them. They really have a nice library of graphs, so I recommend using them and learning how to um how to code them. We are going to go into the maps and we are going to create the Choropleth map today, so go into the maps here and click on this, and we are going to create this today. Third, the Callback. This is one of the most important elements because the callback connects between the Dash components and the Plotly graphs in order to create an interactive capability. You can find more information about the callbacks here inside the basic callbacks in Dash which is this link right here also below the video. I would encourage you to read more about this after the video so you can understand more about it and try to manipulate and add more features to it. So one thing that is important to remember is that the components and the Plotly graphs are all going to go inside the app layout that we're going to look into very soon very shortly. And the callback is outside the app layout. We're going to do a real live example here today with the Dropdown Dash component together with the Choropleth map and connect them both through the callback. What I hope is that once you learn how to do this: the basics of the Dash components, the Plotly graphs, and the callback and how to connect everything, you'll be able to create any type of web application Dashboard that you want From the simplest one, with practice, you can also create all the way up to the most complex ones. So, let's dive right into the code and see how we do this. So, the data I’m going to use is going to be data on Bees. I want to raise awareness on bees. I think bees are very important, I know bees are very important and Sadly, they're dying in the millions and I, Um, I hope we can figure that problem out so to raise awareness, we're going to use data on bees from the New York… U.S. Department of Agriculture. This link Is, this data is below the video, just make sure to download it. You'll see we'll look into state, we'll look into what bees are affected by, either disease or pesticides and so on. What percent of colonies are affected by each disease? And then the state code so we can put this on the Choropleth Map. Make sure that your data is… csv document is inside the same folder where the code is. So, the code is right here and this code is called “intro.py”. Below the video, just click on it. It's in my Github. Go to the Github, download this and open it so you can follow along. So, this intro.py is inside the Dash introduction folder. Make sure that your csv excel sheet is also inside the Dash introduction folder so we can actually read it from there. If Not, you'll just have to create a path here instead of just the String. All right, let's get into it. The first thing you want to do is you want to import these libraries. If you do not have Dash, just pip install Dash. It's as simple as that, or to create your own environment just pip install Dash 1.12. Um, if you're not sure how to do that, just go into and click on the video card above and go into a virtual environment with Anaconda. I will show you there how to create a virtual environment with Anaconda and installing Dash. Takes about five to ten minutes and you're up and running. So, we have the Dash library, we have the Plotly library, and we're going to use the Pandas library. Then we're going to start the app and after we start the app Typically, the first section of the code I import the data and I clean the data. I’m going to use a CSV bees excel document but you might want to use SQLite here, you might want to use PostgreSQL, or different types of databases or an API. However you get your data, I would recommend getting it in here, in the first section of the of the code so it's easier to work with later on. So we're going to do the CSV document. We're going to import it into… read it into a Pandas data frame and then I’m just going to group by the data frame um… I only want these columns, and for each one of these columns I’m just going to get… Well, for all of them I’m going to get the percent of colonies impacted, the Oops, the actual mean, the actual average of the colonies impacted. I’m going to reset the Index so it’s all like lined up, and then I’m just going to print it out so you'll see how it looks Like. Actually I did print it out so you can see. I printed out the first one. So this is what it looks like. State, Alabama, those are the first sates and then we have affected by, the year, affected by Disease, the state code, and the percent of colonies impacted for that year that disease in Alabama. Play around with the data and print it out in different ways if you want. So, this is a section of the data. The next section, which is probably one of the most important sections in your code is the app layout. App layout starts from Here, right, all the way here, and it closes Here. So, all this app layout… Remember, the most important thing you need to know: what goes inside the app layout is your Dash components and with the graphs, the Dropdowns, um, The, the Check Box, and any any HTML you need in there. So in this case I’m going to put HTML H1 because I want a title for the webpage and I’m going to put a break line here because I want a space between the Div and the graph. I mean, all this you can find as a reminder… oops, it's in a different, right here. Go back to the callback, to the Dropdowns, look at this, and this is where I took it from. So I see the dropdown here and I see all the parameters that the dropdown has and all the references that the dropdown has right here, right! so this is how you use a dropdown. If you want to learn how to use the, the graph ,you can click it here, and the HTML you also have here. You can look at HTML Div and what that Means. So, I’m really trying to give you the documentation because if I only teach you how to do things, or only give you the example code, I feel that it won't be, it won't be enough. I want you to learn on your own, how to do your own research, and how to read the documentation so you can then go and create your own, use your own components, um, use the other HTML components and create other graphs that don't have a choropleth map in it or have a Check Box instead of a Drop- down. So, I took the HTML, h1 HTML goes, comes from here, remember HTML, HTML components. So, I took it here and I put the h1, which is a typical header, and this is going to be the title of our webpage, and it's going to be aligned to the center of the page. The dropdown - we'll go over that in a sec, then we have the Div. I’m going to put here just a general id and then we're going to have, we're going to spit something into the “children”, something is going to go in there and right now there's nothing in there; it's just space. Here I have another space and here here I have a graph. There's nothing in the graph right now, it just has an id but something is going to go inside the Figure. And that “something”, as you probably guessed, is going to be the Choropleth map. But right now there's nothing in there. The DCC dropdown – so, the parameters. Here are some of the parameters. If you want to learn more about the dropown, just click on the video card above and you can learn more about the dropdown and all the parameters it has. But here ,you only need an id, you need the options that the user is going to see, and and the rest. So, just a quick breakdown. Label, the key label, and the value 2015 is actually what the user sees, okay? The user is going to see these values. Now, here we have the key called “value”, and the value for this key is 2015 and 16, but they're an integer mode, and why? because this data comes from the excel sheet, well, the Pandas data frame. I’m going to connect the dropdown to the Choropleth map, using the Pandas data frame and inside the data frame, I already showed you, I have the years. And the years are an integer mode, as you can see here, “Year”, they're in integer mode, so I didn't put, put them as a string, I just put them as integers. Very important, this part of the, of the dictionary inside your options always has to have the, the value, how it looks like on your on your database, on your API, or on your, on your, uh on your data frame, on your Pandas data frame. Okay, so we have the options, um, of the dropdown, and we have an empty space here and we have an empty Graph. So if I just run this, and I hashtag all these out because I don't want to see this. And I just run this here, let's see what we get. Remember, I only have the app layout, nothing else. What we get is this... Okay. We get just an empty graph because there's nothing in there, just a dropdown with the options, but if I click on the options it doesn't change anything, right? because they're just empty options. In order to create a full Dashboard we actually need to connect the Dash components with the graph that are inside The, the app layout here. So we have to connect all these together and we're going to do that by using the Callback. So, let's go forward and do that right Now. And see how everything is connected. Okay, so the callback. The callback is going to use the IDs and the “component_property”. The component id and the property in order to connect the, the two or three things. The first thing you're going to do is you're going to put… you're going to have… A callback has an Output and has an Input. In this case, we have multiple Outputs. We have two Outputs because I’m going to output information into my bee app and into my output_container. My bee app is the component_id that belongs to Graph, as you can see here, and my output_container is a component_id that belongs to this Div. So, whatever information we're going to output, it's going to output into these two, these two things. And it's going to output the “children” of the “output_container”, right? Because there's a “children” here. So, in this case, I think it's just going to be text, and it's going to output the figure of the component id “my_bee_app”. It's going to output the “figure”. In most cases you won't see this. This will be just… a close right here, and this will be closed right here like that. But I created this just so, for example purposes, so you can understand where this information is going to go. So, this information is going to go in here and this belongs to this, all right? But what's actually going to go in there? Right now we don't have anything. Let's take a look what's going to go in there. What's going to go in there is the Input. So the Input, the component_id is the selected year. So, what is the “slct_year”? Selected year has to do with our dropdown, it's actually our dropdown. And the dropdown has values. The initial value is going to be 2015 but the user can change that. Initially it's going to be 2015 and that value is part of the component property, “value”. So 2015, we want, I want Dash to work in a way that 2015 helps filter the data, change the data in a way that it outputs a “figure” and outputs something into the output_container, like the “children” of the output_container. And this is what you need, this is why you need the function definition of the callback, or the Callback Function. So, this is very important: under each callback you're going to have to put a function and define it. I’m going to call it “update_graph” and you're going to have to have arguments in it. If you have… Each argument connects to an Input, so if you have one Input you have one argument. If you had another Input here below, like this, then you would have two arguments. Right now, we only have one because we're only taking information from the dropdown and this argument always refers to the component property, so this argument refers to the “value”. it's going to… whatever I put… Whatever the user is going to choose in the dropdown, let's say 2016, is going to appear here as 2016. Right!? Now, this is “value” but later on, when you become more of an expert, you can change this. You can take any component property. The, the “slct_year”, the dropdown has many different properties. Um, it has “value”, you can take “multi” if you want to decide that you want to change that to True. You can change your “options”, you can really change anything you want. That's what's so cool about Dash. In this case we're just going to take the “value” to to input information into the graph and into the Div. Okay, so we're taking the option that's chosen by the dropdown. I’m going to print them out here, just good practice because I want to see what it prints out, what type of value that is and what the value looks like in case I forget or I have a million different values. And then I’m going to say a “container”, create an object, I’m going to say “container” is equal to this string, “the year chosen by user was”, and then formatting it with the option selected. So, remember, this is the year selected, so once the user chooses a year, they're going to have a string that goes in here and it's going to go Into, it's going to be called, it's going to be held in the “container”, and the “container” is going to be returned. I do nothing here with the “container”. I don't touch this. I don't do anything. Right down below I return the “container”. Now, because I’m returning the “container” first… Well before that, I’m returning the “container”, so you can see if I go here, where is it? “container”, the year chosen, you can see if we go to here and we refresh this, that we will get the year 2015, and if I choose 2016, it will say: “the year chosen by user was 2016” Right?! because that's what I outputted inside the “container”. This is inside the “container” and I and I returned the “container”. Very important to know, remember, listen to this very carefully because it took me hours to understand this. What you return here is actually going into the Output, Right?! You have two Outputs: first one is the output_container “children” and the second one is the “figure” of the bee map. So the, so what you return, you're going to have to return two arguments: the first one is going to be, or two objects, the first one is going to be the “children“ and the first one… the second one is going to refer to the “figure”. So I know I only want to return the “container” as the first option and that's why, when I return here, I’m returning to “container”. The second I’m returning the fig, which refers to the “figure” here. All right, so remember two Outputs, you're returning two things, three Outputs, you're returning three things. And the argument of the function always refers to the Input. All right? Okay so we saw how we returned the container. Now we want to return a “figure”, right? so let's go ahead and build a “figure” so we can return the choropleth map. So the first thing you want to do is make a copy of your, of your data frame, the data frame that you filtered all above the app layout, you want to make a copy of it because you don't want to play around with it inside the function. Only play around with a copy of the data Frame. and the copy is going to be “dff”, and I’m going to say that the option that the user selected 2016, or 17, that's going to filter out our data frame rows. So, I’m only going to take rows with the year that the user selected. Let's say 2016. so now the data frame is only going to have rows of 2016 in it. By default, remember this is 2015, right? If the user doesn't choose anything, this is 2015 because here it says “value” 2015. So we're going to choose those rows for 2015 and then I’m going to say no matter what the user chooses, I only want rows where bees are affected by Varroa mites. It's a type of disease, it's a type of mite. I only want those Rows. I don't want the other diseases. So now I have my filtered data frame and now I’m ready to use Plotly Express to, um, to build a Choropleth map. All these parameters for Plotly Express, inside the Choropleth map, you can see in the documentation here, also below the video, um, Choropleth map; actually, let's go one back. Go here to Plotly Express. I’m going to share this link in the video, and these are all the different graphs that you can create with Plotly Express. Very important because you need to know the parameters you're using for each Graph. We're going to go to Choropleth map here, and these are all the different parameters, parameters that are being used. In this video I’m only going to use a few of these parameters but click on the card above if you want to see the Choropleth map video where I’m using a bit more parameters, or you just see a different version of how Choropleth map is used. All right so one second, I’m dying of thirst, probably because I’m drinking coffee, um… Okay, so we have the Choropleth map. This is how we call it, px.choropleth. Remember, px is way up here, how we imported Plotly Express. px. Choropleth, and now I’m using these parameters, right? I’m not going to go over each parameter, the most important ones are just that I’m using the dff, the data frame that's filtered already with the user options chosen. I’m putting, I’m going to say the “scope” is going to be the U.S., the “locations” is going to be “state_code”, so remember on the, on the pandas data frame from the excel sheet, it has “AL” for Alabama, “AS” I think, for Alaska, so that's how it knows um, how to put the information in there. Um, and once you do this, once you finish with this, now we have… you actually have everything inside the figure, and because the figure is ready, then you just have to output it, right?! Remember, this is the second Output, this is the second return object because the outp… uh, the figure was the second Output, right? A tip! if you only have one Output, take out the list. Don't use the brackets. If you only have one Output, do not use brackets. But here we have two, so we need to use the list. All right, so let's see how this looks. So now we have a year, we choose a year, 2017 and the color of the graph changes because I’m returning a new figure based on a new Year: 2018. And you can see a new figure. Um, I think there was something I wanted to tell you here about this. Uh, to the… Oh, by default, if you load it you'll see that it's two thousand, 2015. All right!? Hawaii is really suffering from varroa mites. There's 52 percent of bee colonies that Were, that died from rural mites in 2015. Anyway, so we created a cool graph using Plotly express. Now, if you want to, you can also use Plotly Graph Objects. Most of the things are used right now… I use through Plotly Express but I’m going to teach you how to use Plotly Graph Objects. Just hashtag this out hashtag this back in, and there you go. So, you can use Plotly Graph Objects by, um, like this. The documentation for Plotly Graph Objects are right here. Go to the main, go to the main um, uh Plotly graphs page. Remember, we saw these all these graphs, we went into maps, and then we went into the Choropleth map, and inside the Choropleth map you'll see different examples of things you can do. Some examples are written with Plotly Express. Come on, it's kind of slow. Um, see, this is written with Plotly Express and some examples are written with uh with um… with Graph Objects but not as many as before. Um, and then at the very bottom, you see, this is written I think with the Graph Objects or figures… Yes, Graph Objects, and at the very bottom, always go to the very bottom, you'll see references. Where is it? Here we go. So, go in to click on references and this is where you'll see all the different parameters that you can use within Plotly Graph Objects. It's just two different ways of building, building graphs. You can either use Plotly Graph Objects that was initially built by Plotly, but now they made things a lot faster and a lot quicker, and simpler with Plotly express, so I would recommend using uh Plotly Express uh whenever you can instead of Plotly Graphs However, there are certain graphs that can only be built with Plotly Graphs and in a few years - Graph Objects - in a few years from now this will probably be a nice uh nostalgic data point, to see how this was created. But most of them can be created with Plotly Express. If you want to use Graph Objects just make sure that you do it this way: You “go.Figure”, you put the data, and then that equals list, and in the list you call the method. It's “go” dot Choropleth or “go” dot Scatterplot or whatever that is. Right!? And then you can update the layout right here. Perfect, so we just learned how to create a web application Dashboard with Dash. Remember the three pillars: Dash components Plotly Graphs, and connecting the two using a callback. If you know this, you’ll know how to create from the simplest to the most complex Dashboards, with python alone. If you like this tutorial, make sure to hit the “like” Button, make sure to share with your Friends, make sure to subscribe below and turn on your notifications for this channel so every year… every year, every week, hopefully, you get a new notification of a new video that I bring out to show you how to manipulate Dash and how to create different data visualizations. The challenge. So, every video I try and create challenges for my users so they can actually get to practice what we've just learned and create more complex or more interactive graphs. So challenge A that I have for you, and the solution for the challenges is going to be in the comment below, the first comment I’m going to put the solution on my Github. Try to solve the challenge on your own before you actually uh look at the solution because even if you Fail, the practice will help you a lot. So challenge A is to use the Plotly Express to plot a Bar chart instead of the Choropleth map. The x-axis should represent the states and the y-axis should represent the bee colonies. So let's look at how this might look like. So this is how your final web application Dashboard is going to look like for challenge A. You're going to have a Bar chart with the states here, the percent of the colonies… of bee colonies here, affected by I think Verroa mites or whatever the default is in the year. You can actually go in here and focus and do more of that. All right, challenge B. Use Plotly Express to plot a Line chart instead of the Choropleth map. Now this is going to be a bit more complex. The x-axis is going to represent the Year, the y-axis is going to be the percent of bee colonies so that doesn't change. The color will represent different States: Texas, New Mexico, and New York. And the dropdown options should be a list of things that are affecting bees. So now the dropdown is not going to be the years. The dropdown options that the user is going to have is different things that are affecting bees. The disease, either mites or pesticides, let's see how this looks like. So this is your final Line chart product for challenge B. You're going to have the different states here, oh I put Idaho, but you can put Texas, New Mexico, and New York. Each one has a different color, with the y-axis and the x-axis, and the the the dropdown options are different types of things that affect bees instead of the different years. Try to solve this on your own, if you don't get it, the solution will be inside in... in the first comment, so you can, um, so you can see how I've done this. But practice makes perfect. Before I let you go, I wanted to show you this Plotly Forum. This is a great community of Plotly and Dash where you can create your own account. You'll have… you can create a new topic. If you can't find the answers for any of the things that the people have asked before, you can go into the category of Dash if you want to focus on Dash. Here I am, so you can ask me questions as well, but I recommend: most of the questions that you probably have, people have already answered, so just search for it using this or just search it on google and Plotly Forum, and um and if I see a question by you I'll try and answer you as well as other community members. Good luck, try hard. I hope you enjoy the process and that you get to build beautiful charts with Dash.
