Building Dashboards with Plotly and Dash

Foreign.

And thank you for joining today's Code Along. My name is Rhys and I'll be a moderator today. 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, make sure that you register for this session. You can do so by scanning the QR code that's on screen. I've also sent the link to the registration page in the chat as well. And you can also head over to datacamp.comwebinars 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 likes. So please do like the video and check in with us. Yeah by liking the video please and thank you for the code along portion today you can have a look through the resources. Everything's in browser. There's nothing you need to sign up for. So yeah, it's really easy to interact and code 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 below the slides which, which is what we're going to use for the codelong. So yeah, if you're interested, have a look at those now and yeah, get those up. And we've also got some 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. Foreign. And thank you for joining today's Code Along. My name is Rhys 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, make sure you register for this session. That means we can send you the recording and the resources as soon as we've got them in our resource center. 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 datacamps.comwebinars 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 that's pinned in the chat. It's also in the video description that's going to cover the slides, as well as some extra resources from Plotly as well as a link so that you can 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. We'll be going through those during the last 10 minutes of the session.

Brilliant.

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're not signed up for that, please do make your use of the QR code top right screen, to sign up for that. I'm feeling very pleased with myself on how many, like, data and AI legends we've got to come talk. It is gonna be such an amazing event. You don't want to miss this one. So, yeah, please do sign up for that. All right, wonderful. Harris says howdy in the chat. Howdy, Harris. Howdy to everyone else who was joining us today. All right, and with that, let's kick off. So 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 Schroeder. 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. So as a community manager, he just makes sure that the Python community is comfortable using Plotly and Dash. And in addition to his work as a community manager, Adam also teaches Plotly and dash on YouTube as charming data. He also co authored the book of Dash to write another learning method for people who are interested in technology and sneak preview here. He's also involved in the development of a new series of Data Camp courses on Plotly. Those are going to be live this this summer, so please do watch out for those. All right with that, take it away, Adam.

