Integrating Google Facets into a Flask Web Application for Data Visualization

Google Facets is an open‑source visualization tool that helps users understand, analyze, and debug machine‑learning datasets by providing two components: Facets Overview and Facets Dive.

Facets Overview visualizes feature distributions and highlights common data issues such as unexpected values, high missing rates, and imbalanced features. Facets Dive offers an interactive interface for exploring relationships between individual data points across multiple dimensions.

The tutorial builds a Flask web demo that uploads CSV files and renders the selected Facets component. First, the project structure is created:

mkdir google-facets
cd google-facets
mkdir static
mkdir templates
mkdir data
touch servermain.py
cd static
mkdir Overview_html
mkdir Dive_html

The directory tree looks like:

google-facets
├── data
├── servermain.py
├── static
│   ├── Dive_html
│   └── Overview_html
└── templates

A minimal Flask hello‑world route is added, then file‑upload configuration is defined (allowed extensions, upload folder, size limit) and an HTML upload form is prepared.

# -*- coding: utf-8 -*-
from flask import Flask, request, url_for, redirect, send_from_directory
import sys, os, uuid, pandas as pd, base64
app = Flask(__name__)
ALLOWED_EXTENSIONS = set(['csv'])
app.config['UPLOAD_FOLDER'] = os.getcwd() + "/data"
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

The allowed_file helper checks file extensions, and the upload_file view handles POST requests, saves the file, and dispatches to either fun_facets_overview or fun_facets_dive based on the selected radio button.

The fun_facets_overview function reads the CSV with pandas, generates a GenericFeatureStatisticsGenerator proto, encodes it in base64, and writes an HTML file that imports facets‑jupyter.html and sets the protoInput of a facets‑overview element.

def fun_facets_overview(file_url):
    gfsg = GenericFeatureStatisticsGenerator()
    train_data = pd.read_csv(file_url, sep=r'\s*,\s*', na_values='?')
    proto = gfsg.ProtoFromDataFrames([{'name': 'train', 'table': train_data}])
    protostr = base64.b64encode(proto.SerializeToString()).decode("utf-8")
    HTML_TEMPLATE = """
    <link rel=\"import\" href=\"../facets-jupyter.html\" >
    <facets-overview id=\"elem\"></facets-overview>
    <script>
        document.querySelector(\"#elem\").protoInput = \"{protostr}\";
    </script>"""
    html = HTML_TEMPLATE.format(protostr=protostr)
    html_name = "./static/Overview_html/" + str(uuid.uuid4()) + ".html"
    with open(html_name, "w") as fout:
        fout.write(html)
    return redirect(html_name)

The fun_facets_dive function converts the CSV to JSON, embeds it in a similar HTML template, and returns the generated page.

def fun_facets_dive(file_url):
    jsonstr = pd.read_csv(file_url, na_values='?').to_json(orient='records')
    HTML_TEMPLATE = """<link rel=\"import\" href=\"../facets-jupyter.html\">
    <facets-dive id=\"elem\" height=\"600\"></facets-dive>
    <script>
      var data = {jsonstr};
      document.querySelector(\"#elem\").data = data;
    </script>"""
    html = HTML_TEMPLATE.format(jsonstr=jsonstr)
    html_name = "./static/Dive_html/" + str(uuid.uuid4()) + ".html"
    with open(html_name, "w") as fout:
        fout.write(html)
    return redirect(html_name)

Running the Flask app displays a page where users can upload a CSV file and choose either Facets Overview or Dive. Example visualizations on a credit‑approval dataset and a school‑grade dataset illustrate how Facets can reveal feature imbalances, class separability, and other insights.

The article concludes that Google Facets can be combined with Hadoop, Hive, Impala, or Spark‑SQL to analyze large‑scale data, and it has already delivered significant value within Google.