facets_dive/colab_dive_atlas_demo.ipynb

{
  "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(\"fmnist_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": []
    }
  ]
}