Thank you, Richie. I see some people on the on the platform Data Camp session chat saying hi to me. So hi back to everybody. Hi Harris. Eric, thank you for joining us. Richard, thank you for the invitation. Thank you to Data Camp for having me here. I'm really excited to be talking about Plotly and Dash and this wonderful libraries that we have. This is what we're going to do. This is what we are going to do today. Let me see, bring up the agenda. First we're going to see a few AI app examples because I want you to see what's possible with the open Source libraries of PlotView and Dashboard. Then we'll go over Plotly. We'll do a brief introduction to Plotly graphing libraries to understand what that is. We'll go over a little bit the data viz. Best practices when you're building a dashboard, what you want to focus on and what you want to keep in mind. We will then go over Dash because it's slightly different than Plotly. It's what allows you to build a dashboard, a Dash app structure. In the during these Plotly and Dash introductions, we're going to have some code alongs. I'm going to give you a link that you can actually build some Plotly and Dash apps online and then Dash enterprise information and a resource list at the end. Feel free to ask questions along the way. 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, 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 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 here's this is using some machine learning in the back end. The front end, the UI is dash. Right. We're looking at a random image here and then we're category that the machine learning is categorizing 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 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 this should change a little bit. 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 a quiz along. This is all dash. We're not using plotly. We're not using a graphing library library here. We're just saying give me a quiz, a quiz about the Mars planet. Quiz, quiz me. So it's going to what topic do you want? Mars planet. It's going to ask the 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 going to generate the questions. Right. This is. We didn't decide on the level of the quiz. We could have said it's hard or easy. And now we just have questions of the AI created for us. What is the temperature, average temperature of Mars? I think it's. They seems right to me. Good. What is the largest volcano on Mars? I have no idea. Let's choose Buffon Mons and it will 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 models. I think it's OpenAI in the background. You can actually look at the GitHub here code and you can read more about what LLM it's using. It's actually the Databricks URL connected to an LLM. One last example of Plotly and Dash. What's possible with open source? We have this beautiful app that was created for one of our app challenges we do. Every two months we do a plotly app building challenge. This challenge was around the Michelin guy, the restaurant guy, to create an app on top of that data set. So you see here beautiful pie charts and bar charts. I think this is using a corple 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 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. Claude. I'm not sure. But here you can ask any question related to machine data. It will answer that question. Or you can ask for recommendations. Right. I want a restaurant I don't know in the city of Buenos Aires. I don't describe what kind of restaurants you're looking for. 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 the prompt and we should have an answer here. I found some options based on your preference for steakhouse and Buenos Aires and it gives us all these options from the dataset that they pull into this app. Really cool things. You can do a lot with Plotly and Open Source 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 the different apps that have been. Well, not all the apps, but the apps that we are proud of that the community created 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 Plotly is a company as well, right. That built that is the owner and creator of Plotly and Dash Blotly at a glance. So one second, I lost my. Okay, there we go. So you probably know us from our data visualization libraries, but we've also been accompanying the market for just over a decade and we contribute immensely to open source. In fact, our open source library, Plotly has been downloaded over 500 million times. And in addition to Plotly Data Visualization, our open source products also include interactive data data applications such as Dash. Now, to give you a sense of our reputation, I'd like to point out a recent survey of 10,000 Databrick customers conducted by Databricks, who's one of the leading providers of data science and machine learning technologies. They surveyed the people in the survey that they released earlier in June of 2024, showed that plotly Dash as a data frame framework is the most popular data and AI product within their population of customers. You see this orange line, like double the others. So pretty cool there. Here are some of the clients that are using Dash Enterprise. This is the sits on top of Dash open source to build their data apps and dashboard within their companies. All right, so Plotly graphing library. I'm going to explain a little bit about that, but in the meantime I would like to to open click on this link right here. It says wasm Dash Verso app. You should have it either on the sides that reshare with you or you should have it in, in the Data Camp chat here on the platform. But this is what you should, you should, you should see, you give it, Give it about 20 seconds to load what it is. It's webassembly. It's installing the necessary libraries online on the bra on your browser. Give it about 20 seconds and then click on the examples dashing 20 because it will by default create or upload a different example. I can't remember which one. But you want this one. You want the cross filter, it's going to do the first one. But you want the dash in 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. Plotly is an open source graphing library that you can use to create over 100 different graphs. So the website is right here, plotly.com forward/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 trellis plots. We have scientific charts, financial charts, maps, AI charts, bioinformatics and 3D charts and subplots 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 chart 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 maps that you can see here. So this is Plotly, this is the graphing library. Now we have the plot 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. 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 plotly express scatter plot. 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 plot express Iris data set that we have built in data sets. You see, it's one line of code and you have your scatter plot. We have the data frame that we're going to use after we define scatterplot. We have defined the x axis. 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. 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 to want to add a hover data parameter, a size parameter. That is why I recommend this second link, which is a Poly Express API reference right here. So here we went into the scatter plot. There's all the other plotly express plots. We went into scatter and we saw all the different, not all of them, but I don't know a nice amount of properties that, that go into the scatter plot when using Poly 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 panda series. So you can't put in here a dictionary. 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 know at least the top five or six parameters because they're often used 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 Poly and you're building more customized charts. You can go into all the parameters of the scatter plot. This is under the hood. You have like hundreds of different parameters that 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 graph objects, we call it plotly graph objects. All the different parameters. And this comes from Plotly Express. So it's almost like Seaborn, how it sits on top of matplotlib. With matplotlib you can have access to many, many different things and customization. And then Seaborn is a lot shorter. Same thing. Poly Express is extremely powerful. One line of code with a lot of parameters that you can use and define and shape your graph. But if you want more parameters, we have all of them right here. Everything. You can choose the legend width, the opacity, the Z order and many, many different things that you can the text position on the graph. This is for more advanced stuff when you want to really customize your graph. Let's practice a little bit. If you open this already rich, if there is actually while I'm presenting, I can't necessarily see what's going on in the chat or anything. There's a question you want me to answer, just let me know. Or if they're facing issues, just let me know.

