Plotly interactive plots not showing in Jupyter book

[rohanjha123]

Describe the bug

Hi, I'm running into the same issue as #93 but unfortunately their fix didn't quite work for me. This is what my Plotly plot looks like in my local jupyter lab instance:

As the plot renders fine locally, I would expect it to also render in the book. However, I'm afraid that plot simply doesn't appear in the locally rendered jupyter book:
.
This is a problem for me as I'm attempting to make a book that would involve teaching visualizations in Python, and interactive plots made with Plotly are essential for teaching that.

Reproduce the bug

Here is a link to the notebook which is causing these issues. Try cloning my repo and rendering it locally.

Note: I've tried everything in this thread, and my config.yaml includes the following lines:

sphinx:
  config:
    html_js_files:
    - https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js

List your environment

(sklearn-env) rohanjha@Rohans-Air textbook % jupyter-book --version
Jupyter Book      : 0.15.1
External ToC      : 0.3.1
MyST-Parser       : 0.18.1
MyST-NB           : 0.17.2
Sphinx Book Theme : 1.0.1
Jupyter-Cache     : 0.6.1
NbClient          : 0.5.13

plotly version 5.9.0
Python 3.11.1
rendered locally with jupyter lab 3.6.3, on Chrome 120.0 (using arm64 architecture) on a MacOS

[agoose77]

Thanks for the report! Did you delete the book from your repo? I can no longer see it.

[rohanjha123]

Oops, I instead moved my repo here. Here is the new link to the notebook, and here is the rendered page where the plot doesn't work. Sorry for not updating this post sooner!

[agoose77]

I was able to reproduce the issue. Here's what fixed it for me:

1. Use the default display mechanism, by changing the last lines of your plotly cell in content/04-visualizations/types to

   # Set title/axis labels
   fig.update_layout(
       title='Proportion enrolled in Primary School, using data from 1970 to 2014',
       xaxis=dict(title='Percent of Males'),
       yaxis=dict(title='Percent of Females'),
       legend=dict(x=0.05, y=0.9)
   )
   fig

2. Update your Sphinx config, rather than replacing

   sphinx:
     recursive_update: true
     config:
       html_js_files:
         - "https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.4/require.min.js"

[rohanjha123]

That fixed it for me! Thank you so so much!!