Lectures/L-Interactive_Visualization/03a-Plotly_labviewer_example.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plotly in JupyterLab\n",
    "\n",
    "This notebook is an example for the plotly viewer that is accessible through a tab in JupyterLab. It helps to test our dashboard quickly."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:36:59.643251Z",
     "start_time": "2020-09-30T19:36:58.089691Z"
    }
   },
   "outputs": [],
   "source": [
    "import os\n",
    "import numpy as np\n",
    "\n",
    "import pandas as pd\n",
    "import dash\n",
    "import dash_core_components as dcc\n",
    "import dash_html_components as html\n",
    "import dash_bootstrap_components as dbc\n",
    "import plotly.graph_objects as go"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:37:00.587527Z",
     "start_time": "2020-09-30T19:37:00.573409Z"
    }
   },
   "outputs": [],
   "source": [
    "# Create a Dashboard object\n",
    "app = dash.Dash(__name__, external_stylesheets=[dbc.themes.SANDSTONE]) #, url_base_pathname=URL_PREFIX)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:37:01.551968Z",
     "start_time": "2020-09-30T19:37:01.232794Z"
    }
   },
   "outputs": [],
   "source": [
    "# Data\n",
    "df = pd.read_csv(\n",
    "    'https://vincentarelbundock.github.io/Rdatasets/csv/datasets/OrchardSprays.csv', index_col=0)\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:37:04.426839Z",
     "start_time": "2020-09-30T19:37:02.924931Z"
    }
   },
   "outputs": [],
   "source": [
    "fig_conf = go.Figure()\n",
    "fig_conf.add_trace(go.Scatter(x=df.index, y=df.decrease,  \n",
    "                              mode='lines+markers',\n",
    "                              name='Something',\n",
    "                              line=dict(color='#29abe0', width=3),\n",
    "                              marker=dict(size=6, color='white',\n",
    "                                               line=dict(width=1,color='#29abe0'))))\n",
    "fig_conf.update_layout( plot_bgcolor='white',\n",
    "                        paper_bgcolor='white',\n",
    "                        yaxis=dict(gridcolor='rgba(203, 210, 211,.3)'),\n",
    "                        legend_orientation=\"h\",\n",
    "                        height=300,\n",
    "                        margin=dict(\n",
    "                            l=0,\n",
    "                            r=0,\n",
    "                            b=100,\n",
    "                            t=0,\n",
    "                            pad=0)\n",
    " )"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:37:10.443251Z",
     "start_time": "2020-09-30T19:37:10.341148Z"
    }
   },
   "outputs": [],
   "source": [
    "from jupyterlab_dash import AppViewer\n",
    "viewer=AppViewer()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:37:11.795994Z",
     "start_time": "2020-09-30T19:37:11.792686Z"
    }
   },
   "outputs": [],
   "source": [
    "# This is the layout of the dashboard"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:37:12.498159Z",
     "start_time": "2020-09-30T19:37:12.493324Z"
    }
   },
   "outputs": [],
   "source": [
    "Title = html.H2(\"A test dashboard with plotly\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:37:13.555697Z",
     "start_time": "2020-09-30T19:37:13.550423Z"
    }
   },
   "outputs": [],
   "source": [
    "app.layout = html.Div(children=[ Title,\n",
    "                                dcc.Graph(\n",
    "        id='example-graph',\n",
    "        style={'width':'900px'},\n",
    "        figure=fig_conf      \n",
    "    )])"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "ExecuteTime": {
     "end_time": "2020-09-30T19:39:24.995653Z",
     "start_time": "2020-09-30T19:37:15.765693Z"
    }
   },
   "outputs": [],
   "source": [
    "# Launches window in JupyterLab\n",
    "viewer.show(app)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.8"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}