We're good to continue for now.

Perfect. Here we have our webassembly. Hopefully it opened up for everybody. Remember, it takes about 20 seconds to download everything, install everything in the browser. This is Dash. We're going to go over Dash in a sec. This is how we display the graph in the layout. We see we have our graph here. The figure that we built, Fig. Is the histogram. We displayed 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 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. 1. And I want you to build this FIG 1 right here. FIG 1 equals plotly express, whatever you want it to be. So go to the plotly python py plotly python plotly.com python sorry. Pick any graph you want and just paste it in there. Let's try this one, for example. Import Plotly Expressed. We already have Plotly Expressed. Yeah, we have Plot. So we don't have to import. Then we're just going to. We don't need the fix show. We want to do the ascent Dash. We're just going to do this. Copy the first two lines of code. The new DF is equal to. I will call it the FF so we don't get confused with the other one. This data set. We're going to build a line chart and we'll call it F fig 1 and then 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 save. Now we'll see what is happening. I love expectancy dff. Oh yeah. Gotta. Gotta make sure I'm consistent. If I change the name of the data frame to DFF then this should be DFF right here. All right, so we have our histogram before and then we have our line chart. So this is how we display a Poly Express line chart or graph figure inside our browser. We have to assign it to the figure property of our graph component. But I just wanted to get a little practice. You can do this with any graph that you want. DASH is built on top of Plotly Express. I'm going to give you one minute to try this and 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 will. We'll see this later. Don't use your own CSV sheet on your own. On your own JSON file. Just use a data set that's pre built that comes in with. With. With Poly Express for now. Like the Gapminder. Right. You can copy all this and try to insert it. So try to insert it into wasm Dash and see what happens. See how it works. Then you can always change things once you insert it. Update the Y axis or the X axis based on what the data looks like. Here I'm going to print DFF head so we see what the data looks like. Save and run. This is very small. Let's make it a little bit bigger. In the meantime, try to load a separate graph in there. Not sure why I couldn't get this bigger. I 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're going to traces. Yes, we have many different traces. Welcome Amit. Loading ready to start. Good. We need more components in choice. Yeah. All right, good. So I'm glad it's been working out with every for everybody. Again, if you have any questions, please, please paste them in the. In the chat. But this was an intro into Plotly. Right. How to use the graphing library to visualize different figures. Now before we go into Dash, I just want to go on like data viz. Best practices. There's something called the four Cs clear, clean, concise and captivating. These are Shaffer's four Cs. A very common term in the world of data Visualization is Shaft Shaffer 4C'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 five seconds of the graph, right? If I'm looking at a graph, a pie chart or let's say a 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. These are so called Shaffer's four Cs of data visualization. Now, clear means easily seen, sharply defined. Think about your audience, right? If your audience is very technical, you can have a more technical graphics or less technical. Then make sure you're speaking to your audience and the message you have to try to answer the the question they might be asking themselves with your graph has to be clean, right? Thorough, complete, unpolluted. Don't have too many, too many things on the. On on the visualization. Also concise, 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 too verbose, right? If an X axis says I don't know if this is time or is it here Sepo width. This is. This is perfect, right? Instead of saying the. The width of the sepo. Whatever plant. No, you can just say sepal width right here. You can just say all using the same example here. So 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. You can remove the X axis title and this is count. Account of what? Right? Maybe metal count so it's more clear. And then captivating is the last C to attract 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 Plowi is a graphing library. But Dash is. Is that the kind of like the user interface. It enables the customization of the user interface that is very hard to achieve 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 a matter of hours or days with like a single data scientist instead of like months for a full stack IT team. You don't need to know 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 want to read the data into the app and you want to run the app. I'm going to show you right here. The example is right here, but I'm going to show it a little bit bigger. I'm going to show it on my screen. So here we're reading that, 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 webassembly, the dash wasm, we read the data, incorporated the data. In this case, I skipped the data part and then we run the app at the bottom. 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 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 webassembly wasm, 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 want it to see a table, AgGrid 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 here. What I wanted to see is merely a markdown component. DCC is dash, core component markdown and an input field. The markdown has an empty. Let's actually delete the callback. The children would be new text. I'll Mark down a title, new text, and underneath an input field that has the initial value of text. Type text. New text is the markdown part here. Then type text is what I typed into the input field. That's it. This is the layout. This is the layout section of a Dash app. We incorporated libraries. We read the data in a different app. We ran the data, the app at the end, we built the layout. There's no interaction yet. There's no interactivity. There is just a layout of what we see on our page in our data app. Then the callback. The callback is probably the most important part of Dash, where you're actually creating interactivity. This interactivity is going to be between the markdown and the input. 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. 1, 2, 3, 1, 2, 3. This is just a simple markdown. Sorry, it's just a simple interactivity. This callback right here is actually creating interactivity between the radio button pop and the Y axis of the histogram. Let me explain the callback in two minutes. There's a plotly in 20 tutorial that you should take that will explain the callback even further. But in essence, the callback is the input is what the app is listening to. 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. The ID is right here. 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 anything I type will represent the value. New value 1, 2, 3. This is another value. This is just going to be text. We're listening to the value, which is right here. We'll call it L text. We typically do a lot of things inside the callback function. You can activate LLMs, you can draw new graphs. In this case, I'm just going to return this value, this text, this string string to the output. 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 remarked an ID and return it to the children. This new text, whatever I write Here, let's say this 1, 2, 3 is going to be returned here to new text in the children. That's why you see now that the children is new text is 1, 2, 3. Now you see the title is 1, 2, 3. 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. This is the difference between input and output. Input listens to activity or changes by the user on the page. 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 a couple of exercises. We can see it happening here as well. Want to delete this figure that we built with a line chart. We'll delete the line chart or we can just run the example again. Dashing 20. Save and run it restarted. Dashing 20. So here we have another callback. 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. Of 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 the string. This is what it represents. Build a histogram. The X axis is always going to be continent. This is the column name of our data frame. This is our data frame right here. You can print the data frame, the column name, one of the column names. I think you can open it like this if you want. Control C. This is just a raw, but one of the column name is country. Another column name is pop. Continent, Population. Continent, Life expectancy and GDP per capita. So all I'm saying here is listen to the radio button chosen. The continent will always be the X axis, but the Y axis 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. 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 column inside the data frame. Now that I choose pop. This is POP right here as a string. This is actually what you're seeing. This is pop. And then this becomes POP right here in the Y axis. Then I'm returning the figure, I'm assigning it, returning it to the figure property of our graph of our DCC graph. This is returning right here. Fig. It doesn't matter if we build a fig before. I'm going to return the figure right here based on the on the callbacks. If I choose GDP per capita, this will be GDP per capita. This will be GDP per capita on the Y axis. I'm billing the figure and I'm returning the figure into the to this to be displayed on the page right here. Okay now I'm sure there's a lot of questions about the callback and other and many other things I would highly recommend you. I'll share some resources at the end but dash in 20 tutorial can explain explain this in greater depth. I'm going to give you a couple of exercises so 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 GDP per capita save and run when the app first loads. Why did I forgot to change this back to column chosen so it's dynamic. When the app first loads, I want it to load and show the 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. Is it possible to have a visualization with plotly thought to was asking even when we have a missing values in the data? Yes, you should be able to have 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 if you have missing values. But most most graphs 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, so it is. It is possible. But generally speaking you want to use probably Pandas or Polars to a clean the data set before you before you're you're plotting it. Or at least if you're plotting you're creating the plot the graph 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 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 on the graph you make an annotations or whatever and make sure that they know that this is not the complete data. And then one question, more question I'll ask before going to the next exercise or showing the solution for the first exercise. 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. Is there a release forecast of books with advanced content? Well, that's a very good question. First of all, thank you. Their dash 3.0 is just coming out, which has some major improvements to other apps that are built with Dash, like Mantine components and things like that. 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 and new versions. So yes, and then more recent book would be, would be advantageous. But I don't, I haven't looked personally, I haven't looked into it yet. It takes a lot of effort and concentration and time to, to obviously write a good book. But yeah, I don't know.

