如何将Google Facets可视化工具嵌入网页？（Ubuntu 17.10环境）

Hey there! Awesome that you got Facets working smoothly in Jupyter on your Ubuntu 17.10 setup—embedding those neat visualizations into a regular web page is totally straightforward, and I’ll break down exactly how to do it below:

1. First, Grab the Facets Web Assets from Your Build #

Since you already used Bazel to build Facets from source, you can generate the web-ready JavaScript and CSS files right away. Head to your Facets project root directory and run this command:

bazel build //facets:facets_web

Once the build finishes, you’ll find all the necessary files in the bazel-bin/facets/ folder. Look for:

• facets.js (the core Facets web component code)
• facets.css (styles for the visualizations)
• webcomponents-lite.js (polyfill for older browsers to support web components)

Copy these files to the folder where you’ll be creating your web page.

2. Set Up Your Basic HTML Page #

Create a new HTML file (let’s call it facets-demo.html) with this structure. Make sure the paths to the Facets assets match where you copied them:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My Facets Visualization</title>
    <!-- Load Facets styles -->
    <link rel="stylesheet" href="facets.css">
    <!-- Load web components polyfill (required for broader browser support) -->
    <script src="webcomponents-lite.js"></script>
    <!-- Load Facets web component library -->
    <script src="facets.js"></script>
</head>
<body>
    <!-- This is where your visualization will appear -->
    <div id="facets-container" style="width: 100%; height: 80vh;"></div>

    <script>
        // We'll add the visualization code here next
    </script>
</body>
</html>

3. Prepare Your Data for the Web #

Facets works with JSON-formatted data. If you’re using the same data you used in Jupyter, you can export your pandas DataFrame to a JSON file easily:

# Run this in your Jupyter notebook or Python script
import pandas as pd

# Assuming your DataFrame is named 'df'
df.to_json('data.json', orient='records')

Copy this data.json file into the same folder as your HTML page.

4. Add Code to Render the Visualization #

Facets has two main components—Overview (for dataset summary stats) and Dive (for interactive exploration). Pick the one you want, and replace the empty <script> section in your HTML with the corresponding code:

Option A: Render Facets Overview #

// Fetch your JSON data
fetch('data.json')
  .then(response => response.json())
  .then(dataset => {
    // Create the Overview web component
    const overview = document.createElement('facets-overview');
    // Pass the dataset to the component
    overview.data = dataset;
    // Add it to your container
    document.getElementById('facets-container').appendChild(overview);
  });

Option B: Render Facets Dive #

// Fetch your JSON data
fetch('data.json')
  .then(response => response.json())
  .then(dataset => {
    // Create the Dive web component
    const dive = document.createElement('facets-dive');
    // Pass the dataset and set optional properties (like height)
    dive.data = dataset;
    dive.height = 700; // Adjust this to fit your page
    // Add it to your container
    document.getElementById('facets-container').appendChild(dive);
  });

5. Test Your Web Page #

Important: Don’t just double-click the HTML file to open it (the file:// protocol will cause issues with fetching the JSON data). Instead, start a simple local web server in your project folder:

# If you have Python 3 installed
python3 -m http.server 8000

# Or Python 2
python -m SimpleHTTPServer 8000

Then open your browser and go to http://localhost:8000/facets-demo.html—you should see your Facets visualization working just like it did in Jupyter!

Optional: Optimize for Production #

If you plan to deploy this to a live website, you can build minified versions of the Facets assets with Bazel:

bazel build //facets:facets_web_minified

This will generate smaller, optimized files in bazel-bin/facets/ that load faster for your users.

内容的提问来源于stack exchange，提问作者veilupearl