03_Introduction_Jupyter_widgets.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Short course **\"Interactive analysis of Big Earth Data with Jupyter Notebooks\"** | EGU 2019"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 3 Introducing Jupyter widgets\n",
    "### Make your data analysis and visualisation interactive"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<hr>\n",
    "<a target=\"_blank\" href=\"./02_Geospatial_Data_Acces.ipynb\"><< 2 - Geospatial data access</a>&nbsp;<space>&nbsp;<space>&nbsp;<space>&nbsp;<space>&nbsp;<space>&nbsp;<space>&nbsp;<space>&nbsp;<space>&nbsp;<space>&nbsp;<space> <a target=\"_blank\" href=\"./04_Jupyter_Environment.ipynb\">4 - Getting to know the Jupyter environment >></a>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Jupyter widgets - an overview"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Widgets can be used to build interactive GUIs for you notebooks. Get more information about widgets in the official [readthedocs](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html#Selection-widgets)."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Some widget examples (before we get real)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Load the widgets\n",
    "import ipywidgets as widgets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Numeric widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.IntSlider(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Test:',\n",
    "    disabled=False,\n",
    "    continuous_update=False,\n",
    "    orientation='vertical', #horizontal\n",
    "    readout=True,\n",
    "    readout_format='d'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.IntProgress(\n",
    "    value=7,\n",
    "    min=0,\n",
    "    max=10,\n",
    "    step=1,\n",
    "    description='Loading:',\n",
    "    bar_style='warning', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    orientation='horizontal'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Boolean widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.ToggleButton(\n",
    "    value=False,\n",
    "    description='Click me',\n",
    "    disabled=False,\n",
    "    button_style='info', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltip='Description',\n",
    "    icon='check'\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Checkbox(\n",
    "    value=False,\n",
    "    description='Check me',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Selection widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.RadioButtons(\n",
    "    options=['Jupyter is great', 'Jupyter is average', 'Do not understand the hype'],\n",
    "#     value='pineapple',\n",
    "    description='Survey:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.ToggleButtons(\n",
    "    options=['Slow', 'Regular', 'Fast'],\n",
    "    description='Speed:',\n",
    "    disabled=False,\n",
    "    button_style='', # 'success', 'info', 'warning', 'danger' or ''\n",
    "    tooltips=['Description of slow', 'Description of regular', 'Description of fast'],\n",
    "#     icons=['check'] * 3\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### String widgets"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Text(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "widgets.Textarea(\n",
    "    value='Hello World',\n",
    "    placeholder='Type something',\n",
    "    description='String:',\n",
    "    disabled=False\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<hr>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Example - Interactive application of climate graphs"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Required libraries:\n",
    "* [Ipyleaflet](https://ipyleaflet.readthedocs.io/en/latest/)\n",
    "* [Plotly](https://plot.ly/) for interactive visualization [Registration required]\n",
    "* [Widgets](https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Basics.html)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from ipyleaflet import Map, basemaps, basemap_to_tiles, FullScreenControl, Marker\n",
    "import ipyleaflet\n",
    "\n",
    "from IPython.display import display, clear_output\n",
    "import ipywidgets as widgets\n",
    "import numpy as np\n",
    "import ee\n",
    "\n",
    "import plotly.plotly as py\n",
    "import plotly.graph_objs as go"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def GetTileLayerUrl(ee_image_object):\n",
    "  map_id = ee.Image(ee_image_object).getMapId()\n",
    "  tile_url_template = \"https://earthengine.googleapis.com/map/{mapid}/{{z}}/{{x}}/{{y}}?token={token}\"\n",
    "  return tile_url_template.format(**map_id)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "ee.Initialize()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Load ERA5 monthly ImageCollection "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "era5_monthly = ee.ImageCollection('projects/ecmwf/era5_monthly')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "era5_monthly.getInfo()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Process mean precipitation for each month based on entire time series"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "era5_monthly_img = era5_monthly.limit(1).first()\n",
    "collection_img_proj = era5_monthly_img.select(0).projection()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "months = range(1,13)\n",
    "\n",
    "# Store images in a list\n",
    "img_list = []\n",
    "for i in months:\n",
    "    collection_filtered = era5_monthly.filter(ee.Filter.calendarRange(i,i, 'month'))\n",
    "    collection_red = collection_filtered.reduce(ee.Reducer.mean())\n",
    "    \n",
    "    # if reducer function is applied to an image collection, the output does not have any projection information, as collection can contain \\ \n",
    "    # images with different projection information. Thus, one can set the projection to each image\n",
    "    collection_red_proj = collection_red.setDefaultProjection(collection_img_proj)\n",
    "    img_list.append(collection_red_proj)\n",
    "    \n",
    "img_list[0].getInfo()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### Build an Image Collection of the resulting image list"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "meanMonths_collection = ee.ImageCollection.fromImages(img_list)\n",
    "meanMonths_collection.getInfo()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "t2m_tmp = meanMonths_collection.select('t2m_mean').first()\n",
    "tp_tmp = meanMonths_collection.select('tp_mean').first()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "img_t2m = GetTileLayerUrl(t2m_tmp.visualize(min=250, max=330, palette=['#000080','#0000D9','#4000FF','#8000FF','#0080FF','#00FFFF','#00FF80','#80FF00','#DAFF00','#FFFF00','#FFF500','#FFDA00','#FFB000','#FFA400','#FF4F00','#FF2500','#FF0A00','#FF00FF']))\n",
    "img_tp = GetTileLayerUrl(tp_tmp.visualize(min=0, max=1, palette=['#FFFFFF', '#00FFFF', '#0080FF', '#DA00FF', '#FFA400','#FF0000']))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def click(b):\n",
    "    point = ee.Geometry.Point(lon,lat)\n",
    "    tp_point = meanMonths_collection.select('tp_mean').getRegion(point,500).getInfo()\n",
    "    t2m_point = meanMonths_collection.select('t2m_mean').getRegion(point,500).getInfo()\n",
    "        \n",
    "    header_tp = tp_point[0]\n",
    "    data_tp = tp_point[1:]\n",
    "    ydata_tp = [row[4]*1000 for row in data_tp]\n",
    "    \n",
    "    header_t2m = t2m_point[0]\n",
    "    data_t2m = t2m_point[1:]\n",
    "    ydata_t2m = [row[4]-273.2 for row in data_t2m]\n",
    "\n",
    "    tp = go.Bar(\n",
    "        x=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n",
    "        y=ydata_tp,\n",
    "        name='Total precipitation in mm',\n",
    "        marker=dict(\n",
    "            color='rgb(204,204,204)',\n",
    "        ))\n",
    "    \n",
    "    t2m = go.Scatter(\n",
    "        x=['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n",
    "        y=ydata_t2m,\n",
    "        name=\"2m air temperature in deg C\",\n",
    "        yaxis='y2')\n",
    "\n",
    "    data = [tp,t2m]\n",
    "    layout = go.Layout(\n",
    "        title='Climate graph at location '+ str(round(lat,2)) + ' / '+ str(round(lon,2)) + ' (lat/lon)',\n",
    "        yaxis=dict(\n",
    "            title=\"Total precipitation in mm\"\n",
    "        ),\n",
    "        yaxis2=dict(\n",
    "            title=\"2 m air temperature in degC\",\n",
    "            overlaying='y',\n",
    "            side='right',\n",
    "            range=[0,max(ydata_t2m)+2]\n",
    "        )\n",
    "    )\n",
    "\n",
    "    fig = go.Figure(data=data, layout=layout)\n",
    "    with out:\n",
    "        clear_output(wait=True)\n",
    "        display(py.iplot(fig,filename='test'))\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "map1 = ipyleaflet.Map(\n",
    "    zoom=2,\n",
    "    layout={'height':'500px'},\n",
    ")\n",
    "\n",
    "map1.add_layer(ipyleaflet.TileLayer(url=img_t2m))\n",
    "map1.add_layer(ipyleaflet.TileLayer(url=img_tp))\n",
    "map1.add_control(ipyleaflet.LayersControl())\n",
    "\n",
    "control = FullScreenControl()\n",
    "map1.add_control(control)\n",
    "\n",
    "map1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "def handle_click(**kwargs):\n",
    "    if kwargs.get('type') == 'click':\n",
    "        global lat, lon\n",
    "        mark = ipyleaflet.Marker(location=kwargs.get('coordinates'))\n",
    "        map1.add_layer(mark)\n",
    "        location = mark.location\n",
    "        lat, lon = location[0], location[1]        \n",
    "\n",
    "map1.on_interaction(handle_click)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "out=widgets.Output()\n",
    "button=widgets.Button(description='Plot climate graph')\n",
    "button.on_click(click)\n",
    "display(out)\n",
    "display(button)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<hr>\n",
    "&copy; 2019 | Julia Wagemann\n",
    "<a rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\"><img style=\"float: right\" alt=\"Creative Commons Lizenzvertrag\" style=\"border-width:0\" src=\"https://i.creativecommons.org/l/by/4.0/88x31.png\" /></a>"
   ]
  }
 ],
 "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.7.0"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}