How to Use Dash For Interactive Web Visualizations

Dash is an open-source framework for building analytical web applications. No JavaScript required – just write in Python. This makes Dash ideal for building data visualizations and dashboards directly from your Python code. In this guide, we'll create a basic Dash app with a few interactive visualizations.

Dash uses Flask under the hood – which means you can also serve your Dash apps easily, just like you serve a Flask app.

Einblick allows you to deploy these visualizations directly from our canvas, meaning you no longer need to use third-party services or manage additional deployment resources in order to bring your model to production. Want to try it yourself? Simply clone this canvas and try it yourself.

NOTE: Even the Einblick free tier allows you to create Endpoints, but will expire after 30 minutes of inactivity.

Jump to Just the Python Code

1. Prepare the Data for Visualization

Let's use the well-known Iris dataset for creating a few different plots.

!pip install plotly

import plotly.express as px

# Load the Iris dataset
iris = px.data.iris()

2. Initialize the Dash Application

Here, we'll initialize the Dash app and start laying out the components. For each plot or figure you create with Plotly, you'll use a Graph component in Dash.

!pip install dash pandas

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

app = dash.Dash(__name__)

# Define the layout of the app
# We'll finish this code in the next section
app.layout = html.Div([
    html.H1("Iris Dataset Visualizations"),

3. Let’s make a few graphs, using Plotly

Plotly is a powerful and flexible graphing package, with many built-in types of charts that are interactive. Here, we just make a scatter plot and a histogram.

# Continue code where we left off above
    dcc.Graph(
        id='scatter-plot',
        figure=px.scatter(iris, x="sepal_width", y="sepal_length",
                          color="species", title="Sepal Width vs Length")
    ),

    dcc.Graph(
        id='histogram',
        figure=px.histogram(iris, x="petal_length", color="species",
                            title="Petal Length Distribution")
    )
])

We recommend you try using Einblick Prompt to create charts – just tell us what you want to create and the AI helper will generate the right chart for you.

# Calculate the correlation matrix for the iris dataset
correlation_matrix = iris.corr()
heatmap = px.imshow(correlation_matrix)

Then you can easily add the resulting heatmap to the app by adding it with another dcc.Graph():

app.layout = html.Div([
   html.H1("Iris Dataset Visualizations"),
   dcc.Graph(id='scatter-plot',
       figure=px.scatter(iris, x="sepal_width", y="sepal_length",
                         color="species", title="Sepal Width vs Length")),
   dcc.Graph(id='histogram',
       figure=px.histogram(iris, x="petal_length", color="species",
                           title="Petal Length Distribution")),
   dcc.Graph(id='scatter-plot', figure=heatmap)
])

4. Run the Dash App

To run the Dash app, simply call app.run_server() In Einblick, you should use “0.0.0.0” for the host and 7000 for the port.

# Run the server
if __name__ == '__main__':
    app.run_server(debug=True, host="0.0.0.0", port=7000)

Within Einblick, you must first enable incoming connections to your Canvas by going to Kernel Settings → Incoming Connections. Remember to keep your URL string safe, as the unique prefix acts as your API key.

5. Access the Dash App

Once you've started your app, you can access your Dash visualizations by visiting https://your-einblick-endpoint-string.proxy.einblick.ai/ in your web browser.

You can also add a parameter for jupyter_server_url = https://your-einblick-endpoint-string.proxy.einblick.ai/ (or whichever URL you are forwarding it to) if you also want to show it in the output of your Python notebook cell.

Just the Python Code

This section includes only the Python code necessary for the simple Dash application.

!pip install dash pandas plotly

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

# Prepare data
iris = px.data.iris()

# Calculate the correlation matrix for the iris dataset
correlation_matrix = iris.corr()

# Create a heatmap using plotly's heatmap() function
heatmap = px.imshow(correlation_matrix)

# Set the x-axis labels of the heatmap to the feature names of the iris dataset
heatmap.update_xaxes(title_text="Features", tickvals=list(range(len(iris.columns))), ticktext=iris.columns)

# Set the y-axis labels of the heatmap to the feature names of the iris dataset
heatmap.update_yaxes(title_text="Features", tickvals=list(range(len(iris.columns))), ticktext=iris.columns)

# Display the heatmap
heatmap.show()

# Initialize the app
app = dash.Dash(__name__)

# Define the layout of the app
app.layout = html.Div([
    html.H1("Iris Dataset Visualizations"),

    dcc.Graph(
        id='scatter-plot',
        figure=px.scatter(iris, x="sepal_width", y="sepal_length",
                          color="species", title="Sepal Width vs Length")
    ),

    dcc.Graph(
        id='histogram',
        figure=px.histogram(iris, x="petal_length", color="species",
                            title="Petal Length Distribution")
    ),

   dcc.Graph(id='scatter-plot', figure=heatmap),
  
])

# Run the server; reference the proxy url in parameter jupyter_server_url = https://XXX-XXX-XXX-XXX-XXX.proxy.einblick.ai if you want to also show in output
if __name__ == '__main__':
    app.run_server(debug=True, host="0.0.0.0", port=7000)

About

Einblick is an AI-native data science platform that provides data teams with an agile workflow to swiftly explore data, build predictive models, and deploy data apps. Founded in 2020, Einblick was developed based on six years of research at MIT and Brown University. Einblick is funded by Amplify Partners, Flybridge, Samsung Next, Dell Technologies Capital, and Intel Capital. For more information, please visit www.einblick.ai and follow us on LinkedIn and Twitter.