Build a basic interactive data visualization app using Dash, Plotly Express, and pandas within a Python file. This article walks through creating a scatterplot to analyze relationships in car data, including customizing visuals and setting up the app structure.
Key Insights
- The project involves creating a Dash application in a Python file (app.py) to visualize car sales data stored in a CSV file using a scatterplot.
- The scatterplot uses horsepower as the x-axis and fuel efficiency as the y-axis, with point color representing car price, and hover text displaying the model name.
- The article demonstrates how to integrate key libraries like Dash, Plotly Express, and pandas to load data, build the figure, structure the layout, and launch the app using app.run(debug=True), as taught in Noble Desktop’s data visualization curriculum.
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.
To get started here, let's create a file. So in the same directory as car-sales.csv, usually we've provided you an app.py, but it's good practice to make your own files. So where it says car-sales.csv, if you click on it, you'll be making something in the same directory.
In vs. Code, you can make your files other ways, many other ways, but vs. Code is a nice way to do it, simple way. Click on new file and make a file called app.py. Now, first we'll just do a very simple scatterplot and let's get that on the page. We're going to say from dash import capital D dash, the dash core components and the HTML.
We're also going to need Plotly and specifically Plotly Express. We're going to import Plotly.express as PX as is typical. We'll also be using pandas to get our data together.
Import pandas as PD. And we'll also be using some new dash abilities, input and output to take input and give output to the user. We're going to say from dash dot dependencies, import input and output.
Okay. Let's make a cars data frame. We'll read our CSV file in and it's in the same directory.
We can just say car sales dot CSV. We're going to make an app, a dash app. We're going to make a figure, call it fig or why not? Let's call it scatter fig.
And it's going to be a Plotly scatterplot and data for it will be our cars. On the X axis will be the price in thousands and on the Y will be the sales in thousands for now. Let's make it more interesting.
I'd feel like we need it to be a cooler plot than that. Let's make it horsepower versus fuel efficiency. We can see a relationship between those two things.
As horsepower increases, we'll see fuel efficiency decrease. We'll also, let's throw in a couple more fun things. We'll add a color to them.
That is the price in thousands. What that means is there will be a color scale and the higher the price in thousands will be, the hotter looking the dot will be. You'll see what I'm talking about when we visualize this, always worth a thousand words.
And we'll also say what to display when the user hovers over them and it will be the model name. Okay. Now that we've got that, let's display it with app.layout. We'll use html.div and we'll pass it a list because we're going to start with two things to display.
One is a title, which will make an h1, maybe fuel efficiency versus horsepower. And don't forget to comma here, we are in a list. That html.h1 call will give us back an element and then our call to dcc.graph will give us back a graph.
And those are the two children that go in the list of html.div. And what we'll give it is our figure equals our scatterfig. And finally, app.run. And we'll add debug equals true so we get a nice reload. All right, save it if you haven't saved it.
And in our next video, we'll walk through again how to get this app running and we'll visualize our results.