Creating Interactive Dashboards with Dash and Bootstrap

Set up a Dash dashboard by activating the correct Python environment, navigating to the appropriate project directory, and integrating your grouped data processing code into app.py.

Learn how to set up a Python Dash application using Bootstrap for visual dashboards by preparing your environment and organizing your project directory. This article walks through initializing your app.py file and configuring your terminal to run the code within the correct folder and Conda environment.

Key Insights

  • Proper setup requires activating the correct Conda environment (e.g., dvenv) and navigating to the correct working directory containing your data visualization curriculum files.
  • Platform-specific commands are necessary to navigate to the home directory: use cd ~ on macOS or cd %USERPROFILE% on Windows, followed by navigating to the project folder path.
  • The article demonstrates integrating previous data manipulation steps into a Dash application and initializing the app.py file, laying the foundation for a functional dashboard.

Note: These materials offer prospective students a preview of how our classes are structured. Students enrolled in this course will receive access to the full set of materials, including video lectures, project-based assignments, and instructor feedback.

We have our data, we have a graph in roughly the form we want it, but we want to take that data, take that process we went through, take our group by, which we made using an apply, lambda, and we're going to take that, we're going to put it into a visual dashboard now, using dash, and also using bootstrap. So, we're going to take this code, and we're going to put it into our app.py file. And this is, you know, pretty much our setup code from last time.

Okay. So, we have an app.py file, doesn't have anything in it, now it does. Now, that's just our starting point, but it will, if we have this running correctly, actually create a dashboard, a simple dashboard, just says hello dash.

All right. I'm going to open up our terminal. I have it in the right, the right conda environment, our Python environment, dvenv.

However, I'm going to actually get it to where it's not, so that if you're stuck, you'll be able to see where we go from here. So, first, if you see base or anything other than dvenv, then you're not in the right Python environment. So, you can write conda activate dvenv.

And there we are. The other one is a little harder to fix, which is we need to be in the right folder, in the right directory, from which to run all of this code. So, if you're like me, you're not there.

Python for Data Science Bootcamp: Live & Hands-on, In NYC or Online, Learn From Experts, Free Retake, Small Class Sizes,  1-on-1 Bonus Training. Named a Top Bootcamp by Forbes, Fortune, & Time Out. Noble Desktop. Learn More.

But if your directory says over here, again, to the right, to the left of this prompt area, to the right is where you type things. But to the left, it says what path you're in. This is the macOS symbol for home.

If you're on Windows, it might say something like, see users and your username and something like that. Or possibly it might say, see Windows. What we wanted to say, if you're on Mac, our goal is to have it say here, data visualization, that's a hard word to spell, curriculum, also hard, main.

That's what we wanted to say. Data visualization, curriculum, main. Now, if you are on Windows, it'll say a very similar thing, but it'll say, see users, username, downloads, and then data visualization, curriculum, main.

That's our goal. To get there, first we want to get home. On Mac, that's this symbol to indicate your home.

On Windows, it should say, see users, username, if you're home. So, on Mac, to get there, you do cd space, the home symbol. That's the tilde on your keyboard.

On US keyboards, that's the key to the one. And you have to press shift to get the upper symbol on it. And if you do that, no matter what directory you're in, you will go to your home directory.

Now, on Windows, there's another way to do it. You can do cd and then percent symbol with a space, cd space, percent symbol, all caps, user profile, as if it's one word, and all capitals, and another percent. If you enter that in on Windows, you will also get to home, which, again, is like see users, username.

All right. Once you're in your home, to get to our right directory, you can type in cd downloads, and you can experiment with tab complete. It's a little different on Mac and Windows, but experiment with tab complete, as I just did, to speed that process up.

And then you want data visualization, curriculum, main. And on Windows, it'll look exactly the same, except instead of a slash here, it'll be a backslash instead of a slash here. Oh, so if you're here, you've got it.

You need to have dvenv on the left side, because you've activated your Python environment, and data visualization curriculum main on Mac OS, a more full path ending with data visualization curriculum main on Windows. If you've got that, then you're all ready to get started with our latest Dash app.

Colin Jaffe

Colin Jaffe is a programmer, writer, and teacher with a passion for creative code, customizable computing environments, and simple puns. He loves teaching code, from the fundamentals of algorithmic thinking to the business logic and user flow of application building—he particularly enjoys teaching JavaScript, Python, API design, and front-end frameworks.

Colin has taught code to a diverse group of students since learning to code himself, including young men of color at All-Star Code, elementary school kids at The Coding Space, and marginalized groups at Pursuit. He also works as an instructor for Noble Desktop, where he teaches classes in the Full-Stack Web Development Certificate and the Data Science & AI Certificate.

Colin lives in Brooklyn with his wife, two kids, and many intricate board games.

More articles by Colin Jaffe

How to Learn Python

Master Python with hands-on training. Python is a popular object-oriented programming language used for data science, machine learning, and web development. 

Yelp Facebook LinkedIn YouTube Twitter Instagram