How to get started with Facets for a simple one-page website?

[charnould]

Hello,

I've just discovered Facets and SandDance (by Microsoft); both seem to be amazing tool to visualize data.
However, it's not easy to get started with Facets (Bazel & Cie).

Is there a simple way to build a simple one-page website displaying a Facet Dive (no Jupyter, no build, etc.) ?
I didn't succeed in doing so even if I tried to get started copying https://pair-code.github.io/facets/quickdraw.html ...

Thanks a lot.

[jameswex]

The best way will be to follow how quickdraw.html was made. See the source here: https://github.com/PAIR-code/facets/tree/gh-pages

basically this approach required 3 files:
facets.html which is the compiled facets code for the visualizations. You should be able to use the provided https://github.com/PAIR-code/facets/blob/master/facets-dist/facets-jupyter.html file from the repo.
quickdraw.html which loads all necessary code (the webcomponents-lite js file) and when web components are ready, it loads the facets html file and when that is loaded it creates the facets-dive element.
quickdraw.js which sets the data and options on the facets-dive object to get it to display the dataset.

[charnould]

First, thanks for your message.
I've cloned gh-page as you suggest, run it into VSCode with Live-server to avoid CORS issues and used facets-jupyter.html (renamed facets.html).
However, quickdraw.html is empty (without any console errors).
Not so easy to get started for a simple dataviz :)

[jameswex]

definitely true that facets is not simple at all to embed into a website. it was built to be easily usable in notebooks such as colab, and to be used in other webapps with complex build environments such as the what-if tool.

[charnould]

I tried another method with the Jupyter notebook suggested on README (Facets Dive and Overview Colab Example).
Is it possible to export the embedded Facets Dive into a webpage (the notebook displaying html)?
If yes, do you know how to?
Thanks again.

[jameswex]

I haven't tried exporting the html from a notebook to use on a webpage, so unfortunately can't help with that flow

[charnould]

Solved.

from google.colab import files
with open('facets.html', 'w') as f:
  f.write(html)
files.download('facets.html')

The webpage is super heavy (12 mo including data), but it works.