Create a Python Dash Application in Positron

Hello, I'm Daniel, one of the developer advocates here at Posit. Today I want to show you how you can create a dashboard in Python with Dash from scratch and deploy it to Connect Cloud for free. So let's get started.

Setting up the project

Here we'll create a new folder for our Dash application. You can click on the New Folder icon from the Welcome page or go to File, New Folder from Template. We'll create a Python project. We'll name our project AppPenguin. I'm going to save this to my desktop. And because we'll deploy this application later, I'm going to initialize it right now with a Git repository.

It's recommended for every Python project you create a new virtual environment. Here we'll be using UV, but you can use the built-in VM or Conda. Lastly, you'll be able to pick the version of Python you want to use. Here I'll be using 3.13. We'll open our new folder in our current window.

In Positron, in the top right corner, you have the folder selector for the project that you're working in. Next to it is the interpreter selector. You want to confirm that the interpreter that you are going to be working in is in the folder that you just created.

Installing packages and sketching the base code

Now we're ready to create our Dash application. Since I'm using UV, I'm going to use UV to install the packages we need for this project. We'll use UVAdd to add the Dash, Plotly, and PalmerPenguins packages. You can confirm that the packages were installed by going to the PyProject.toml file and checking that all the packages we just listed are there.

Next we're going to sketch out the base application that we're going to be creating. I'm going to create a new file called code.py just to get through the basic figure and interaction I want to do. In general, when I'm starting out an application, I like to make sure that the base code is working before adding dashboarding code to it. This way, if things go wrong, I can debug the actual Python code in the visualization without having to also debug something that may have gone wrong in the dashboard.

In general, when I'm starting out an application, I like to make sure that the base code is working before adding dashboarding code to it. This way, if things go wrong, I can debug the actual Python code in the visualization without having to also debug something that may have gone wrong in the dashboard.

First we'll load up our plotting libraries. Because we're creating a Dash application, we'll be using Plotly. The data that we're going to be using comes from PalmerPenguins.

The first thing I'm going to do is load the PalmerPenguins dataset. In Positron, we can click on the little data table icon on the right side of the variable viewer. Look at the actual data frame in our Palmer's penguin data. In this example, I want to look at the bill length variable and create a histogram for the bill length for different species of penguins. I want to be able to overlay the overall billing and then be able to select the individual species and overlay the species bill length histogram on top of it.

When planning a dashboard, what I like to do is to make sure that all of the variables or interactions I expect my user to have, I want to be able to save those as individual variables so I can use the variable in the dashboard. Here I know I want to select between individual species of penguins. So I'll make sure that there's a variable I can capture the different species of penguins in this dataset.

Next, since I have the overall histogram, I want to then be able to overlay another histogram on top showing the selected species. To do that, I need the actual data from the selected species. And then we'll create another histogram for the selected species. In this example, setting the bin width to equal one, because each different subset of the data will have a different range and the bin width will be different for different species, especially when we compare it to the baseline data for all the penguins. I'm also distinguishing the background histogram with the foreground histogram with different colors.

Next, I'm going to go and create a figure that puts both of these histograms in one figure. If we look at our figure now, you'll see that both histograms are being drawn, but they're being drawn next to each other. We want them overlaid on top of one another. To do that, we'll make an update layout method call. Now when we render the figure, we have our background histogram across all of the penguins in gray and the selected penguin as a foreground color in blue.

If we look at the entire code base, we can now change the variable of the selected species. Look at the figure. We'll get a different overlay depending on the variable or the selected species.

Building the Dash application

Now we're ready to go and create this dashboard using Dash. I want to go and use the selected species variable as the entry point for a set of radio buttons that a user of the dashboard can use to change between the species. Then the dashboard itself will go and re-render this figure with a different foreground histogram that is determined by the radio button the user selected.

I'm going to create a new file, call it app.py, and I also want to restart my Python session so that the code that we just created isn't going to be cluttered with the dashboard code that we are going to be making. I can click on this restart button in the console and it will restart my Python session and delete all of the variables and objects that I have just created in our code.py file.

Now let's put in the boilerplate code for a base Dash application. We'll import the packages that we'll be using. We'll create the app object and then also the code so we can run the application from the command line. In our application, the first thing that we're going to do is load our Penguin's data just like we did in our code.py file.

Next I want to go and define the actual layout of the application. We're going to go and set the layout attribute of our application and here we're going to have everything in one giant div. The div is going to have multiple parts to it. Each part will be a separate entity in a list. I'm going to create a space in our application for our radio button so I'm going to create another div for it. This div is going to have multiple pieces. The first one is going to be the label so when the user sees the radio buttons, they'll be labeled as species.

Next is our first Dash component. Earlier when we imported Dash, we also imported Dash DCC for Dash core components. We'll be using the radio item from Dash core components. We specify an ID so we can point to it later on. We provided the options for the species of Penguin we want the user to be selecting from. In this particular example, we'll make sure one of the options is selected and we'll set the inline parameter to be true so that the radio buttons run horizontally instead of vertically. That will end our first div holding the label and the radio button.

Below the radio button, we want to go and host a plot. So from Dash core components, we're going to put a placeholder for a graph. Later on when we go and create the figure, we'll give the figure an ID called histogram-plot. This is everything that we need to run our Dash application. In Positron, we can click the little play button right below the file name and you'll notice it will recognize that we are going to create and run a Dash application.

Here's our Dash application. We have our label called species and a radio button for the three different species in our data. Below we have a placeholder for the figure that we'll be making. My recommendation is always to try to do the layout component of an application, especially if you are starting an application from scratch. This way, you can work out any type of user interaction layout issues before designing a full application. And earlier, we ran the baseline code so that we know that the raw Python code will work. So you have your raw plotting code that you know works and now you have a layout that you can tinker with.

