{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Plotly in JupyterLite\n",
    "\n",
    "`plotly.py` is an interactive, open-source, and browser-based graphing library for Python: https://plotly.com/python/"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "%pip install -q nbformat plotly"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Basic Figure"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly.graph_objects as go\n",
    "fig = go.Figure()\n",
    "fig.add_trace(go.Scatter(y=[2, 1, 4, 3]))\n",
    "fig.add_trace(go.Bar(y=[1, 4, 3, 2]))\n",
    "fig.update_layout(title = 'Hello Figure')\n",
    "fig.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "tags": []
   },
   "source": [
    "## Basic Table with a Pandas DataFrame"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly.graph_objects as go\n",
    "import pandas as pd\n",
    "\n",
    "from js import fetch\n",
    "\n",
    "URL = \"https://raw.githubusercontent.com/plotly/datasets/master/2014_usa_states.csv\"\n",
    "\n",
    "res = await fetch(URL)\n",
    "text = await res.text()\n",
    "\n",
    "filename = 'data.csv'\n",
    "\n",
    "with open(filename, 'w') as f:\n",
    "    f.write(text)\n",
    "\n",
    "df = pd.read_csv(filename)\n",
    "\n",
    "fig = go.Figure(data=[go.Table(\n",
    "    header=dict(values=list(df.columns),\n",
    "                fill_color='paleturquoise',\n",
    "                align='left'),\n",
    "    cells=dict(values=[df.Rank, df.State, df.Postal, df.Population],\n",
    "               fill_color='lavender',\n",
    "               align='left'))\n",
    "])\n",
    "\n",
    "fig.show()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Quiver Plot with Points"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import plotly.figure_factory as ff\n",
    "import plotly.graph_objects as go\n",
    "\n",
    "import numpy as np\n",
    "\n",
    "x,y = np.meshgrid(np.arange(-2, 2, .2),\n",
    "                  np.arange(-2, 2, .25))\n",
    "z = x*np.exp(-x**2 - y**2)\n",
    "v, u = np.gradient(z, .2, .2)\n",
    "\n",
    "# Create quiver figure\n",
    "fig = ff.create_quiver(x, y, u, v,\n",
    "                       scale=.25,\n",
    "                       arrow_scale=.4,\n",
    "                       name='quiver',\n",
    "                       line_width=1)\n",
    "\n",
    "# Add points to figure\n",
    "fig.add_trace(go.Scatter(x=[-.7, .75], y=[0,0],\n",
    "                    mode='markers',\n",
    "                    marker_size=12,\n",
    "                    name='points'))\n",
    "\n",
    "fig.show()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python (Pyodide)",
   "language": "python",
   "name": "python"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "python",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8"
  },
  "orig_nbformat": 4,
  "toc-showcode": false
 },
 "nbformat": 4,
 "nbformat_minor": 4
}