How to use Plotly and Dash for data visualization

Wuhan Yuan Chuanghui Returns, Let’s Talk About Large Models on April 20th”

This article is shared from Huawei Cloud Community " From Data to Deployment Using Plotly and Dash to Realize Data Visualization and Production Environment Deployment " by Lemony Hug.

Data visualization is a vital part of data analysis, which can help us understand data more intuitively and discover hidden patterns and trends. There are many powerful tools for data visualization in Python, with Plotly and Dash being two popular choices. Plotly provides a variety of interactive drawing functions, while Dash is a Python framework for building interactive web applications. This article will introduce how to use Plotly and Dash for data visualization, and demonstrate its application through case code.

Install Plotly and Dash

First, we need to install the Plotly and Dash libraries. You can install them using pip with the following command:

pip install plotly dash

Once the installation is complete, we can start using these two libraries.

Case code: simple data visualization application

Let's start with a simple example, let's say we have some CSV files of sales data and we want to create an interactive chart to visualize this data and deploy it as a web application. First, we need to import the necessary libraries:

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

#Read data
df = pd.read_csv('sales_data.csv')

#Create Dash application
app = dash.Dash(__name__)

# layout
app.layout = html.Div([
    html.H1("Sales Data Visualization"),
    dcc.Graph(
        id='sales-graph'
    )
])

# Callback
@app.callback(
    dash.dependencies.Output('sales-graph', 'figure'),
    [dash.dependencies.Input('sales-graph', 'value')]
)
def update_graph(selected_year):
    filtered_df = df[df['Year'] == selected_year]
    fig = px.bar(filtered_df, x='Month', y='Sales', title=f'Sales data-{selected_year}')
    return fig

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

In this example, we first read a CSV file named sales_data.csv and then created a Dash application. In the application's layout, we define a title and an empty chart area. We then set up a callback function so that when the user selects a different year, the chart will update to show the sales data for that year. Finally, we start the application by calling the run_server method.

Make sure your sales_data.csv file contains the necessary data fields (such as Year, Month, and Sales) so that the code can run properly.

Case Code: Advanced Data Visualization and Interaction

In the previous case, we showed how to create a simple data visualization application using Dash and Plotly. Now, let's further explore some advanced features like adding more interactivity and customization.

Let's say we want to show trends in sales data and allow users to see different trends by selecting different product categories. We can achieve this function through the following code:

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

#Read data
df = pd.read_csv('sales_data.csv')

#Create Dash application
app = dash.Dash(__name__)

# layout
app.layout = html.Div([
    html.H1("Sales Data Trend"),
    dcc.Dropdown(
        id='product-dropdown',
        options=[
            {'label': 'Product A', 'value': 'Product A'},
            {'label': 'Product B', 'value': 'Product B'},
            {'label': 'Product C', 'value': 'Product C'}
        ],
        value='Product A'
    ),
    dcc.Graph(
        id='sales-trend'
    )
])

# Callback
@app.callback(
    dash.dependencies.Output('sales-trend', 'figure'),
    [dash.dependencies.Input('product-dropdown', 'value')]
)
def update_trend(selected_product):
    filtered_df = df[df['Product'] == selected_product]
    fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}Sales Trend')
    return fig

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

In this example, we added a drop-down menu that allows the user to select different product categories. As the user selects a different product, the chart will update to show sales trends for the selected product. This gives users more flexibility to explore sales of different products.

In addition to simple line charts, Plotly also provides a wealth of chart types and customization options to meet more complex visualization needs. Dash allows us to build interactive web applications and dynamically update charts through callback functions to provide users with a better experience.

Add interactivity and styling

In the above case, we showed how to use Dash and Plotly to create a data visualization application and provide basic interactive functions. Now, let's add some further interactivity and styling to make our app more attractive and easy to use.

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

#Read data
df = pd.read_csv('sales_data.csv')

# Get unique product list
available_products = df['Product'].unique()

#Create Dash application
app = dash.Dash(__name__)

#Apply style
app.layout = html.Div([
    html.H1("Sales Data Trend", style={'textAlign': 'center'}),
    html.Div([
        html.Label("Select product:"),
        dcc.Dropdown(
            id='product-dropdown',
            options=[{'label': product, 'value': product} for product in available_products],
            value=available_products[0]
        )
    ], style={'width': '50%', 'margin': 'auto', 'textAlign': 'center'}),
    dcc.Graph(
        id='sales-trend',
        config={'displayModeBar': False} # Disable the mode bar of the chart
    )
], style={'padding': '20px'})

# Callback
@app.callback(
    dash.dependencies.Output('sales-trend', 'figure'),
    [dash.dependencies.Input('product-dropdown', 'value')]
)
def update_trend(selected_product):
    filtered_df = df[df['Product'] == selected_product]
    fig = px.line(filtered_df, x='Month', y='Sales', title=f'{selected_product}Sales Trend')
    return fig

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

In this example, we added some styling to make the app look more attractive. We centered the title and added some white space around the product dropdown to add to the aesthetics of the layout. Additionally, we disabled the chart's mode bar to simplify the user interface.

With these improvements, our app now not only provides powerful interactive data visualization capabilities, but also has a better appearance and user experience. This will make users more willing to use our apps to explore data and gain valuable insights from it.

Deploy to production environment

After completing the development of a data visualization application, we usually want to deploy the application to a production environment so that other users can access and use it. In this section, we will discuss how to deploy our Dash application to a production server.

