From 18581a84a716049fbc0a16387150d69c61057c57 Mon Sep 17 00:00:00 2001
From: Javed Siddique <javed.siddique@gmail.com>
Date: Mon, 26 Oct 2020 20:27:43 -0400
Subject: [PATCH] Updated colab_facets.ipynb to show atlas feature using base64
 image url.

Added new dive example showing the atlas feature.  This example works with Colab.  When I tried with regular image url I got 404 error.

The solution is to read image from the file and convert it into base64 string.  Then create a base64 image url from the string and embed it directly into the html and javascript code.
---
 colab_facets.ipynb | 76 +++++++++++++++++++++++++++++++---------------
 1 file changed, 52 insertions(+), 24 deletions(-)

diff --git a/colab_facets.ipynb b/colab_facets.ipynb
index c9a1094..d910291 100644
--- a/colab_facets.ipynb
+++ b/colab_facets.ipynb
@@ -3,9 +3,9 @@
   "nbformat_minor": 0,
   "metadata": {
     "colab": {
-      "name": "Facets Dive and Overview Colab Example",
-      "version": "0.3.2",
-      "provenance": []
+      "name": "colab_facets.ipynb",
+      "provenance": [],
+      "collapsed_sections": []
     },
     "kernelspec": {
       "name": "python3",
@@ -16,23 +16,19 @@
     {
       "cell_type": "code",
       "metadata": {
-        "id": "M7JcESAhpKG-",
-        "colab_type": "code",
-        "colab": {}
+        "id": "M7JcESAhpKG-"
       },
       "source": [
         "#@title Install the facets_overview pip package.\n",
         "!pip install facets-overview"
       ],
-      "execution_count": 0,
+      "execution_count": null,
       "outputs": []
     },
     {
       "cell_type": "code",
       "metadata": {
-        "colab_type": "code",
-        "id": "blPpZw5R3Bb4",
-        "colab": {}
+        "id": "blPpZw5R3Bb4"
       },
       "source": [
         "# Load UCI census train and test data into dataframes.\n",
@@ -54,18 +50,15 @@
         "    engine='python',\n",
         "    na_values=\"?\")"
       ],
-      "execution_count": 0,
+      "execution_count": null,
       "outputs": []
     },
     {
       "cell_type": "code",
       "metadata": {
-        "colab_type": "code",
-        "id": "XtOzRy8Z3M36",
-        "colab": {}
+        "id": "XtOzRy8Z3M36"
       },
       "source": [
-        "\n",
         "# Display the Dive visualization for the training data.\n",
         "from IPython.core.display import display, HTML\n",
         "\n",
@@ -81,15 +74,52 @@
         "html = HTML_TEMPLATE.format(jsonstr=jsonstr)\n",
         "display(HTML(html))"
       ],
-      "execution_count": 0,
+      "execution_count": null,
+      "outputs": []
+    },
+    {
+      "cell_type": "code",
+      "metadata": {
+        "id": "uzuyKzjxRdpp"
+      },
+      "source": [
+        "# Display the Dive visualization using atlas and base64 image url.\n",
+        "\n",
+        "import base64\n",
+        "import urllib.request\n",
+        "import os\n",
+        "\n",
+        "img_url = \"https://raw.githubusercontent.com/jsiddique/facets_example/master/sprite_atlas.png\"\n",
+        "img_name = os.path.basename(img_url)\n",
+        "urllib.request.urlretrieve(img_url,img_name)\n",
+        "\n",
+        "df_fmnist = pd.read_csv(\"https://raw.githubusercontent.com/jsiddique/facets_example/master/fmnist.csv\")\n",
+        "\n",
+        "with open(\"sprite_atlas.png\", \"rb\") as image_file:\n",
+        "    encoded_string = base64.b64encode(image_file.read())\n",
+        "\n",
+        "from IPython.core.display import display, HTML\n",
+        "\n",
+        "jsonstr = df_fmnist.to_json(orient='records')\n",
+        "HTML_TEMPLATE = \"\"\"\n",
+        "        <script src=\"https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.3.3/webcomponents-lite.js\"></script>\n",
+        "        <link rel=\"import\" href=\"https://raw.githubusercontent.com/PAIR-code/facets/1.0.0/facets-dist/facets-jupyter.html\">      \n",
+        "        <facets-dive id=\"elem\" height=\"1000\" sprite-image-width=\"28\" sprite-image-height=\"28\" atlas-url=\"data:image/png;base64,{encoded_string}\" cross-origin=\"anonymous\"></facets-dive>\n",
+        "       \n",
+        "        <script>\n",
+        "          var data = {jsonstr};\n",
+        "          document.querySelector(\"#elem\").data = data;\n",
+        "        </script>\"\"\"\n",
+        "html = HTML_TEMPLATE.format(jsonstr=jsonstr, encoded_string=encoded_string.decode(\"utf-8\"))\n",
+        "display(HTML(html))"
+      ],
+      "execution_count": null,
       "outputs": []
     },
     {
       "cell_type": "code",
       "metadata": {
-        "colab_type": "code",
-        "id": "mjv5Kr1Mflq7",
-        "colab": {}
+        "id": "mjv5Kr1Mflq7"
       },
       "source": [
         "# Create the feature stats for the datasets and stringify it.\n",
@@ -101,15 +131,13 @@
         "                                  {'name': 'test', 'table': test_data}])\n",
         "protostr = base64.b64encode(proto.SerializeToString()).decode(\"utf-8\")"
       ],
-      "execution_count": 0,
+      "execution_count": null,
       "outputs": []
     },
     {
       "cell_type": "code",
       "metadata": {
-        "colab_type": "code",
-        "id": "b7zs2p2_goJa",
-        "colab": {}
+        "id": "b7zs2p2_goJa"
       },
       "source": [
         "# Display the facets overview visualization for this data\n",
@@ -125,7 +153,7 @@
         "html = HTML_TEMPLATE.format(protostr=protostr)\n",
         "display(HTML(html))"
       ],
-      "execution_count": 0,
+      "execution_count": null,
       "outputs": []
     }
   ]