Merge pull request PAIR-code#232 from jsiddique/Dive-example-in-Colab…

…-usng-base64-image-url- Updated colab_facets.ipynb to make the atlas_url and sprite feature work using base64 data url.
kp-forks · Oct 27, 2020 · 6912903 · 6912903
2 parents 0cdc8f9 + b9dbbda
commit 6912903
Showing 1 changed file with 85 additions and 0 deletions.
diff --git a/facets_dive/colab_dive_atlas_demo.ipynb b/facets_dive/colab_dive_atlas_demo.ipynb
@@ -0,0 +1,85 @@
+{
+  "nbformat": 4,
+  "nbformat_minor": 0,
+  "metadata": {
+    "colab": {
+      "name": "colab_dive_atlas_demo.ipynb",
+      "provenance": [],
+      "collapsed_sections": []
+    },
+    "kernelspec": {
+      "name": "python3",
+      "display_name": "Python 3"
+    }
+  },
+  "cells": [
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "Tkr04WYa8-EF"
+      },
+      "source": [
+        "# Facets Dive demo using sprite atlas in Colab\n",
+        "\n",
+        "* You can directly upload and run this notebook in Colab.  \n",
+        "* The sprite atlas image is passed as a base64 data url. \n",
+        "* Example Colab notebook to create the sprite atlas and metadata can be found [here](https://github.com/jsiddique/facets_example/blob/master/colab_fashion_MNIST_atlas_generation.ipynb).\n",
+        "* To learn more about how sprite atlas file works read [this document](https://github.com/PAIR-code/facets/tree/master/facets_dive)."
+      ]
+    },
+    {
+      "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",
+        "import pandas as pd\n",
+        "\n",
+        "#Download atlas image\n",
+        "img_url = \"https://storage.googleapis.com/what-if-tool-resources/misc-resources/fmnist_sprite_atlas.png\"\n",
+        "img_name = os.path.basename(img_url)\n",
+        "urllib.request.urlretrieve(img_url,img_name)\n",
+        "\n",
+        "#download metadata in a dataframe\n",
+        "df_fmnist = pd.read_csv(\"https://storage.googleapis.com/what-if-tool-resources/misc-resources/fmnist.csv\")\n",
+        "\n",
+        "#read atlas image and convert into base64 string\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}\"></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": {
+        "id": "Ck1Dcat_pnv5"
+      },
+      "source": [
+        ""
+      ],
+      "execution_count": null,
+      "outputs": []
+    }
+  ]
+}