{
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "colab_type": "text",
        "id": "view-in-github"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/wcj365/plotly-express/blob/main/docs/chapter_07.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "MCVQrt2M6Kbg"
      },
      "source": [
        "# Chapter 8 - Tie Up Loose Ends "
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "CxG30oeEtZrk"
      },
      "source": [
        "## 8.1 Themes & Templates\n",
        "\n",
        "Plotly visualization supports multiple themes represented by templates. \n",
        "\n",
        "We can set a default template up front which will be applied to all visualizations generated afterward by setting the variable `pio.templates.default`. \n",
        "\n",
        "Each viualization can also specify a template by using a property `template` in the Figure object.\n",
        "\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "cN8ayVueywnO",
        "outputId": "ac1789ce-16d6-4ca1-c2cc-ad21e847e66d"
      },
      "outputs": [
        {
          "name": "stdout",
          "output_type": "stream",
          "text": [
            "Requirement already satisfied: plotly in /usr/local/lib/python3.7/dist-packages (5.3.1)\n",
            "Requirement already satisfied: tenacity>=6.2.0 in /usr/local/lib/python3.7/dist-packages (from plotly) (8.0.1)\n",
            "Requirement already satisfied: six in /usr/local/lib/python3.7/dist-packages (from plotly) (1.15.0)\n"
          ]
        }
      ],
      "source": [
        "# As of this writing, the Google Colab has Plotly version 4.4.1 pre-installed\n",
        "# We need to upgrade it to the latest version\n",
        "\n",
        "!pip install --upgrade plotly"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 35
        },
        "id": "9xMXPdyEZQvS",
        "outputId": "51d33d30-4f40-4c88-fd3e-c91b68560178"
      },
      "outputs": [
        {
          "data": {
            "application/vnd.google.colaboratory.intrinsic+json": {
              "type": "string"
            },
            "text/plain": [
              "'5.3.1'"
            ]
          },
          "execution_count": 2,
          "metadata": {},
          "output_type": "execute_result"
        }
      ],
      "source": [
        "import numpy as np                  # We use numpy to generate some sample data for ploting\n",
        "import plotly.graph_objects as go   # graph_opjects package is the core of plotly\n",
        "import plotly.io as pio\n",
        "\n",
        "import plotly\n",
        "plotly.__version__"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "1hM6g3pAxn1P",
        "outputId": "8c4ff16e-b084-40bc-8b02-52af00bfffbe"
      },
      "outputs": [
        {
          "name": "stdout",
          "output_type": "stream",
          "text": [
            "Templates configuration\n",
            "-----------------------\n",
            "    Default template: 'plotly'\n",
            "    Available templates:\n",
            "        ['ggplot2', 'seaborn', 'simple_white', 'plotly',\n",
            "         'plotly_white', 'plotly_dark', 'presentation', 'xgridoff',\n",
            "         'ygridoff', 'gridon', 'none']\n",
            "\n"
          ]
        }
      ],
      "source": [
        "# This shows the default template is \"plotly\"\n",
        "# This also lists all supported templates. \n",
        "\n",
        "print(pio.templates)"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "hhNvFpO5xs0d"
      },
      "outputs": [],
      "source": [
        "# Change the default template from plotly to plotly_dark\n",
        "\n",
        "pio.templates.default = \"plotly_dark\""
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "NWA0Q7GjTPfF"
      },
      "source": [
        "## 8.2 Export Figures \n",
        "\n",
        "There are several ways to export a Plotly visualization."
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "K4RSP-9u4GHI"
      },
      "source": [
        "\n",
        "### 8.2.1 Ouptut JSON Data \n",
        "\n",
        "As mentioned in 1.2.3, we can use Python `print()` function to print the content of a figre including its Data component and the Layout component. Here, the output of print() shows the figure has two traces along with properties of the layout."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "y4N7VvsxTOCF",
        "outputId": "29be526a-d59f-4438-dbf7-aa735b2b7e44"
      },
      "outputs": [
        {
          "name": "stdout",
          "output_type": "stream",
          "text": [
            "Figure({\n",
            "    'data': [{'name': 'Male',\n",
            "              'type': 'box',\n",
            "              'x': array([21, 11, 65,  7,  4, 15, 88, 10, 15, 90, 92, 50, 89, 27, 54, 44, 48, 53,\n",
            "                          96, 43])},\n",
            "             {'name': 'Female',\n",
            "              'type': 'box',\n",
            "              'x': array([23, 22, 35, 65,  8,  6, 34, 22, 43, 98, 10, 82, 21, 50,  7, 61, 37, 96,\n",
            "                           9, 78])}],\n",
            "    'layout': {'showlegend': False,\n",
            "               'template': '...',\n",
            "               'title': {'text': 'The Boxplot for Age'},\n",
            "               'xaxis': {'title': {'text': 'Age'}}}\n",
            "})\n"
          ]
        }
      ],
      "source": [
        "print(fig)"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "SsB8eAwBth1H"
      },
      "source": [
        "### 8.2.2 Output as Static Images\n",
        "\n",
        "Plotly visualizations can be downloade as a static image by clicking on download icon. The icon is on the far left of the tool bar which appears on the upper right of the visualization when you move the mouse over that area.  \n",
        "\n",
        "We can also write code to export a visualization to a static image file in a varieties of format including PNG, JPG, and PDF. Since generated image files are static, the interactivity is lost. \n",
        "\n",
        "In order to generate static images from Plotly visualizations, a ancilary Python library `kaleido` must be installed first."
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/"
        },
        "id": "u9Ix0wYlx2Yy",
        "outputId": "b9d7bf8b-3d69-4ea1-83c5-eea525d4162c"
      },
      "outputs": [
        {
          "name": "stdout",
          "output_type": "stream",
          "text": [
            "Requirement already satisfied: kaleido in /usr/local/lib/python3.7/dist-packages (0.2.1)\n"
          ]
        }
      ],
      "source": [
        "!pip install kaleido"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "zQ_IeyrDvSKN"
      },
      "outputs": [],
      "source": [
        "fig.write_image(\"boxplot.png\")\n",
        "fig.write_image(\"boxplot.pdf\")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "ZTc5VTag2WJ3"
      },
      "source": [
        "\n",
        "### 8.2.3 Output to HTML Files\n",
        "\n",
        "Plotly visualizations can be exported to HTML files which can be opened using a web browser for display and interaction.\n",
        "\n",
        "The parameter `include_plotlyjs` has two options that result in different size of the generated file. \n",
        "\n",
        "When the option is `True`, the Plotly.js Java Script library is included in the file which adds about 3MB to the size of the file. \n",
        "\n",
        "When the option is set to \"cnd\" (content delivery network), the Plotly.js library is not included in the file but referenced from the website `https://cdn.plot.ly`. This makes the resulting file much smaller.\n"
      ]
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "id": "ouE7evG73iKB"
      },
      "outputs": [],
      "source": [
        "fig.write_html(\"boxplot_include_js.html\", include_plotlyjs=True)\n",
        "\n",
        "fig.write_html(\"boxplot_cdn.html\", include_plotlyjs=\"cdn\")"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "mnlRu5S4di6L"
      },
      "source": [
        "\n",
        "## 8.3 Python Flexibility\n",
        "\n",
        "Plotly Python is flexible and provide multiple ways to achieve the same things. \n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "fMFCpJSmKROf"
      },
      "source": [
        "### 8.3.1 Different Ways to Create a Figure \n",
        "\n",
        "We can create an empty Figure object and then add traces and update layout properties like this:\n",
        "```\n",
        "trace_0 = go.Box(   \n",
        "    x=male_ages,    \n",
        "    name=\"Male\"   \n",
        ")\n",
        "\n",
        "fig = go.Figure()\n",
        "fig.add_trace(trace_0)\n",
        "fig.update_layout(title=\"A Boxplot\")\n",
        "```\n",
        "Alternatively, we can create traces and add them to the Data object and create a Layout object with some specified properties and then create the figure using the Data object and Layout object as inputs:\n",
        "\n",
        "```\n",
        "trace_0 = go.Box(   \n",
        "    x=male_ages,    \n",
        "    name=\"Male\"   \n",
        ")\n",
        "\n",
        "my_layout = go.Layout(title=\"A Boxplot\")\n",
        "fig = go.Figure(data=[trace_0], layout=my_layout)\n",
        "```\n",
        "\n",
        "\n",
        "    "
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "mqw_XHQc4Ns8"
      },
      "source": [
        "### 8.3.2 Different Ways to Create a Trace\n",
        "\n",
        "We can use a specifc method of the Graph object. Here we use Box() method to create a Boxplot. This method creates a Python dictionary object to represent a Boxplot.\n",
        "\n",
        "```\n",
        "trace_0 = go.Box(\n",
        "    x=[10, 3, -5, -35, 23, 8, 78, -65, 13,31, 82],  \n",
        "    name=\"Trace Name\"                   \n",
        ")\n",
        "```\n",
        "\n",
        "Alternatively, we can use a Python dictionary object to represent a trace:\n",
        "\n",
        "```\n",
        "trace_0 = {                         \n",
        "    \"x\":[10, 3, -5, -35, 23, 8, 78, -65, 13,31, 82],  \n",
        "    \"type\":\"box\",\n",
        "    \"name\":\"Trace Name\"                   \n",
        "}\n",
        "```"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "-FuWf3QJ4Ujh"
      },
      "source": [
        "### 8.3.3 Different Ways to Specify a Layout Property\n",
        "\n",
        "For example, to specify the title of the X axis, the following three methods work the same:\n",
        "\n",
        "- `fig.update_layout(xaxis={\"title\":\"Age\"})`\n",
        "- `fig.update_layout(xaxis_title=\"Age\")`\n",
        "- `fig.layout.xaxis.title = \"Age\"`"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "617kWkhT4Zoz"
      },
      "source": [
        "Python is a flexible language and offers alternative ways to achieve the same outcome. In some cases, there are industry best practices. For example, the commonly used indentation is four spaces. In other cases, it is up to your personal preference. In the latter, you should try to pick one and use it consistently. "
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "KW2iwAUWELVa"
      },
      "source": [
        "## 8.4 Plotly Chart Studio\n"
      ]
    },
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "I2shE5OrEPQ-"
      },
      "source": [
        "## 8.5 Dash for Dashboard and Data Apps"
      ]
    }
  ],
  "metadata": {
    "colab": {
      "authorship_tag": "ABX9TyOL6+87hUCXij2AwKUvLpcr",
      "include_colab_link": true,
      "name": "chapter_01.ipynb",
      "provenance": [],
      "toc_visible": true
    },
    "kernelspec": {
      "display_name": "Python 3",
      "name": "python3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "nbformat": 4,
  "nbformat_minor": 0
}