Set up your data visualization application by launching it in your terminal and viewing it in a browser. This article walks through initializing a Python-based dashboard and previewing an interactive scatter plot with dynamic tooltips and color-coded pricing.
Key Insights
- Users initialize the application by navigating to the appropriate project directory and activating a conda environment before running the app.py file to launch the dashboard.
- The initial dashboard features a scatter plot showing an inverse relationship between horsepower and fuel efficiency, with price visually represented through color gradients from cool (low) to warm (high).
- An upcoming enhancement will introduce interactivity through company-based filtering, an engine size range slider, and a detailed tooltip section to display more car-specific information, as part of Noble Desktop’s data visualization curriculum.
This lesson is a preview from our Data Analytics Certificate Online (includes software). Enroll in this course for detailed lessons, live instructor support, and project-based training.
For our next step, we're going to get this running. Now to do that, we should switch to our terminal, which is still the terminal from last time around. I'm gonna close that and zoom in a little bit.
And we're in our base environment and we're in our home directory. And you folks should remember these steps, but I'll walk through them again because I'm gonna do them again. I'm going to change directory to our downloads folder and our data visualization curriculum main.
And I'll do one more step here at once, which is to change it to our notebook three folder. All right, if you're there on Mac, it should say notebook three. And on Windows, it should say the full path to notebook three.
Now we're still in our base environment. So let's change over to DVEnv. We'll say conda activate DVEnv.
And then we'll run Python, but we'll spell it right, app.py. I'll see if I made any mistakes, always possible. It's taking a minute. Oh, there we go.
Now you want to open up this in a browser. And here we go. Look at that.
It's a pretty nice if simple tool here, simple graph. We've got a nice little hover information on each of these. A tool tip is the word I was looking for.
And we can also see a relationship here. The greater the horsepower, the lower the fuel efficiency and vice versa, greater fuel efficiency like this Metro, very little horsepower. And we got some pretty big outliers on each side.
Well, they're not really outliers, but they're kind of on their own. And then everything follows this basic relationship here, this inverse relationship. We have the price in thousands.
As I was saying, it's a heat map colors. So the darker, bluer, colder colors mean lower price and the brighter, warmer colors mean higher price. So we have some that are very expensive and we can also see a relationship there that has horsepower increases, price generally increases.
Okay, so this is our basic graph. It works. What we're going to do is add three nice features.
We're going to allow the user to interact with this by changing which company it's displaying cars from. Right now it's displaying every company, all the cars, all 157 of them. But we're going to be able to let the user filter by Ford or Dodge or Toyota.
And we'll also add a slider that will allow us to filter by a range of engine size. And we'll additionally add a tool tip area down here that will display more information about each car. All right, we'll start doing that and exploring DASH's interactivity tools in our next video.