PAIR-code/facets

facets dive problem of zoomed options

matteopulega opened this issue · 7 comments

Hi everyone,

i'm trying to use Google Facets Dive to rapresent a confusion matrix of data in a jupyter notebook, on Chrome (windows 10).

The problem is that options are incredibly zoomed (like +, - and other rapresentation options). Only reloading the jupyter notebook all the visualization is correctly zoomed. I would like not to reload everytime the page. How can i do?

I'm using an example and this is my code

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 id="fd" height="600"></facets-dive>
        <script>
          var data = {jsonstr};
          var fd = document.querySelector("#fd");
          fd.data = data;
          fd['verticalFacet'] = 'predicted';
          fd['verticalBuckets'] = 8;
          fd['horizontalFacet'] = 'expected';
          fd['horizontalBuckets'] = 8;
          fd['colorBy'] = 'expected';
        </script>
        """

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

html = HTML_TEMPLATE.format(jsonstr=jsonstr)
display(HTML(html))

Hi @matteopulega, could you provide a screenshot that demonstrates the problem?

Thanks @jimbojw , here it is the screenshot

facets_error

Thanks @jimbojw , here it is the screenshot

facets_error

Should be fixed if you use the now merged /facets-dist/facets-jupyter.html.

I just cloned the repo and have the same problem ...

Same issue