We’ve all been there.
The dreaded 4:00 PM on a Friday afternoon email from the boss, asking for “updated numbers”.
There goes your weekend plans.
Time to text your friends and family:
- “Sorry, I’m going to be late for dinner. Again.”
- “Can’t make it to the game tonight — gotta work late.”
- “I. Want. A. New. Job.”
For me, this happened a few times. And then I found a way to save myself so much time.
The answer:
Interactive dashboards that can be updated in seconds with Python.
I got started simply. And that’s what I recommend others do as well.
- Writing simple code that feels like English
- Turning chaotic data into something useful
- Making interactive data tools instead of random reports
And now? I build interactive dashboards that not only look sleek but tell the story behind the data. With a few clicks, I can see patterns, make predictions, and deliver insights that used to take days to uncover.
And it’s all thanks to Python. And you can do it too.
In this guide, I’ll walk you through step-by-step how to turn data into a dashboard with Python.
If you follow these steps for your next project, just imagine how you’ll feel:
- Proud that you created something awesome
- Empowerment. You are now a valuable member of your team.
- New “aha” moments you get by seeing and interacting with the data
- Relieved from never feeling overwhelmed when your boss asks you for an update
There’s no going back once you have these skills.
Alright, let’s visualize, letting Python do the heavy lifting.
Step 1: Import Necessary Libraries
First things first, let’s import the libraries we need. Paste this code into a new Google Collab notebook cell and run it. You can use my notebook to help you get started.
!pip install dash !pip install dash-bootstrap-components from dash import Dash, html, dcc, Input, Output import dash_bootstrap_components as dbc import plotly.express as px import pandas as pd
Step 2: Load and Preprocess the Data
Now, let’s load our insurance data. Use Pandas to read the CSV file and then make sure we convert dates and convert columns with $ symbols to numeric for easy analysis.
url = 'https://query.data.world/s/5g2lhogelii6q2weglkiig7z2vkbrx?dws=00000'
insurance_data = pd.read_csv(url)
# Convert 'birthdate' to datetime format (if it's not already)
insurance_data['birthdate'] = pd.to_datetime(insurance_data['birthdate'])
# Remove the dollar sign and convert 'claim_amt' to numeric
insurance_data['claim_amt'] = insurance_data['claim_amt'].replace('[\$,]', '', regex=True).astype(float)
# Displaying the first few rows of the dataset
insurance_data.head()
Step 3: Create a Basic Plotly Graph
Before diving into Dash, let’s create a basic Plotly graph. This helps us understand our data visually.
Create four different graphs:
- Claims by Car Make (Bar Chart)
- Average Claim Amount by Car Make (Bar Chart)
- Total Claims over Time (Line Chart)
- Claims Distribution by Marital Status (Pie Chart)
fig = px.histogram(insurance_data, x='car_make', title='Claims by Car Make')
avg_claim_fig = px.bar(
insurance_data.groupby('car_make')['claim_amt'].mean().reset_index(),
x='car_make',
y='claim_amt',
title='Average Claim Amount by Car Make'
)
claims_over_time_fig = px.line(
insurance_data.groupby(insurance_data['birthdate'].dt.year)['claim_freq'].sum().reset_index(),
x='birthdate',
y='claim_freq',
title='Total Claims Over Time'
)
claims_by_status_fig = px.pie(
insurance_data,
names='marital_status',
title='Claims Distribution by Marital Status'
)
fig.show()
avg_claim_fig.show()
claims_over_time_fig.show()
claims_by_status_fig.show()
Step 4: Set Up Your Dash App
Now that we have a good sense of the data and some basic visuals, let’s put them together.
Dash is an open-source Python framework for creating awesome interactive web applications effortlessly. It’s perfect for turning data analysis into visual insights with minimal coding.
Here’s how to do it:
# Initialize the Dash app
app = Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
# Dropdown Style
dropdown_style = {
'width': '50%',
'padding': '10px',
'min-width': '300px',
'margin': 'auto',
'display': 'block',
}
# Graph Style
graph_style = {
'height': '300px', # Adjust height as necessary
'padding': '15px',
}
# App Layout with inline styles
app.layout = html.Div([
html.Div([
dcc.Dropdown(
id='car-make-dropdown',
options=[{'label': i, 'value': i} for i in insurance_data['car_make'].unique()],
value=insurance_data['car_make'].unique()[0],
style=dropdown_style
)
], style={'padding': '20px 0'}),
html.Div([
html.Div([
dcc.Graph(id='claims-graph', style=graph_style)
], style={'width': '49%', 'display': 'inline-block', 'padding': '10px'}),
html.Div([
dcc.Graph(id='avg-claim-graph', style=graph_style)
], style={'width': '49%', 'display': 'inline-block', 'padding': '10px'}),
]),
html.Div([
html.Div([
dcc.Graph(id='claims-over-time-graph', style=graph_style)
], style={'width': '49%', 'display': 'inline-block', 'padding': '10px'}),
html.Div([
dcc.Graph(id='claims-by-status-graph', style=graph_style)
], style={'width': '49%', 'display': 'inline-block', 'padding': '10px'}),
])
], style={'padding': '0 20px'})
This might look complicated, but a lot of it is styling. I think adding in better formatting really makes a difference.
But all the code is doing is creating the app object, defining the layout, and then adding the charts to the layout.
No need to overthink this step!
Step 5: Add Callbacks for Interactivity
Dash uses callbacks for interactivity.
If you aren’t familiar with callbacks, imagine you’re playing a video game, and when you press a button, something cool happens on the screen—that’s like a callback in Dash!
In Dash, a callback is a piece of code that waits for something to happen (like pressing a button or picking something from a list), and when it does, the callback makes the app do something in response, like show you a new chart or update what you see on the page.
Let’s add one for each graph to update our dashboard based on the selected car make:
@app.callback(
Output('claims-graph', 'figure'),
[Input('car-make-dropdown', 'value')]
)
def update_main_graph(selected_make):
filtered_data = insurance_data[insurance_data['car_make'] == selected_make]
fig = px.histogram(filtered_data, x='car_year', title=f'Claims for {selected_make}')
return fig
@app.callback(
Output('avg-claim-graph', 'figure'),
[Input('car-make-dropdown', 'value')]
)
def update_avg_claim_graph(selected_make):
filtered_data = insurance_data[insurance_data['car_make'] == selected_make]
avg_claim_fig = px.bar(
filtered_data.groupby('car_year')['claim_amt'].mean().reset_index(),
x='car_year',
y='claim_amt',
title=f'Average Claim Amount for {selected_make} Over Years'
)
return avg_claim_fig
@app.callback(
Output('claims-over-time-graph', 'figure'),
[Input('car-make-dropdown', 'value')]
)
def update_claims_over_time_graph(selected_make):
filtered_data = insurance_data[insurance_data['car_make'] == selected_make]
claims_over_time_fig = px.line(
filtered_data.groupby(filtered_data['birthdate'].dt.year)['claim_freq'].sum().reset_index(),
x='birthdate',
y='claim_freq',
title=f'Total Claims Over Time for {selected_make}'
)
return claims_over_time_fig
@app.callback(
Output('claims-by-status-graph', 'figure'),
[Input('car-make-dropdown', 'value')]
)
def update_claims_by_status_graph(selected_make):
filtered_data = insurance_data[insurance_data['car_make'] == selected_make]
claims_by_status_fig = px.pie(
filtered_data,
names='marital_status',
title=f'Claims Distribution by Marital Status for {selected_make}'
)
return claims_by_status_fig
Step 6: Run Your App
Finally, let’s run our app! Add this at the end of your notebook:
app.run_server(mode='inline')
Here’s what you’ll see in Google Colab:
 Interactive Auto Insurance Claims Dashboard Created with Python |
View post on imgur.com
Great job!