facets dive is not working in colab

[leandrohmvieira]

I tried both cells in Colab, but they don't generate any output.

# Display the Dive visualization for the training data.
from IPython.core.display import display, HTML

jsonstr = df_final.to_json(orient='records')

HTML_TEMPLATE = """<link rel="import" href="https://raw.githubusercontent.com/PAIR-code/facets/master/facets-dist/facets-jupyter.html">
        <facets-dive id="elem" height="600"></facets-dive>
        <script>
          var data = {jsonstr};
          document.querySelector("#elem").data = data;
        </script>"""
html = HTML_TEMPLATE.format(jsonstr=jsonstr)
display(HTML(HTML))

# Display the Dive visualization for this data
sprite_size = 32 if len(df.index)>50000 else 64
from IPython.core.display import display, HTML

# Create Facets template  
HTML_TEMPLATE = """
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js"></script>
        <link rel="import" href="/nbextensions/facets-dist/facets-jupyter.html">
        <facets-dive sprite-image-width="{sprite_size}" sprite-image-height="{sprite_size}" id="elem" height="600"></facets-dive>
        <script>
          document.querySelector("#elem").data = {jsonstr};
        </script>"""

# Load the JSON dataset and the sprite_size into the template
html = HTML_TEMPLATE.format(jsonstr=jsonstr, sprite_size=sprite_size)

# Display the template
display(HTML(HTML))

Is there something that I'm missing?

[jsiddique]

Try this Colab Notebook

[leandrohmvieira]

Try this Colab Notebook

This notebook works. I adapted it to work on mine, which doesn't have images:

from IPython.core.display import display, HTML

jsonstr = df_final.to_json(orient='records')
HTML_TEMPLATE = """
        <script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js"></script>
        <link rel="import" href="https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html">      
        <facets-dive id="elem" height="1000"></facets-dive>
        <script>
          var data = {jsonstr};
          document.querySelector("#elem").data = data;
        </script>"""
html = HTML_TEMPLATE.format(jsonstr=jsonstr)
display(HTML(HTML))

The code above works as well.

Thank you so much for your quick reply and guidance.