Just on, on a related sub. Do you want to talk through what you've been working on with the four forthcoming Data Camp courses?

For sure, for sure. Rishi, 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 and videos, then we have our Data Camp Plotly Dash track that is going to be released sometime like we just said, around the summer. I have been working with the Data Camp team to update some of the courses that already exist around Plotly to add some new 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. We're going to have a lot greater depth in the, in the Plot and Dash track that's going to be released with some tutorials, more resources and, and more sections.

All right, sounds exciting. Yeah, looking forward to that. Okay, so you were in the middle of doing an exercise, so I guess we'll let you back to that and we'll do the rest of the questions at the end.

Perfect. So great, let's go back to the exercise. So we said only have two radio buttons. So we'll, 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 axis of the histogram. All right, let's do one last exercise. Let's be more complicated, but I think you could manage it. Let's return. Let's go here. Let's actually reload the example just in case. Dash and tw 20 save and run. So we have everything original. Then instead of the histogram, let's return a bar chart. You're not using new data. You're using everything that's already in here. Use the data frame from this Gapminder data set. You don't need to update this. This doesn't matter. We'll do this only initially loads. 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 x axis. 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 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. Here's a bar chart. Here's how to create a cool bar chart. X, Y axis. Here's. I can add some color to it, and so on and so on. Okay, cool. I'll just use you just copy, paste and try to do the same with my code. Give it five more seconds. Yep. Harris said Data Camp is a great resource and want to 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 decide to write it. Bar. Now, I know I can go here to our figure API. I can look at bar, but I know that from experience already that within all the parameters, this does not exist. This hist function. This is only. The hist function is only for histogram. I'll delete the hist function. 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 life expectancies in different countries in Asia 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 to 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 control 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, Mauritania. Africa has many more countries, Americas and so on and so on and so on. This is how you can add a bar chart to your Dash app. The callback is just displaying the figure, returning it to the graph property of dash to be able to visualize it on the page. Folks, if you have any questions, please let me know. I'm going to move on. Dash Enterprise and resource list. So Dash Enterprise like, like I showed you the very beginning, we have many different companies that are using 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 how you use it could save the company millions of dollars. It has a built in configurable authentication, username, passwords. 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 they will have access to, maybe what pages or what reports. All of that you can do with Dash Enterprise. It's also industry standard data encryption and supply encrypts, telemetry data in transmission with 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 databrace, Snowflake and others. So a lot of advanced features we take care of for you within Dash Enterprise. Now let's look at the list of resources. Reese or Richie might have shared this with you. It's not. It's in the slide to click on this. I wanted to give this to you because you know this is just 45 to 50 minutes. I'm going to try as much answer as many questions as I can but the plotly track will come out in a few months. But in the meantime or in addition to the plotly track on datacamp. Here are some resources that you can use. 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 posts that we post about Dash or Plotly. I just released my. This is a good coincidence. The Dash Club. 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 tomorrow to 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 Elias. 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, get your questions answered, but also because we have a lot of activities we do here on a weekly monthly basis. Like I just released a poll on AI yesterday. I think it was like, what AI do you use the most? And we have some pretty good comments here about the poll. We do. We have an app challenge that we are working on right now in partnership with One for the World right here. One for the World, a great organization from the uk but they operate in the US and many parts of the world 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, 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 sessions. I'm doing sessions on our Discord Channel. You can go right here in the resource list. You should see our Discord channel. Where did I put it? Well, it's, it's Discord. Well, it's 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. Every day I try to do like around 11am code alongs. I post the code alongs here so people can get started to code together. Hopefully you can join me tomorrow at 11am we have a bunch of other resources here where you can see some Dash app examples, some components that the community builds. I report 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. 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 dataset. A great way to get introduced to Plotly. This already has 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 plot graph specific graph on top of this data set. So Marianne built this beautiful area chart. Alex Thomas built this, actually a full dash app with a corple map. Esther built a nice pie chart. Alex built line chart. Oh, this is 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 or they Release it on GitHub. Another bar chart. It's a really, really cool way to interact with the community, collaborate and get improve your Plotly skill set. All right, folks, this was it. This was it for me. Richie, I'm glad I was able to introduce everybody to 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. Still a question from Harris from Need to Answer. But for anyone else in the audience, 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. Yeah. To be involved in that. Actually I've got. While waiting for more questions from the audience. Well, I've got a question for you. I noticed that when you were creating the Dash app, 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 a great question, Richie. It wouldn't hurt to know HTML, but really you don't. You don't need to learn HTML because most components. In fact, sometimes I build dash apps without importing the HTML library. I just import the dash core components. Most of the components in the layout are graphs, radio buttons and other controls, dropdowns. I don't Need HTML for that range. Sliders, date pickers and then HTML. Sometimes I'll use for the title of the page or a line, horizontal line break or whatever. 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, I'll put a hash and then that's like a header one. So the title will be big. You don't really need to know HTML to to build a beautiful Dash app.

