Performance issues when including simple Plotly visualisation in html, only when MathJax is enabled

📊 Plotly Python
1

I have implemented a Plotly line plot with an interactive slider, which I have saved as a .html file using fig.to_html(include_plotlyjs='cdn', include_mathjax='cdn'). When I include this .html file in my Jekyll blog, I find that even though there are only a moderate number of traces (approx. 50 in total), the interactive slider is too slow and unresponsive to be usable.

However, when I disable MathJax, by removing the keyword argument when creating the .html file, the interactive slider becomes smoothly functional again in my Jekyll blog again.

None of these issues are encountered when I run the code in Jupyter.

Does anyone here know why this might be the case?

I am currently deciding whether I should address this issue by amending:

1. Mathjax CDN addresses.

2. Attempting to learn dash to implement my visualisation rather than embedding using .html.

Minimal working example.

I am not sure how useful including this working example is, given that the whole point of the issue is that pathological functionality only occurs in a Jekyll blog. Therefore I would also appreciate if members here could suggest how I could about reproducing this issue appropriately. Perhaps I could upload a test blog page with just the visualisation to see?

# Import modules.
import plotly.graph_objects as go
import numpy as np
from scipy.stats import norm

# Supplementary code on which the visualisation is based.

def risk_hodges_estimator(theta, sample_size):
    n = sample_size
    w1 = ((n ** 0.25) + theta * np.sqrt(n)) / np.sqrt(2)
    w2 = ((n ** 0.25) - theta * np.sqrt(n)) / np.sqrt(2)

    risk = ((n * (theta ** 2))
            + (w1 / np.sqrt(np.pi)) * np.exp(-(w1 ** 2))
            + ((1 - n * (theta ** 2)) * norm.cdf(-w1 * np.sqrt(2)))
            + (w2 / np.sqrt(np.pi)) * np.exp(-(w2 ** 2))
            + ((1 - n * (theta ** 2)) * norm.cdf(-w2 * np.sqrt(2))))

    return risk

theta_range = np.linspace(-2, 2, num=1000)

# Initialise graph object.
fig = go.Figure()

# Add 'traces' for each slider step, which in my case, means that each trace is a risk function.
sample_size_args = [1] + [n * 10 for n in range(1, 51)] 
for step in sample_size_args:
    fig.add_trace(
        go.Scatter(
            visible=False,
            line=dict(color="royalblue", width=1),
            x=theta_range,
            y=risk_hodges_estimator(theta_range, step)))

# Set which trace or curve you want to be visible prior to the visualisation being activated.
fig.data[0].visible = True

# Create and add slider.
steps = []
for i, sample_size in enumerate(sample_size_args):
    step = dict(
        method='update',
        args=[{'visible': [False] * len(fig.data)},
              {'title': 'Risk function of the Hodges-Le Cam estimator, ' +
                         'for sample size n = ' + str(sample_size) + '.'}],
        label=str(sample_size)
    )
    step['args'][0]['visible'][i] = True
    steps.append(step)

# 'active' kwarg sets value of slider to start at.
sliders = [dict(
    active=0,
    currentvalue={'prefix': 'Sample size n = '},
    pad={"t": 50},
    steps=steps
)]
fig.update_layout(
    sliders=sliders,
    xaxis_title=r'$\theta$',
    yaxis_title=r'$n \cdot R_n(\tilde{\theta}_n, \theta)$',
    title='Risk function of the Hodges-Le Cam estimator, for sample size n = 1.',
    width=700,
    height=600
)

fig.update_yaxes(range=[0,14])
fig.show()