javascript - Google 可视化库 Facets : How to save python module "facets" output html to local drive offline?

Question

最近我发现了 python 可视化库“Facets”，想知道我是否可以离线生成 html 输出。

我正在使用 chrome 浏览器和 webcomponents-lite.js不需要。

另外，我在我的 MacOS 中使用自制软件安装了 bazel。

我已将 facets 官方 repo 中的“facets-dist”文件夹复制到 jupyter 路径 ~/.ipython/nbextensions/

有用的链接:
- https://github.com/PAIR-code/facets
- https://colab.research.google.com/github/PAIR-code/facets/blob/master/colab_facets.ipynb

我的尝试:

import numpy as np
import pandas as pd
from IPython.core.display import display, HTML


df = pd.DataFrame({'a':[10,20],'b':[100,200]})
jsonstr = df.to_json(orient='records')

HTML_TEMPLATE = """<link rel="import" href="/nbextensions/facets-dist/facets-jupyter.html">
        <facets-dive id="elem" height="600"></facets-dive>
        <script>
          var data = {jsonstr};
          document.querySelector("#elem").data = data;
        </script>"""

html_str = HTML_TEMPLATE.format(jsonstr=jsonstr)

# write the html to a file
with open('output.html', 'w') as f:
    f.write(html_str)
    #f.write(HTML(html_str).data)

!open output.html

它创建一些 output.html 文件，但不显示任何可视化。如何创建正确的输出 html？

Answer 1

实际上是可以做到的。您的代码中的问题来自以下几行:

HTML_TEMPLATE = """<link rel="import" href="/nbextensions/facets-dist/facets-jupyter.html">
        <facets-dive id="elem" height="600"></facets-dive>
        <script>
          var data = {jsonstr};
          document.querySelector("#elem").data = data;
        </script>"""

您现在应该使用 HTML_TEMPLATE :

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="600"></facets-dive>
            <script>
              var data = {jsonstr};
              document.querySelector("#elem").data = data;
            </script>"""

其余的代码看起来不错