Building Dashboards with Plotly and Dash

Key Takeaways

[Music] [Music] hello everyone and thank you for joining today's Cod along my name is Rees and I'll be your moderator to State we're going to kick off today's session in a few minutes at the top of the hour we're just waiting so everyone has a chance to join if you haven't already uh make sure that you register for this session uh you can do so by scanning the QR code that's on screen I've also sent the link uh to the registration page in the chat as well and you can also head over to datacamp / webinars where you'll find this session as well as all of our future sessions as well we've been building out quite a lot of our April events so yeah have a have a look and see if any of those interest you also these code alongs are free on YouTube but we do take payment in the form of likees so please do like the video and check in with us uh yeah by liking the video please and thank you all right for the Cod along portion today uh you can have a look through the resources everything's in browser there's nothing you need to sign up for um so yeah it's really easy to interact and cod along with us today so yeah feel free to check out the resources we've got the slides in there there's also a link uh below the slides which which is what we're going to use for the code along so yeah if you're interested have a look at those now and yeah get those up and we've also got some uh special resources from plotly as well in there as well so have a check out the resources they're pinned in the chat and also in the video description hello everyone and thank you for joining today's code along my name is re and I'll be a moderator today we're going to kick off today's session in about a minute or so we're just waiting for the last few people to join if you haven't haven't done so already Mak sure you register for this session that means we can send you the recording and the resources as soon as uh we've got them in our Resource Center uh you can scan the QR code that's on screen now you can find the link to the registration page in the chat and you can also head over to datac camp.com webinars where you'll find this session as well as all of all of our future sessions as well we have got plenty of our April sessions up so have a look at those and see what takes your fancy there in terms of coding along and interacting with us live today check out the resources link that's pinned in the chat it's also in the video description that's going to cover the slides as well as uh some extra resources from plotly as well as the link so that you can uh join in with us on plotly as well so yeah any questions let us know in the chat we are going to be answering your questions for the last 10 minutes of the session so yeah please do get your questions in the chat and we'll be uh we'll be going through those during the last 10 minutes of the session but I think that's everything from me so now I'll hand you over to your host for today's session Richie Richie please take it away hi there data scamps and data champs this is Richie all right we're going to kick off in just a moment's time in the meantime please do let us know where you're joining from in the chat first of all I do have an announcement for you so we are two weeks away from the radar virtual conference so if you not signed up for that please do uh make use of the QR code top right of the screen to sign up for that I'm feeling very pleased with myself on how many like data and AI Legends we got to come and talk uh it is going to be such an amazing event uh you don't want to miss this one so yeah please do sign up for that all right wonderful uh Harris says how do you in the chat howy Harris howdy to everyone else who was uh joining us today all right and with that uh let's kick off off so uh there are many tools for creating data visualizations and dashboards but if you're a data analyst or you're a data scientist most of them have a really annoying problem they're just a different tool to what you're using for your analysis so if I'm crunching data in Python then I really don't want to have to switch to another tool in order to display my data so this is where plotly comes in it's a python data visualization tool and then Dash is a python dashboarding tool so by using these you can complete your whole analytics workflow with just one programming language simplifying your life so today you're going to learn how to draw some plots and create some dashboards using these tools Our Guest is Adam schroer he's the community manager at plotly so we're going right to the source and his job is to help people learn data visualization uh so uh as a community manager you just make sure that the python community is comfortable using plotly and dash and in addition to his work as a community manager Adam also teaches uh plotly and dash on YouTube as Charming data you also callor the book of Dash uh to provide another learning method for people who are interested in the technology and uh sneak preview here is also involved in the development of a new series of data Camp courses on plotly those are going to be live this summer so please do watch out for those all right uh with that uh take get away Adam thank you Richie I see some people on the on the platform data Camp session chat um saying hi to me so hi back to everybody hi Harris Eric uh thank you for joining us um rich thank you for uh the invitation uh thank you to data Camp um for having me here I'm really excited to be talking about uh plotly and dash and this wonderful uh Library that we have uh so this is what we're going to do this is what we are going to do today let me see bring up the agenda um so first we're going to see a few AI app examples because I want you to see what what's possible um with the open- source libraries of plotly and dash then we'll go over plotly we'll do a brief introduction to plotly graphing librar to understand what that is we'll go over a little bit the databas best practices when you're building a dashboard what you you want to um what you want to focus on and what you want to keep in mind uh we will then go over Dash uh because it's slightly different than than plotly it's what allows you to build a dashboard uh a Dash app structure uh in during these plotly and dash introductions we're going to have some quots I'm going to give you uh a link that you can actually build some plotly and dash apps online and then uh Dash Enterprise uh information and a resource list at the end uh feel free to ask questions along the way um either Richie will feed me these questions I might have time in the middle to take some questions but for sure at the end we should have about 10 minutes or so I'll try to answer questions as well all right so let's look at some AI app example what's what's possible with um with plotly so if we go here click on the objection detection link this is just one of the apps well you have a slideshow but you you don't have to click on it right now I want you to stay focused right here so I'm just going to show you uh here's this is using some machine learning in the back end uh the front end the UI is Dash right uh we're looking at a random image here uh and then we're categor the machine learning is categorizing um the images right this is a 94% truck confidence 9% confidence it's a boat and a car and so on and so on if you can remove the threshold confidence it's probably not going to be as as as confident or as accurate let's try another image for example run a person a person and a frisbee we can really lower the confidence intervals and uh this should change a little bit oh I think we have to run it like this but a cool app look this doesn't obviously zero confidence doesn't mean a lot but this is one example another one that a Community member created is is a quiz along is this is all Dash right we're not using plot Le we're not using a graphing library library here we're just saying give me a qu a quiz about the Mars planet quiz quiz me so it's going to what topic you want Mars planet it's going to ask a topic you want to create a quiz about generate the quiz it's going to generate a quiz from an AI I think it has open AI in the back end and um it's going to generate the questions right is I we didn't decide on the hard the level of the quiz we could have said it's hard or easy um and now we just have questions of the AI creator for us what is a temperature average temperature in Mars I think it's this seems right to me good what is the largest volcano on Mars I have no idea let's choose Bon mons and you'll get say Incorrect and so on and so on until you reach the last question and then it'll give you the overall score again this is all open source Dash with AI large language model I think it's open AI in the background you can actually look at the GitHub here code and you can um read more about what llm it's using um it's actually the data breaks URL connected to an LM one last example of uh plot Le and dash what's possible with open source uh we have this beautiful app that was created for one of our app challenges we do every two months we do a poly app building challenge this challenge was around the Michel Ling guy the restaurant gu guide to create an app on top of that data set so you see here beautiful um pie charts and uh bar charts um I think this is using a COR map if I remember correctly nope a scatter map of all the restaurants according to their score we can just focus on two star restaurants it'll give us the hover and so on and so on and then this person also added uh an llm into it I don't remember what llm but if you go to the GitHub it will tell you I think it was using the data um uh CLA I'm not sure but here you can ask any question related to Michelle data it will answer that question or you can ask for recommendations right I want a a restaurant I don't know in the C buen atis I don't describe what kind of restaurants you're looking for I Spanish food maybe a steakhouse I've never tried this before let's see what it does and it's interacting with llm it's actually executing uh The Prompt and we should have an answer here I found some options based on your preference for stast and bronos ciris and it gives us all these options from uh the data set that they pull into this into this app so really cool things you can do a lot with plotly and um op Source uh Dash you have this link right here which I'm not going to go over but you can look at it from the slides this has all all the different apps that have been well not all the apps but the apps that we are proud of that the community created um that you can take a look at they're pretty amazing apps here all right so what is plotly you you know we talked about plotly as as a and Dash as a as a graphing library and data app but plot Le is a company as well right that built that is the owner and creator of plot Le and dash plot Le glance so uh one second I lost my okay there we go so you probably know us from our data visualization libraries uh but we've also been a company in the market for just over a decade and we contribute immensely to open source uh in fact our open source uh Library um plotly has been downloaded over 500 million times and in addition to plotly data visualization our Open Source Products also include interactive dat data applications such as Dash now to give you a sense of our uh reputation I'd like to point out a recent survey of 10,000 datab brick customers conducted by datab bricks who's one of the leading providers of data science and machine learning Technologies they survey surveyed uh the people and the survey that they released earlier in in June of 2024 show that plotly Dash as a data framework is the most popular data in AI product within their population of customers you see this Orange Line like double the others um so pretty cool there here are some of the clients that are using Dash Enterprise this is the the that sits on top of Dash open source to build their data apps and dashboard with within their companies all right so plotly graphing Library uh I'm going to explain a little bit about that but in the meantime I would like you to open click on this link right here it says wm- versal doapp you should have it either on the sides that we share with you or you should have it uh in in the theeta camp um chat here on the platform um but this is what you should you should um you should see you give it give it about 20 seconds to load but what it it is it's web assembly it's installing the necessary libraries online on the on your browser so give it about 20 seconds um and then click on the examples dashing 20 because it will by default uh create or upload a different example I can't remember which one but you want this one you want the d uh cross filter it's going to do the first one but you want The Dashing 20 code which looks like this and then just save and run you have to click on save and run and you should see this on the right side so we're not going to use this yet we're going to use this in a second first I want to explain what plotly is plotly is a graphing Library uh plotly is an open source graphing library that you can use to over 100 different graphs so the website is right here pole.com Python and you can see all the different graphs here divided into categories that made sense to us right the basic charts statistical charts you can actually click on more statistical charts and get all of them each section you can enlarge and click all of them right facet and trist plots we have scientific charts Financial charts math AI charts bio bioinformatics and uh 3D charts and sub Lots we tend to use most of if you're just starting out with data visualization you're probably just going to mainly going to use the basic charts and maybe some statistical charts with time depending on your area of interest you might explore and expand to other charts like maybe the financial charts or or maps that you can see here so this is plotly this is the graphing library now we have the pla Express you don't need to click on this right now but this is like all not all but the major parameters of each and every plotly Express graph so if I want to build a scatter plot what I would usually recommend is okay I have a data set and I want to build a scatter plot so let me go into the basic charts let's go into Scatter Plots and you'll see many many different examples of how to build a poly Express scatter plot right this is just building creating the data in line but you might have data that you're calling in from Excel sheet this we're calling in from the poly Express IRS data set that we have built-in data sets and you see it's one line of code and you have your um your scatter plot we have the data frame that we're going to use after we Define scatter plot we have the Define the x-axis like what column from the data frame will be assigned to the x-axis and what column from the data frame will be assigned to the Y axis so these are just column names you can hover in you can do a lot with a plotly graph but you might want to do more with just x-axis and y axis you might want to add color you want want to add a hover data parameter a size parameter that is why I recommend this second link which is a plotly Express API reference right here so here we went into the scatter plot there's all the other plotly expressed plots we went into scatter and we saw all the different not all of them but I don't know a nice amount of of properties that go into the scatter plot when using plotly Express and you can read about all these properties it's important because here you know that the X will be a string or an integer or a series you know the hover name or let's say text will be a string or like a a panda Series so you can't put in here a dictionary on in in another case this parameter the labels to change the naming of the labels it has to be a dictionary so you can't put Here regular text or a list it's important to to know at least the top five or six parameters because they're often used in in in most charts and then we have the figure reference this goes into a lot more detail this is after you've gained some confidence with Po and you're building um more customized charts you can go into all the parameters on the scatter plot this is under the hood you have like hundreds of different parameters that you could you can play around with all of these exist inside of here but this has more the difference is these are coming in from the like the the graph objects we call it PL plotly graph objects all the different parameters and this comes from plotly Express so it's almost like caborn how it sits on top of map plot lib with M plot lib you can have access to many many different things in customization and then caborn is a lot you know shorter same thing poly Express is extremely powerful one line of clode with a lot of parameters that you can uh use and Define and shape your graph but if you want more parameters we have all of them right here everything you can the legend width the opacity uh the the Z order and many many different things that you can the text position on the graph so this is like for more advanced stuff when you want to really customize your graph so let's let's practice a little bit if you open this already um Rich if there is actually while I'm presenting I can't necessarily see like what's going on in the chat or thing so there's a question you want me to answer just let me know but please or if they're you know facing issues just let me know but here yeah we're good to continue for now perfect so here we have our web assembly right hopefully it opened up for everybody remember it takes about 20 seconds to download everything install everything in the browser and this is Dash we're going to go over over Dash in a sec this is how we display the graphing the layout we see we have our graph here the figure that we built fig is the histogram so we dis it right here what I'd like you to do you don't have to change anything I would like you to create another column another line of code right here on on line 30 DCC graph we'll give it a different we can erase the ID it doesn't matter erase the ID you don't want the same ID and we'll call it fig one and I want you to build this fig one right here fig one equals poly Express whatever you want it to be so go to the uh plotly.py dopy plot. python plot.com python sorry plot.com pick any any any graph you want and just paste it in there let's let's try this one for example import plotly Express we we already have plotly Express yeah we have prob so we don't have to import then we're just going to we don't need to fix show we're going to do the in dash we're just going to do this copy the first two lines of code so the new DF is equal to I will'll call it the FF so we don't get confused with the other one this data set um we're going to build a line chart and we'll call it f fig one and then we'll we'll display the line chart right here so we'll click save and run oh comma we have to have a comma here save and run and now we'll see now we'll see what is happening all right live expect see um dff oh yeah I gotta gotta make sure I'm um consistent if I change the name of the data frame to dff then this should be DF right here all right so we have our histogram before and then we have our line chart so this is how we display a plotly Express um line chart or graph figure inside uh our browser we have to assign it to the figure property of our of our graph component but I just wanted to get a little B practice you can do you can do this with any graph that you want plot Dash is built on top of plotly Express right so I'm going to give you one minute to try this and I I'll try to see if there's any questions add a different graph a line chart a bar chart maybe a scatter plot don't use your data yet this we'll we'll see this later don't use your own CSV sheet on your own on your own um Jon file just use a data set that's pre-built that comes in with uh with uh with poly Express for now like the Gap minder right you can copy all this and try to insert it so try to insert it into wasam Dash and see what happens see how it works and then you can always change things once you insert it update the the y- Axis or the x- axis based on what the data looks like I'm going to print dff head so we see what the data looks like save and run oh God this is very small let's make it a little bit bigger in the meantime try to try to load a separate graph in there not sure why I couldn't get this bigger ah it worked before okay let me just make sure you can see all this okay so let me see if there's any questions when trying to load a different graph in there Harris was saying technically I find their visualizations are unlimited when you going to traces yes we have many different traces um welcome a meet uh loading ready to start good we need more components in charts paa yeah all right good so I'm glad it's been working out with for everybody again if you have any questions please please paste them in the um in the chat um but this was an intro into plotly right how to use the graphing library to to visualize different um figures now before we go into Dash I just want to go on like data Vis best practices there's something called the four C's clear clean concise and captivating these are schafers for C's a very common term in the world of data visualization is schaer for C's people are generally very good at detecting patterns and structures with their eyes they're also very easily distracted so as a rule of thumb your audience should be able to get the message within the first 5 Seconds of the graph right if I'm looking at a graph a pie chart or let's say line chart within the first five seconds as a rule of thumb you want them to understand what they're seeing here without having to really read annotations and too much into it to achieve this your charts and figures should be clear clean concise and captivating right these are so-called schaer fores of data visualization now clear means easily seen sharply defined um think about your audience right if your audience is very technical you can have a more technical graph it's or less technical then then make sure you're speaking to to your audience and the message you have to try to answer the question they might be asking themselves with your graph has to be clean right thorough complete unpolluted don't have too too many things on the on the uh on the visualization also concise uh brief but comprehensive right make it easy to conceptualize the the point of the visualization you don't have to you don't have to make it to verbose right um if x- axis says I don't know if this is time or is it here seple WID this is this is perfect right instead of saying the the width of the seple whatever plant no you can just say seple width right uh here you can just say all using the same example here if there's other example Nation perfect concise you might not even need the nation here because people know that South Korea China and Canada are nations so you can remove the x-axis title and this is count but count of what right maybe metal count so it's more so it's more clear and then captivating is the last C to attract to attract uh and hold the user's attention does It capture their attention is it interesting does it tell a story that you want to tell so these are the best practices now let's go a little bit into Dash what is dash we have pla is a graphing library but Dash is the the kind of like the user interface it's enables the customization of the user interface uh that uh is very hard to achieve without without Dash all in Python right you can run custom computations and models on the Fly you can attach to it or add to it any python file incorporate python Library you can incorporate to any of the dash apps and they're accessible to your end user anybody can use it and they can be built in in a matter of hours or days with like a single data scientist instead of like months for full stack it team you don't need to know uh JavaScript you don't really need to know a lot of CSS you just do everything in Python so data app structure typically you'll see these five things in a data app structure python libraries I'm going to go over the white ones which is almost always the same python libraries are being Incorporated you're going to read the data into the app and you want to run the app so I'm going to show you right here the example is right here but I'm going to show show it a little bit bigger I'm going to show it on my screen so here we're reading the the components the python sorry the python Library into our app then you would read the data in our case we don't have any data here we we did that right here the web assembly the dash wasam we read the data Incorporated the data in this case I skipped the data part and then we run the app at the bottom so this will always be the same the running the app this will almost always be the same if you're using Dash and plotly you can read more libraries into it maybe machine learning libraries or maybe you're using AI any python libraries and then you're reading the data like we saw before those are the three main sections that kind of like um are simpler another two sections are the app layout and the Callback the layout is what you want to see on your screen in this case of web assembly dwm we wanted to see a div like a title A div is just a section of the page and the children defines the text we wanted to see a title we wanted to see radio items that we can see here and we wanted to see a table- a grid and two graphs see all of this goes into the layout app layout app. layout here in my case let me run this app python intro intro to dash yeah see if it works okay so here what what I wanted to see is merely a markdown component this youc is is Dash core component markdown and an input field the markdown has an empty let's actually delete the call back the children would be new text so I mark down kind of like a title new text and underneath an input field that has the initial value of text type text see new text is the markdown part here and then type text is what I typed into the input field that's it right so this is the layout this is the layout section of a Dash app so we incorporated libraries we read the data in a different in a different app we run ran the data the app at the end we built the layout there's no interaction yet there's no interactivity there's just just a layout of what we see on our on our on our page on our in our data app and then the call back the call back is probably the most important part of Dash where you're actually creating interactivity and this interactivity is going to is going to be between the markdown and the input so when the user updates the input it's going to update the title of the markdown the title of the page new title of page one to 3 one to three right this is just a simple markdown just sorry it's just a simple interactivity this call back right here is actually creating interactivity between the radio button pop and the y- axis of the histogram right so let me explain the call back in in two minutes there's another there's a plot Le 20 tutorial that you should you should you should take that will explain the call back even further but in essence the call back is the input is what the app is listening to so here I'm going to ask the app to listen to the value the component property value of this component this is just the ID so the ID is right here so we know we're referring to this component the input field I want to listen to the value in this case it's type text but I can anything I type will be will be will represent the value new value right um 1 two 3 this is another value so this is just going to be we're listening to the value which is right here we'll call it l texto we typically do do a lot of things inside a callback function you can activate llms you can draw new graphs in this case I'm just going to return this value this this text this string to the output so any object that I return is returned to the component property of an output in this case it's this one what is this ID my markdown my markdown ID and we turn it to the children so this new text whatever right here let's say this one two three is going to be returned here to new text in the children so that's why you see now that the children is new text is is one two3 now you see the title is one two3 if I listen to the input and I say my new page title this is going to be returned here to my new page title to the markdown so this is the the difference between input and output input listens to activity on the or changes by the user on the on the page page and the output is what is displayed at the end the return value we can see it here just before we go into an exercise I want to give you some a couple of exercises we can see it happening here as well I'm going to delete this this figure that we built with a line chart we delete the line chart or we can just do uh run the example again dashing 20 save and run okay it restarted dashing 20 so here we have another call back we're taking the value of this component what is this component ID this component ID refers to this one same ID refers to the radio buttons so I'm going to take the value of the radio buttons which is our either this string or this string or this string initially is this one life expectancy right what you see here when I take this string I'm going to say this is what this is a string this is what it represents build a histogram the the x-axis is always going to be continent this is the column name of our data frame this is our data frame right right here you can print the data frame and the column name one of the column names you can actually I think you can open it like this if you want control C this is just a raw but one of the call name is country another call name is pop continent population life expectancy in GDP per capita so all I'm saying here is listen to the radio button chosen the continent will always always be the x- axis but the y- AIS will be interactive will be dynamic it's going to be whatever the user chose in the radio button this string so if the Chooser chose pop you can see the histogram change only the y- axis is changing average life expectancy and pop stands for population but we have to call it Pop I mean we can show a different value I'll show you later how to change the value like label but the value has to be pop because pop is the name of the of the column inside the data frame right so now that I choose pop this is Pop right here as a string this is actually what you're seeing this is Pop and and then this becomes pop right here in the y- axis and then I'm returning the figure I'm assigning it returning it to the figure property of our graph of our DCC graph so this is returning right here fig so it doesn't matter if we build a fig before I'm going to return the figure right here based on the on the callx if I chose GDP per capita this will be GDP per capita this will be GDP per capita on the y- axis I'm building the figure and I'm returning the figure into the to this to displayed on the page right here okay now I'm sure there's a lot of questions about the call back and other and many other things I would highly recommend you I'll share some resources at the end uh but Dash in 20 tutorial can explain this in Greater depth okay I'm going to give you a couple of exercises you can try this out try to only have two options I want a radio button here to only have two options not three you can choose whatever options you want and update the initial value when the app first loads see now it's G GDP per capita save and run when the app first loads Oops why did I forgot to change this back to column chosen so it's Dynamic when the app first loads I wanted to load and show uh the uh GDP per capita save and run by default I want it to be GDP per capita not life expectancy when the app loads because I want the person to when they first see the app I want them to see the GDP per capita on the y- axis here so how do we do that I'll give you 20 seconds while I look at the questions again the exercise is to only have two options in the radio button and have GDP as the initial value I see questions about the webinar I'll let Richie answer that um is it possible to have a visualization with plotly plot to with asking even when we have a missing values in the data yes you should be able to have it it depends on the type of of of graph that you're creating I think with pie chart it's a bit harder to have um if you have missing values um but most most graphs probably plotly will understand there's missing values and will just not Trace them not add them to the trace if it's a line chart um so it is it is possible but generally speaking you want to use probably pandas or polers to like clean the data set before you before you're um you're plotting it or at least if you're plotting you're creating the plot Le graph and and and presenting it to you know your managers or your bosses or board members or your CEO she's telling you okay tell me what's this the state of the data of our agency she might not know that there's missing values so you either clean the data set or you you on the graph you making annotations or whatever make sure that they know that this is not the complete data and then one question I'll more question I'll ask before going to the next exercise or showing the solution for the first excise bolo was asking Adam I think the community needs an advanced book that explains more about Dash just like the first one you built or wrote uh is there a release forecast of books with Advanced content um not well that's a very good question first of all thank you um their Dash 3.0 is just coming out which has some uh major uh improvements to other apps that are built with Dash like mantin components and things like that um um and a lot has Dash and plotly we've done a lot since I wrote the book A couple of years ago there's been a lot of cool updates um and new versions so yes and a more recent book would be would be advantageous uh but I don't um I haven't looked personally I haven't looked into it yet uh it takes a lot of effort and concentration and time to to obviously write a good book um but yeah I don't know uh just on On a related subject do you want to talk through uh what you've been working on with the forthcoming dat Camp courses for sure for sure rich thank you so for those people who prefer books we have the book of Dash right for those people who prefer to learn through more interactive like courses and online uh and videos then we have our uh data Camp um plotly Dash uh track that is going to be be released sometime like we just said around the summer I have been working with a data Camp team um to update some of the courses that already exist dur on plotly uh to add some new uh uh chapters or sections to it and I'm pretty excited about what's going to come out it's going to really give you like what I'm doing here but with greater depth right I have 45 50 minutes here um we're GNA have a lot greater depth in the in the plal and Dash Track that's going to be released with some tutorials more resources and and more sections all right sounds exciting uh yeah looking forward to that um okay so uh you were in the middle of doing an exercise so I guess uh we'll let you back that and we'll do the rest of the questions at the end perfect so um great let's go back to the exercise so uh we said only have two um uh radio buttons so we let's take out the life expectancy and have the first one the initial value be GDP per capita so let's save and run and there we go we have pop and GDP per capita so this shows us what options we have on the dropdown only two options and the initial value shown when the app first starts is GDP per capita which you can see here also in the Y AIS of the histogram all right let's do one last exercise let's um bit more complicated but I think you could you could manage it let's return let's go here let's actually reload the example just in case dashing 20 save and run so we have everything original and then instead of the histogram let's return a bar chart right so you're not using new data you're using everything that's already in here use the the data frame from this um Gap minder data set uh you don't need to update this this this doesn't matter we'll do this only initially loads uh but in here instead of the histogram create a bar chart then you can create in any way you want you can update the y- axis the xaxis but how would you do that I'll give everybody about 15 seconds to try that and then I'll show you the possible answer there's many possible answers answers for a bar chart let's go into the bar charts here this is what I would usually do if I know I need a bar chart for my data frame okay here's a bar chart here's how to create a cool bar chart XY axis here so I can add some color to it and so on and so on okay cool I'll just usually just copy paste and try to do the same with my code give me a five more seconds yep haris said data Camp is a great resource and one I use for a lot of my learning thanks Harris all right let's take a look all right so what I'm going to do I'm going to go here and I'm going to change histogram to bar now I know that because it's this is how you this how you write it bar now I know I can go here to our our figure API I can look at bar but I know that from from experience already that within all the parameters this does not exist this hist function this is only the His function is only for histogram so I'll delete the His function and I'll keep the X and Y axis the same I think I can do that save and run so now instead of a histogram which is very similar we'll have a bar chart of all the different um life expectancies in different countries in Asia right and I think I can even add let's see if there's country I think the raw data has country yeah it has country so let's add country to the hover how do we do that let's go see what's the hover hover hover hover name takes could be a string or a series of a pan array right so let's put hover name comma hover name equals the country column save and run contrl s we'll go here and now every time I hover on it we'll see Republic of Yemen Vietnam Sri Lanka all the Asian countries we just added the title to the hover Serbia Portugal Netherlands marania Africa has many more countries America and so on and so on and so on so this is how you can add a bar chart to your uh your Dash app right and the call back is just displaying the figure returning it to the graph property of Dash to be able to visualize it on the page all right folks if you have any questions please let me know I'm going to move on dash Enterprise and resource list so Dash Enterprise um like like I showed you at the very beginning we have many different companies that are using uh Dash Enterprise and the advantage of Dash Enterprise is it allows you to have many built-in features really saves you time effort money like depends on on how you use it could save save the company millions of dollars it has a built-in configurable authentication username passwords um you can actually decide also who in the company or which people in which department would have access to that app and within that app that you build the dash Enterprise app that you build you can decide okay what part of the app that will have access to what maybe what pages or what reports all of that you can do with Dash Enterprise it's also an industry standard uh data encryption and Supply encrypts uh Telemetry Telemetry data in transmission with uh single SSL and uses Amazon web services for servers and data hosting we also have data source integration linking Dash apps to Major backend sources like datab brace Snowflake and and others um so a lot of advanced features um we take care of for you within Dash Enterprise now let's look at the list of resources reys or uh Richie might might have shared this with you it's not as in the slide if you click on this I wanted to give this to you because you know this is just 45 to 50 minutes um going to try answer as many questions as I can but uh and and the plotly track will come out in a few months but in the meantime or in addition to the plotly track on data Camp here are some um resources that you can use right I'm not going to go over every single one in the interest of time I want to see if there's more questions or exercises I can give you but we have some pretty cool places for blog post that we that we post about Dash or plotly I just released my this is a good coincidence the dash club uh no it's going out today today or tomorrow the dash club newsletter so feel free to sign up to the dash club newsletter and uh tomorrow you'll get an update on everything that's happening within the open source Community as well as as a plotly company we have some cool videos that you can watch that I recommend you watch to get acquainted and introduced to plotly and dash a couple of books from Community member Alias this is a pretty good book as well and mine Community Forum come join the Forum please please please we would love to have you on the community Forum this is a great way to get started not only because it's a place where you can answer qu get get your questions answered but also because we have a lot of activities we do here on a on a on on a weekly uh monthly basis like I just released a poll on AI uh yesterday I think it was like what AI you use the most and we have some pretty good um comments here about the poll uh we do we have an app challenge that we all working on right now uh in partnership with one for the world right here one for the world a great organization from uh the UK but they operate in the US and many parts of the world and we have some prizes for the best app second best app third best app we're building a dashboard internal dashboard for their managers and and um and board members now this is great even if you're not if you're new to Dash and you don't think you you have the best Dash app that's fine like the goal of this app challenge is 90% of it is really to get people to start using Dash and practice practice building data apps in Python with Dash right so for that goal in in mind I'm actually doing um sessions I'm doing sessions on our Discord Channel you can go right here in the resource list you should see our disc Channel huh where did I put it well it's it's Discord well you you know plotly Discord so just go there or you see it on the app challenge you'll see here the weekly sessions you can join our Discord and uh every day I try to do like around 11: am uh code alongs right and I post the code alongs here so people can get started to code together so hopefully you can join me tomorrow at 11: a.m. uh and that's and then we have a bunch of other uh resources here where you can see some Das app examples um some components that the community build I reports some issues on GitHub and so on and so on last thing I wanted to say is tags when you go into the form go into also figure Friday we build every every Friday we come up with a new data set to work on together this is not the app challenge it's just a data set we work on together we're building plotly graphs for this data set a great way to get introduced to plotly so this is already has like 24 posts this is from last Friday it's a data set about popular programming languages and people were encouraged to build either a Dash app or pole graph specific graph on top of this data set so Maran built this beautiful area chart um Alex Thomas built this actually a full Dash app with a corth map Esther built a nice uh pie chart Alex built a line chart uh oh this is a very nice almost like a butterfly chart and they often release their code here they share the code so we can we can do it together uh or they release it on GitHub another bar chart it's a really really cool way to um interact with the community uh collaborate and get improve your plotly um skill set all right folks this was it this was it for me Richie I'm glad I was able to to um uh introduce everybody plotly and dash and let me see if I can answer any questions all right wonderful yeah we've got a few minutes left for audience questions uh see still a question from Harris will need to answer but for anyone else in the audience uh please do ask your questions in the chat now before we go to audience questions just once more for those of you who have not yet registered for the radar conference in two weeks please do so now it's going to be an amazing event uh yeah you need to be involved in that actually I've got um well waiting for more questions from the audience well I've got a question for you so I noticed that when you were creating the Dash app uh in order to figure out the layout these HTML elements do you need to learn HTML in order to make use of Dash so that's that's a great question Richie um it wouldn't hurt to know HTML but really you don't you don't need to learn HTML because um most components in fact sometimes I build Dash app without importing the HTML Dash Library I just import the dash core components and most of the components in the layout are graphs radio buttons and other controls dropdowns I don't need HTML for that um Range sliders date Pickers and then HTML sometimes I'll use for like the title of the page or or a line horizontal line break or whatever so it's not really that necessary and often I'll use just markdown if you know markdown language you do DCC the markdown component and then in the children like the text you I'll put like a um a hash and then that's like a header one right so the title will be big uh so you don't really need to know HTML to build a beautiful Dash app okay so really a lot of it's just about like bringing all these different widgets that you want and then maybe a little bit of HTML just a little bit even it probably would be best if if you if you knew a little bit of CSS like it would be you'll have even more power in your hands to style the app we have beautiful Community built libraries on top of Dash like Dash boot strap components and dash Mantine components that you can create beautiful um additional components with the drop down beautiful controls um like Burger signs where you open you open like a sidebar and that's all htms and CS CSS but it's it's built in like you just you just call the component and that's it so you don't have you don't have to know that by using those libraries if you know a little bit of CSS it would help you with the styling if you want to really customize it but you you need to know very little okay uh that sounds useful uh I had one other question around um mostly making use of plotly Express there for the plots um when do you want to use plotly express and when do you want to use the underlying plot package so the underlying um library is the plotly graph objects I look I've been working with LLY for years now probably five years I I rarely use graph objects it's just not needed it's I rarely use graph objects but I'm always using it because it's under the hood of plotly Express like everything built with ply Express is using the parameters from graph objects but but as a summary I just need the px. scatter or px. bar because I'm building everything with poly Express sometimes it's like there's a parameter I really want to customize this this this uh this trace or this part of the graph or the ticks on the on the x-axis I want them to be more separate I want to like semi titles then I go into graph Ops and I'll say uh if I built the figure and I called Figure equals plotly expressed scatter then I'll say fig dot update traces or update layout and that's kind of using graph objects and then I'll look at the parameters I need to use uh that exist in in that page I gave you in the graph objects to look it up but 99% the time we're using poly Express all right so it's only if you're doing something really non-standard that's when you need to care about graphic objects yeah all right uh super so let's go back to the audience question so this question comes from Harris so Harris is asking um Bally uh can I create animations by just uh creating lots of charts and cycling through them going to chart them update every few seconds and Cycles through those dat and updates to try to create a sort of Animation I don't that's a very good question Harris um what Harris is referring to is you would need to use the interval component interval component within Dash so you build a Dash app you show the Fig you display the figure like we showed you how to display a figure uh on your page and then you use the interval components to activate to trigger the call back every whatever let's say every 5 Seconds right or every two seconds and then for whatever reason you said trigger the call back because I want to get new new dates can't remember Harris's exact question or new or new data so every time the call trigger is pulling new data from an API or from a data database somewhere uh pulling new dates new data and then it's redrawing the figure and returning it to the layout like we saw before so that that is the interval component is what pings the app and allows it to update every whatever you choose two seconds will be 2,000 I think it's called intervals equals that's a parameter inside the interval component intervals equals 2,000 2,000 milliseconds will be equal to 2 seconds right that means every two seconds the Callback and the graph would in theory be updated with a new data how would it look like an animation um kind of a slow animation if it's every two seconds I think you can do every one second uh but that