Creating Beautiful Data Visualizations with Plotly and Dash (96/100 Days of Python)

Day 96 of the “100 Days of Python” blog post series covering data visualization with Plotly-Dash

Data visualization is essential for understanding complex datasets and communicating insights. Plotly and Dash are powerful Python libraries that can help you create interactive, web-based visualizations with ease. In this tutorial, we’ll walk through the steps of creating stunning data visualizations using these libraries.

Before we start, let’s make sure you have the required libraries installed:

pip install plotly dash pandas

Creating a Simple Plot with Plotly Express

Plotly Express is a high-level interface for creating various types of plots. Let’s start by creating a simple scatter plot:

import pandas as pd
import plotly.express as px

df = pd.read_csv('sample-data.csv')

fig = px.scatter(df, x='x_column', y='y_column', title='Scatter Plot Example')
fig.show()

The file sample-data.csv can have content like the following:

category,x_column,y_column
A,23,56
A,45,78
A,38,6pr2
A,50,85
B,15,34
B,28,50
B,33,67
B,25,42
C,60,120
C,73,145
C,81,170
C,66,130

The resulting interactive plot after running the program above

Customizing the Plot

You can customize various aspects of the plot using the following methods:

• Change marker size, color, and symbol:

fig.update_traces(marker=dict(size=10, color='red', symbol='circle'))
fig.show()

• Change the plot’s background color:

fig.update_layout(plot_bgcolor='lightgray')

• Add axis labels and a custom title:

fig.update_layout(xaxis_title='X Axis Label', yaxis_title='Y Axis Label', title_text='Custom Title')

Creating a Dash Web Application

Now that you’ve created a beautiful plot, let’s use Dash to create a web application to display it:

import pandas as pd
import plotly.express as px
from dash import Dash
from dash import dcc
from dash import html

df = pd.read_csv('sample-data.csv')

fig = px.scatter(df, x='x_column', y='y_column', title='Scatter Plot Example')
fig.update_traces(marker=dict(size=10, color='red', symbol='circle'))
fig.update_layout(plot_bgcolor='lightgray')
fig.update_layout(xaxis_title='X Axis Label', yaxis_title='Y Axis Label', title_text='Custom Title')

app = Dash(__name__)

app.layout = html.Div([
    html.H1('My Data Visualization App'),
    dcc.Graph(id='my_graph', figure=fig)
])

if __name__ == '__main__':
    app.run_server(debug=True)

This code creates a simple Dash web application with a single Graph component that displays your customized scatter plot.

Adding Interactivity with Dash Callbacks

You can make your web application more interactive by using Dash callbacks. For example, let’s add a dropdown menu to filter the data based on a specific category:

import pandas as pd
import plotly.express as px
from dash import Dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output

df = pd.read_csv('sample-data.csv')

app = Dash(__name__)

app.layout = html.Div([
    html.H1('My Interactive Data Visualization App'),
    dcc.Dropdown(id='category_dropdown',
                 options=[{'label': category, 'value': category} for category in df['category'].unique()],
                 value='All Categories'),
    dcc.Graph(id='my_graph')
])


@app.callback(
    Output('my_graph', 'figure'),
    Input('category_dropdown', 'value'))
def update_graph(selected_category):
    if selected_category == 'All Categories':
        filtered_df = df
    else:
        filtered_df = df[df['category'] == selected_category]

    fig = px.scatter(filtered_df, x='x_column', y='y_column', title='Scatter Plot Example')
    fig.update_traces(marker=dict(size=10, color='red', symbol='circle'))
    fig.update_layout(plot_bgcolor='lightgray')
    fig.update_layout(xaxis_title='X Axis Label', yaxis_title='Y Axis Label', title_text='Custom Title')

    return fig


if __name__ == '__main__':
    app.run_server(debug=True)

Here, we’ve added a dropdown menu that allows users to filter the data based on a specific category. The update_graph function is called when the selected category changes, and it creates a new scatter plot with the filtered data. The updated plot is then returned as the output of the callback, which updates the Graph component in the Dash app.

Now, when you run the application and select a category from the dropdown menu, the scatter plot will update to display only the data points corresponding to that category. This interactivity enhances the user experience and allows for a deeper exploration of the data.

In this tutorial, we discussed some of the very basic things that can be done with Dash. You can learn way more about the topic by exploring their amazing docs.

What’s next?

• If you found this story valuable, please consider clapping multiple times (this really helps a lot!)
• Hands-on Practice: Free Python Course
• Full series: 100 Days of Python
• Previous topic: Creating an Interactive Website with Streamlit
• Next topic: Creating Custom ChatGPT Using the OpenAI API