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()
```