Create your first web app: Interactive data panel for visualizatoin correlations

In this tutorial, I will demonstrate how to create a simple, interactive web app that visualizes correlations between variables. We will also walk you through the necessary environment setup and deployment steps.

Environment Setup

First, create a new conda environment and install the required packages:

conda create --name new_panel_env python=3.8
conda activate new_panel_env
## those package version are tested by myself with no conflict
conda install -c conda-forge panel bokeh==2.4.3 holoviews==1.14.8 pandas==1.2.4 hvplot==0.8.2

Plotting Script

import panel as pn
import holoviews as hv
import pandas as pd
import numpy as np
import hvplot.pandas
hv.extension('bokeh')

# 1. Read the data
df_merge = pd.read_csv("./data/df_merge.csv")
factor_name = [c for c in df_merge.columns if 'factor_' in c]
var_ = factor_name + [...]

# Replace 'if tag bellow after columns definition
df_var = df_merge[var_]
df_var = df_var.replace('<LD', np.nan)
df_var = df_var.replace('<DL', np.nan)
df_var = df_var.dropna(axis=1, how='all')
df_corr = df_var.corr()
corr = df_corr  # .abs()

# Mask the upper triangle of the heatmap
corr.values[np.triu_indices_from(corr, 0)] = np.nan
tick_label = [...]

# 2. Create heatmap
heatmap = hv.HeatMap((corr.columns, corr.index, corr)) \
    .opts(
        tools=['hover'], height=1400, width=1400, fontsize=12,
        toolbar='above', colorbar=False, cmap='RdBu_r',
        invert_yaxis=True, xrotation=90, xlabel='', ylabel='',
        title='Correlation heatmap'
    )

# Define tap stream with heatmap as source
tap_xy = hv.streams.Tap(source=heatmap, x='As', y='K')

# Calculate correlation plot based on tap
def tap_corrplot(x, y):
    # Drop missing values if there are any
    df_notnull = df_merge[['time_x', x, y]].dropna(how='any')
    scatter1 = hv.Scatter((df_notnull[x], df_notnull[y]), x, y, label='scatterplot') \
        .opts(
            tools=['hover'], height=700, width=900, fontsize=12, size=5,
            alpha=0.2, ylim=(df_notnull[y].min(), df_notnull[y].max()),
            color='#30a2da', framewise=True,
        )

    timeseries1 = df_merge.hvplot(x='time_x', y=x, label=x, ylabel='Value').opts(
        height=700, width=900
    )

    timeseries2 = df_merge.hvplot(x='time_x', y=y, label=y, ylabel='Value').opts(
        height=700, width=900
    )

    return hv.Layout([scatter1, timeseries1 * timeseries2]).cols(1)

tap_dmap = hv.DynamicMap(tap_corrplot, streams=[tap_xy])

app_bar = pn.pane.Markdown("# Correlation Matrix Checker")
app = pn.Column(
    app_bar,
    pn.Spacer(height=10),
    pn.Row(
        heatmap,
        pn.Column(
            tap_dmap,
        ),
    ),
)

app.servable(title='Correlation matrix checker')

Save the above code in a Python file named app.py. This app has a heatmap of correlations between variables, which serves as the backdrop for an interactive scatterplot and time series based on your selections.

Running the Web App

Finally, to run your web app, open a terminal in the folder containing the app.py script and execute the following command:

panel serve app.py --show

Your web app will open in your default web browser with an interactive visualization panel showing a correlation matrix of the dataset, the scatter plots, and time series of two variables based on your selection.

In summary, this tutorial showed you how to build a simple and interactive web app for visualizing correlations between variables. We covered the steps for setting up the appropriate environment, creating visualization scripts, and running the web application. You can use these techniques to analyze complex datasets and produce clear visualizations that aid in your understanding and interpretation of the data.