Jupyter Notebook->export as HTML seems not to work for Chord diagrams

[jkolom]

I am able to show Chord diagrams in Jupyter lab (not Notebook unfortunately, but that is described in the documentation).

I need to export the notebook so that it can be used in a report. Unfortunately, Jupyter Lab -> export to HTML does not include the Chord diagram. Is there some visualization quirk that causes this? I assume that it has to do with some specific of Chord because this does not happen with other plots (e.g. plotly). .to_html() does work as a workaround however

[shahinrostami]

Hi @jkolom many thanks for raising this.

Are you able to share a minimal reproducible example and your web browser (+ version/build) please?

I'll look into this and see what I can do - I hadn't accounted for the "export to HTML" feature in Jupyter Lab.

[jkolom]

I am currently on Jupyter Lab 2.2.6, Chrome Version 86.0.4240.111 (Official Build) (64-bit) We use the export to HTML feature to generate readable reports mixing Markup and plots (actually we automate it with nbconvert -to html --TemplateExporter.exclude_input=True).

The plot I am trying to export as part of the report is quite simple (not even Chord Pro). See analogous plot attached (issue also happens with this one)

test.zip

[shahinrostami]

I am currently on Jupyter Lab 2.2.6, Chrome Version 86.0.4240.111 (Official Build) (64-bit) We use the export to HTML feature to generate readable reports mixing Markup and plots (actually we automate it with nbconvert -to html --TemplateExporter.exclude_input=True).

The plot I am trying to export as part of the report is quite simple (not even Chord Pro). See analogous plot attached (issue also happens with this one)

test.zip

Thank you for sharing the files.

It looks like some conflict with require.js. Can you open the exported HTML file and remove this part?

<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.10/require.min.js"></script>

Please confirm if that works!

[jkolom]

Yes, removing the reference to require.js does make the plot appear. It also works with outpus nbconvert

Perfect as a workaround! :) As per the root cause, it looks like the output (a full, independent html) is not fully liked by the renderer, if I interpret it correctly.

[shahinrostami]

I'm glad there's a way around it!

I think it's related to this issue https://stackoverflow.com/questions/15371918/mismatched-anonymous-define-module

Many of the scripts I use do not use require.js, and it seems like require.js works better if you're "all in" with using it to load libraries instead of referencing them with the <script> tag!

[jkolom]

A short update (the new version reminded me of doing that... :D )

Removing require.js will indeed make make the Chord visualization work. But it will break others. One combinaiton I tried that definitely does NOT work is [plotly|https://plotly.com/] plots and Chord plots in the same Jupyter Lab notebook.

Chord diagrams will in such a (not-so-strange) combination not show in the notebook. Or plotly plots. Depending on the order sometimes I managed the opposite.

As a workaround, it seems like the following works:

• Export the Chord plot as HTML
• Put the HTML in the notebook as an IFrame
• Example here

For a PDF version, I did not test if nbconvert will work. Workaround-of-workaround, an image embed could be used.

Code snippet for your convenience:

from IPython.core.display import display, HTML
from IPython.display import IFrame

chord_diagram.to_html(filename=a_filename)
IFrame(src=a_filename, width=800, height=1000)

[shahinrostami]

Hi @jkolom, Happy New Year!

Can you give any more details about your environment? I run Plotly and Chord at the same time in the same notebook without issue, so it would be good to track down the issue. Also, with Chord Pro https://datacrayon.com/shop/product/chord-pro/, you can now use show_png() to output a PNG to your notebook, or to_png() to save to a file.