Setting up the callback

Okay, now we want to be able to connect the radio button value to a figure in Dash. The way we do this is to set up a callback function. First we're going to call the callback decorator. In the callback decorator, we will go and specify what are the outputs that we want this function to return and what are the inputs this function takes. The inputs and the outputs are going to be determined by the IDs from our layout. So I want the input to be the value that we're reading in from our radio button and the output is going to be placed using this ID for the graph. We imported input and output from Dash dependencies.

Let's go and set up our callback. So the function that we end up calling will generate a figure when the input value has changed. The first thing we're going to specify is the output for this function. The output is going to be linked to the ID in our layout. We want to create an output. The output is going to go into the layout location for histogram-plot. We also need to tell Dash what type of output this is. This is going to be a figure output.

Next we need to tell Dash what are the inputs it needs to listen for in this callback. Here the input is going to be the radio button. The ID we have is species-radio. And the input is going to be a value. The function we're going to create is going to take a single value and that value is going to be what gets passed in as the first input. So we'll use this placeholder or this input called selected species.

Next we're going to go and make all of the code that we just created from the code.py earlier and put it into the body of this function. Here you see the entire function that will return this Plotly figure and the corresponding callback that will listen to a particular input and knows where in the layout to return the output. Remember that this is a function so the function should return an object. Don't forget to return the actual figure object.

Now we have everything that we need for this dashboard. We have our layout defined and any code that needs to be run to change various parts of the layout when the user interacts with it. At the very bottom we also have the code to run the application. Let's go and run this Dash application.

Here's our new application. If we look at the code for our layout we have our species label, radio button, or our individual choices and a figure. Because we had set the default value to Adelie, the figure that got drawn is the base histogram showing all three species with the Adelie penguin highlighted. Because we set up our callbacks, as the user changes the value of the species, the figure will go and update. And there you have it.

This is a very simple Dash dashboard that gives the user some ability to explore the build length variable in our Palmer Penguins dataset.

Deploying to Posit Connect Cloud

Now let's go through the process to deploy this application. Earlier when we created this project, we had made sure that this is a Git repository. So what we're going to do is first commit all of our changes that we have just made. In particular, we're going to make sure that the app.py file is going to be checked in. In this particular example, we're going to check in all of the files that we have created.

Now we want to push our changes from our local computer to GitHub, but there's no GitHub repository yet. So we need to go and create that first. If you have a GitHub account and you're logged in, you can go to github.com slash new to go and create a new repository. I'm going to name my repository Penguin app.

Next, if we want to deploy our application for free, we want to make sure our application is public and we want to make sure we don't select a template. We do not select a readme, do not add an ignore file and do not add a license. This is because we've already created a repository on our local machine and already made a commit. We don't want GitHub to have its own set of commits that's incompatible with the one we have locally. So it is really important that you create a empty GitHub repository because we already have commits on our local machine. Then we can go and create our repository.

Now we need to go and hook up our local repository to the GitHub repository. Here I'm going to use SSH because I've already set up my SSH key to work with github.com. I'm going to make sure I click on the SSH and confirm that this is an SSH URL that begins with git at and copy that to my clipboard.

Back in Positron, we're going to go and run a couple of terminal commands to set everything up from our local machine to GitHub. I'll make the terminal a little bigger and control C to stop our dash application. You can see right now I'm on branch main, nothing to commit. My working tree is clean. The next thing I want to do is add GitHub as one of my remotes. So I'm going to say git remote add origin and then paste in that SSH URL I just copied. You can confirm that this is going to the git repository that you expect by running git remote dash B. Finally, if we're happy with everything, we can run git push origin main to send our code that we just committed on our local machine to GitHub. Back on GitHub, we can refresh the page and we'll now see that all of the code that we just wrote is now on our repository.

Next we're going to use Posit Connect Cloud to deploy our dash application for free. You can sign up if you don't already have an account or log in. You can create an account that's directly linked to your GitHub account. Once you're logged in, we're going to click on publish to go and publish our location. We're going to deploy from GitHub and it will ask to connect your GitHub repository to Posit Connect Cloud. Make sure you go and click everything and save the application to be installed.

Once everything's connected, we can go and select our framework from GitHub. We just created a dash dashboard, so we're going to select that. We're going to select our repository. We deployed on the main branch and our primary file for our dashboard was app.py. Right now you see that it asks me to go and create a requirements.txt file so that Posit Connect Cloud knows how to install our dependencies. So let's go and do that.

Back in Positron, we can run uv pip freeze requirements.txt. This will go and create a requirements.txt file for all the packages we have in our uv virtual environment. I'm going to commit the requirements.txt file and then push it back up to GitHub.

Now back to Posit Connect Cloud, I'm going to refresh my page, select dash again, select our Penguin application repository from our main branch using app.py. And now it recognizes that we have the requirement.txt file. So Connect Cloud has everything it needs to deploy this application. In this example, I'll make sure that the application gets deployed and becomes public. And then we're ready to publish the application.

And there you go. You have the application that we just created locally and the dash application is now deployed on Posit Connect Cloud. You can click on the home button on the left-hand panel and view the Penguin application. You'll notice that there's now a share button. And because we have the public access enabled, you can copy this shared URL, put it into your browser, and now you have the actual application deployed that anyone can view.

And because we have the public access enabled, you can copy this shared URL, put it into your browser, and now you have the actual application deployed that anyone can view.

And there you go. We created a new project on our local machine, created a dash application in it, sent all of that code up to GitHub, and got it deployed for free in Posit Connect Cloud. Thank you for following along. Stay tuned for more tips, tricks, and demos for your data science work.