Creating Interactive Data Dashboards with Dash and Python

What is this Dash dashboard that we just made? What is Dash at all? Dash is a library, a Python library, for building miniature web apps that can display data online with an interactive dashboard. It allows us to write Python, the language most used in data visualization, and it uses that Python to build out a JavaScript, HTML, and CSS web app. Now, since the web runs on those technologies, well, data science runs on Python, Dash is a bridge between the two, and it's really good at it.

It allows you to create these beautiful data visualization dashboards, and we can build them in Python without having to learn a whole new programming language. We'll be using Dash to create our data visualization dashboards in this course, but for now, let's take a look and try to understand the Dash code we wrote. When we ran this line, app equals Dash, we created a Dash app object.

This object is the main entry point for our app, and it contains all the information about our app, including the layout it uses to output our HTML page, and that's what we did here. We said app.layout is HTML, and it's an H1. We'll talk about HTML in a moment, but a heading, my first Dash app at Noble.

We outputted that. We said that's the layout, and then when we ran app.run, we were saying, okay, take this Dash app and run it, and we also passed an argument to it, debug equals true. So app.run, again, ran a web server in the background, just constantly running, just like any other app runs on your computer.

It runs until you quit it. Now, that allows us to view our app in a web browser. It listens, is the technical term for it, on that URL, and anybody that goes to that URL, it's like, oh, okay, you asked, here's the response, and it sends back the HTML for the browser to interpret and display.

So this debug equals true here, what that does is it sets it to automatically reload the app whenever we make changes to the code, and that's very useful for development. Let's see it in action. Try changing the text in HTML.h1. Maybe, whoa, HTML from Python.

Now, if we go here, it hasn't changed, and again, that's good, because we haven't saved it, and we might not necessarily be done, so maybe we want to change the text again. Welcome to Dash. Now, still hasn't changed, but we decide, okay, this is what we want.

This is our result. So then we save it. File menu, save.

Again, you see the black circle. It has not been saved. That's unsaved changes.

Save. When we do that, this very quickly changes. Now it says, welcome to Dash.

Now, if you get any kind of error message, make sure you save the file, double check that your code is correct, make sure you haven't, you know, got rid of a quote, and if you wanted to stop running, you can switch back to the terminal, and you notice your prompt is not currently active, right? Here, we typed in cd, we typed in this cd command, and it immediately went back to our prompt, prompted us to write more things in. Gave us that little percent symbol, like ready, and then we typed in another command, but after we typed in Python Notebook 1 App.py, it did not give us back our prompt. We did not get dvenv, you know, and our directory, and all of that, and percent.

This terminal is being used right now by the Python program we wrote. If we want to exit out the keyboard shortcut to use, and much of terminals run on keyboard shortcuts, CTRL C. CTRL C will exit, and you see we're back at our prompt.

Now, if I go back to our app and reload, this site can't be reached, because it's not listening anymore. It's not responding with our HTL, because the program isn't running. We can get that line back.

Remember, we can use the up arrow to get our last command, but either way, up arrow or typing it in again, we can then hit return, and now if we reload here, it will, the app is listening once more and responding with our HTML. So that's what our app is doing. We're going to talk about HTML, give you a little bit of a background on it, and then we'll get to preparing our data.