Really a lot of it's just about bringing all these different widgets that you want and then maybe a little bit of HTML, just a little bit.

It probably would be best if you knew a little bit of css. 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 Bootstrap components and Dash Mantine components that you can create beautiful additional components with the dropdown. Beautiful controls like burger signs where you open a sidebar that's all HTMs and CSS but it's built in. You just call the component and that's it. You don't have to know that by using those libraries. If you know a little bit of css, it will help you with the styling if you want to really customize it. But you need to know very little.

Okay, that sounds useful. I had one of the questions around mostly making use of Plotly Express there for the plot. When do you want to use Plotly Express and when do you want to use the underlying plot package?

The underlying library is the Plotly graph objects. Look, I've been working with Plotly for years now, probably five years. I rarely use graph objects. It's just not needed. I rarely use graph objects but I'm always using it because it's under the hood of Plotly Express. Like everything built with Plot Express is using the parameters from graph objects. But as a summary, I just need the px scatter or px bar because I'm building everything with Plotly Express. Sometimes I was like there's a parameter. I really want to customize this, this trace or this part of the graph or the ticks on the x axis. I want them to be more separate. I want it semi titles. Then I go into graph objects and I'll say if I built a figure and I called figure equals Plotly Express scatter, then I'll say fig update traces or update layout and that's using graph objects and then I'll look At the parameters I need to use that exist in that page I gave you in the graph objects to look it up. But 99% of the time we're using Poly Express.

