Jupyter/Colab/Dash_on_colab.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": [],
      "authorship_tag": "ABX9TyPsBJQfAK0rw9Mynst99BlH",
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/Ruqyai/Tuwaiq_Academy/blob/main/spark/Colab/Dash_on_colab.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "#Run Dash on Colab"
      ],
      "metadata": {
        "id": "wh2UfCxh85kN"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "\n",
        "##Installs"
      ],
      "metadata": {
        "id": "D0g6o78b8z-E"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "! pip install dash &> /dev/null\n",
        "! pip install jupyter_dash &> /dev/null\n",
        "! pip install --upgrade plotly &> /dev/null"
      ],
      "metadata": {
        "id": "iupuO5Wy5EjA"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": [
        "#import dash \n",
        "#from dash.dependencies import Input, Output\n",
        "from jupyter_dash import JupyterDash \n",
        "import dash_core_components as dcc \n",
        "import dash_html_components as html \n",
        "import plotly.express as px\n",
        "import pandas as pd"
      ],
      "metadata": {
        "id": "nNjaiKIp77vY"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "##Your dashboard app"
      ],
      "metadata": {
        "id": "mt3ZmXTM9Doe"
      }
    },
    {
      "cell_type": "code",
      "execution_count": null,
      "metadata": {
        "colab": {
          "base_uri": "https://localhost:8080/",
          "height": 52
        },
        "id": "ih5laODW4DqT",
        "outputId": "f64ede8b-ac48-4780-b002-20d99a202dad"
      },
      "outputs": [
        {
          "output_type": "stream",
          "name": "stdout",
          "text": [
            "Dash app running on:\n"
          ]
        },
        {
          "output_type": "display_data",
          "data": {
            "text/plain": [
              "<IPython.core.display.Javascript object>"
            ],
            "application/javascript": [
              "(async (port, path, text, element) => {\n",
              "    if (!google.colab.kernel.accessAllowed) {\n",
              "      return;\n",
              "    }\n",
              "    element.appendChild(document.createTextNode(''));\n",
              "    const url = await google.colab.kernel.proxyPort(port);\n",
              "    const anchor = document.createElement('a');\n",
              "    anchor.href = new URL(path, url).toString();\n",
              "    anchor.target = '_blank';\n",
              "    anchor.setAttribute('data-href', url + path);\n",
              "    anchor.textContent = text;\n",
              "    element.appendChild(anchor);\n",
              "  })(8050, \"/\", \"http://127.0.0.1:8050/\", window.element)"
            ]
          },
          "metadata": {}
        }
      ],
      "source": [
        "app = JupyterDash(__name__)\n",
        "\n",
        "# assume you have a \"long-form\" data frame\n",
        "# see https://plotly.com/python/px-arguments/ for more options\n",
        "df = pd.DataFrame({\n",
        "    \"Fruit\": [\"Apples\", \"Oranges\", \"Bananas\", \"Apples\", \"Oranges\", \"Bananas\"],\n",
        "    \"Amount\": [4, 1, 2, 2, 4, 5],\n",
        "    \"City\": [\"SF\", \"SF\", \"SF\", \"Montreal\", \"Montreal\", \"Montreal\"]\n",
        "})\n",
        "\n",
        "fig = px.bar(df, x=\"Fruit\", y=\"Amount\", color=\"City\", barmode=\"group\")\n",
        "\n",
        "app.layout = html.Div(children=[\n",
        "    html.H1(children='Hello Dash'),\n",
        "\n",
        "    html.Div(children='''\n",
        "        Dash: A web application framework for your data.\n",
        "    '''),\n",
        "\n",
        "    dcc.Graph(\n",
        "        id='example-graph',\n",
        "        figure=fig\n",
        "    )\n",
        "])\n",
        "\n",
        "if __name__ == '__main__':\n",
        "    app.run_server() # app.run_server(mode=\"inline\") # use (mode=\"inline\") if you want run on this notebook in URL"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# Assignment #3"
      ],
      "metadata": {
        "id": "DBaYsJSuAdz9"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "<h3>Improve this dashboard and make it attractive</h3>   \n",
        "Reference: \n",
        "\n",
        "[https://dash.plotly.com/](https://dash.plotly.com/)"
      ],
      "metadata": {
        "id": "jlJE_QNIAwc7"
      }
    }
  ]
}