Google Visualization library Facets：如何将python模块“facets”输出html离线保存到本地驱动器？

Question

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

• 我正在使用 chrome 浏览器，webcomponents-lite.js不需要。
• 另外，我已经在我的 MacOS 中使用自制软件安装了 bazel。
• 我已将“facets-dist”文件夹从 facets 官方仓库复制到 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>"""

其余的代码看起来不错