It's only if you're doing something really non standard. That's when you need to care about graph objects. Super. Let's go back to the audience question. This question comes from Harris. Harris is asking, can I create animations by just creating lots of charts and cycling through them?

Can I create a chart that will update every few seconds and cycles through those dates and updates the chart? Try to create a sort of animation? That's a very good question, Harris. What Harris is referring to is you would need to use the interval component. Interval component within Dash. You build a Dash app. You show the figure, display the figure like we showed you how to display a figure on your page. And then you use the interval components to activate, to trigger the callback every, whatever. Let's say every five seconds or every two seconds. Then for whatever reason you said trigger the callback because I want to get new dates. Can remember Harris's exact question. Or new data every time the callbacks, triggers. Pulling new data from an API or from a database somewhere, pulling new dates, new data, and then it's redrawing the figure and returning it to the layout. Like we saw before, the interval component is what pings the app and allows it to update whatever you choose. Two seconds will be 2000. I think it's called intervals equals. That's a parameter inside the interval component. Intervals equals 2000. 2000 milliseconds will be equal to 2 seconds. That means every 2 seconds the callback and the graph would in theory be updated with the new data. Would it look like an animation, kind of a slow animation? If it's every two seconds, I think you can do every one second, but that's the lowest I would go. Yes. Okay, cool.