Using Gunicorn and Nginx

Gunicorn is a Python WSGI (HTTP server) HTTP server that can handle HTTP requests from web applications. Nginx is a high-performance HTTP and reverse proxy server, usually used for processing static files and load balancing.

First, we need to install Gunicorn and Nginx:

pip install gunicorn
sudo apt-get install nginx

Next, we use Gunicorn to run our Dash application:

gunicorn -w 4 -b 0.0.0.0:8050 your_app:app

This will start the Gunicorn server locally and run the Dash application on port 8050. Next, we need to configure Nginx as a reverse proxy to forward HTTP requests to the Gunicorn server.

Configure Nginx

Add the following content to Nginx's configuration file:

server {
    listen 80;
    server_name your_domain.com;

    location / {
        proxy_pass http://127.0.0.1:8050;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Replace your_domain.com with your domain name. Then reload the Nginx configuration:

sudo systemctl reload nginx

Now, your Dash application has been successfully deployed to the production environment and can be accessed through your domain name.

Use HTTPS

To improve security, we can also configure Nginx to use the HTTPS protocol. You need to obtain an SSL certificate and configure it into Nginx. An easy way is to use Let's Encrypt to get a free SSL certificate. Here is a simple configuration example:

server {
    listen 80;
    server_name your_domain.com;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name your_domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    location / {
        proxy_pass http://127.0.0.1:8050;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Once configured this way, your Dash application will be served over the HTTPS protocol, and all HTTP requests will be redirected to HTTPS.

Integrated user authentication and rights management

In some cases, you may want to restrict access to a data visualization application to only specific users or user groups. To achieve this, we can integrate user authentication and rights management systems.

Use basic authentication

A simple method is to use Basic Authentication. You can configure basic authentication in Nginx to require users to provide a username and password before accessing the application. The following is a sample Nginx configuration:

server {
    listen 443 ssl;
    server_name your_domain.com;

    ssl_certificate /etc/letsencrypt/live/your_domain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/your_domain.com/privkey.pem;

    location / {
        auth_basic "Restricted Access";
        auth_basic_user_file /etc/nginx/.htpasswd;

        proxy_pass http://127.0.0.1:8050;
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

In this configuration, we enable basic authentication using the auth_basic directive and specify a password file /etc/nginx/.htpasswd. You need to use the htpasswd tool to create this password file and add the username and password to it.

Use OAuth authentication

Another common method is to use OAuth authentication. Through OAuth, you can delegate the user's authentication process to third-party identity providers, such as Google, GitHub, etc. Once a user has successfully authenticated with a third-party identity provider, they can access your application.

You can use Dash's dash-auth library to implement OAuth authentication. This library provides an easy way to integrate multiple OAuth providers and restrict access to Dash applications.

Add permission management

In addition to authentication, you may also want to authorize users to determine whether they have access to specific data or functionality. A common approach is to implement a role-based access control (RBAC) system in the application. With RBAC, you can assign users to different roles and restrict access to different roles in your application.

You can implement an RBAC system in your Dash application to determine whether a user has permission to perform certain actions based on their role. This might involve checking a user's role when they log in and dynamically adjusting functionality and data access in the app based on the role.

Logging and error handling

Logging and error handling are very important when deploying applications in production environments. Good logging can help you track the operation of your application and detect and solve problems in a timely manner. Error handling can improve application stability and reduce service interruptions caused by errors.

Configure logging

First, let's configure logging for our application. Dash applications usually output logs to stdout or stderr. We can record these logs by redirecting them to a file. We can also use Python's logging module to implement more advanced logging.

import logging

logging.basicConfig(filename='app.log', level=logging.INFO)

Adding the above code to the Dash application will log the log to a file named app.log and set the logging level to INFO. You can adjust the log level as needed to log different levels of information.

Error handling

Another important aspect is error handling. When errors occur in the application, we want to be able to capture and log these errors while providing user-friendly error messages.

In a Dash application, you can use try-except blocks to catch exceptions and return an error page or display a friendly error message when an exception occurs.

@app.server.errorhandler(Exception)
def handle_error(e):
    logging.error(f'An error occurred: {str(e)}')
    return html.H1("Oops! Something went wrong."), 500

In the above code, we define an error handling function handle_error, which catches all exceptions. When an exception occurs, it will log the error message and return a page containing the error message to the user.

Through good logging and error handling, we can better understand the operation of the application and take appropriate measures when errors occur to ensure the stability and reliability of the application.

Monitoring and performance optimization

Finally, once the application is deployed into a production environment, we also need to regularly monitor the performance of the application and take steps to optimize performance. This includes monitoring the application's response time, memory usage, CPU load and other indicators, and optimizing based on the monitoring results.

You can use monitoring tools such as Prometheus, Grafana, etc. to monitor application performance indicators, and make adjustments and optimizations based on the monitoring results.

Summarize

This article details the key steps and necessary measures to deploy Dash applications to a production environment. First, we discussed how to deploy Dash applications using Gunicorn and Nginx, and showed how to improve application security through the HTTPS protocol. Next, we explored how to integrate user authentication and rights management systems, and how to configure logging and error handling to improve application stability and reliability. Finally, we emphasize the importance of monitoring and performance optimization and propose some monitoring tools and optimization methods. Through these measures, we can deploy the Dash application into the production environment, make it more robust and reliable in the production environment, and provide users with high-quality services and experience.

Click to follow and learn about Huawei Cloud’s new technologies as soon as possible~