That's nice that it's possible. Certainly. I've done that before where you just create a ton of PNG files or something and then you convert the PNG files into a GIF or something to animate it. It's not interactive.

Then.

Cool. I don't think we have any more questions.

Yeah, I saw Sarah ask your question. Richie, can you change graph type along with the data from radio button? Sarah, that's a great question. Yes, you can change your graph type. If you remember. In the screen that I shared in the Dash WebAssembly app, we pulled the radio button as an input into the callback. We listened to what the radio button did, or what radio button was chosen. And then we built a graph. But inside the callback function you can do whatever you want. Inside the callback function you can pull AI large language, machine learning. You can build three different graphs. I don't know why you would do that, but you could build three different graphs with that new data with a radio button. And you can say, for example, you know what, if user chooses pop in the radio button the population, then return the histogram. But if user chooses GDP per capita, then use, then build a pie chart that's going to show the GBP per capita and country and then return that pie chart so you can really do whatever you want. And then after you decide what figure you want to, maybe you return a table. You know what, if they're choosing life expectancy, I don't want to see a histogram, I want to return a table. Not necessarily best practice, but you could in theory you would build a table and, and then return the table into the layout to the output. It wouldn't be, you will return the table not into a graph, you would just return into an HTML like a div section of the page. You could do whatever you want.

Yeah, I guess the trick here is making sure that the behavior makes sense to the user. If you're doing a lot of very complicated things by switching stuff in the radio button, users are going to be like, what's going on here? So yeah, just got to be exactly.

You want to make it. That's going back to the shape of 4C. You want to make it clear to the user, like if the user is clicking on the population and sees the Y axis of the histogram change and then she clicks on life expectancy and they see the Y axis change again. Okay, that makes sense. I'm changing the Y axis. But suddenly if they click on GDP per capita and they're seeing a pie chart being created, like wait, what's, what's going on? Like, what is this? Another interactivity I see a lot is this is a bit more advanced, but instead of listening in the callback to the radio button value that was chosen, you listen to the click data. It's actually called click data of the graph. You say listen to the click data of the country that I clicked on in the map. Take that click data and based on what country was clicked on, create a new bar chart and show them a more detailed meta level information of that country that we clicked on in the bar chart. And that's kind of like cool to do. You're just returning a new bar chart to a new. A new graph.

Okay, that. That sounds very cool. So it feels like you can do basically whatever you want if you're sort of diving into things. That's cool. All right, super. We are at time, so we're going to wrap up here. Before you all dash off, I just want to say we got some great webinars coming up very shortly. So on Thursday, when is tomorrow? Tomorrow we got a session on managing high performance data teams. So for any managers of the audience, please do come to that. And then next week we're doing building an AI note taking application. So I don't know whether you use Notion or something like that. We're building a very simple version of Notion using AI next week on Wednesday and then on Thursday there's a session on receiving responsible AI in government. So, yeah, please do sign up for those. Come back. Hope to see you all again soon. All right, thank you, Adam. That was very, very cool stuff. Lots of, like, just beautiful examples of dashboards for inspiration as well. So very nice. And yeah, thank you to everyone in the audience who asked a question. Thank you to everyone who showed up today. Thank you for moderating. I hope to see everyone again shortly. All right, bye, Br.

Thank you.