finish activity01 lesson7 bokeh widgets

Author: timgrossmann

lesson07/Activity01/activity01_solution.ipynb

@@ -662,7 +662,13 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "... TODO"
+    "There are many options when it comes to choosing which interactivity to use.   \n",
+    "Since the goal of this activity is to be able to compare two stocks with each other in terms of traded volume and the high/low and open/close prices over a time range, we will need widgets to select elements and a slider to select a given range.   \n",
+    "Considering that we have to options of display, we also need a way to select either one or the other.   \n",
+    "\n",
+    "At the end of this task, you will have something comparable to image below implemented and ready to compare data from the dataset.\n",
+    "\n",
+    "<img src=\"./data/candle_plot.png\" width=500 align=\"left\"/>"
    ]
   },
   {
@@ -680,14 +686,43 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "...TODO   \n",
+    "Before we go in and implement the plotting methods, we want to set up the interactivity widgets.   \n",
+    "**Please scroll down** to the cell that says `# extracing the necessary data` before implementing the plotting.   \n",
+    "\n",
+    "Still make sure to execute the cells below that will simply `pass` and do nothing for now."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "At the moment, our `show()` in the last cell will not render any elements into our visualization.   \n",
+    "We will start with the, so called, candle stick visualization which is often used with stock price data.   \n",
+    "\n",
+    "The already defined method below gets our `plot` object, a `stock_name`, a `stock_range` containing the data for the, with the widgets, selected range, and a color for the line.   \n",
+    "We will use those arguments to create the candle sticks. They basically contain of a `segment` that creates the vertical line, and either a green or red `vbar` to color code whether the close price is lower than the open price.   \n",
+    "\n",
+    "\n",
+    "Once you have created the candles, we also want to have a continuous line running through the mean (high, low) point of each candle. So you have to calculate the mean for every high, low pair and then plot those data points with a line with the given `color`.\n",
+    "\n",
+    "Make sure to reference the example provided in the Bokeh library here, you can adapt the code in there to our arguments.\n",
     "https://bokeh.pydata.org/en/latest/docs/gallery/candlestick.html\n",
-    "https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/legends.html"
+    "\n",
+    "After you are done implementing the `add_candle_plot` method, scroll down and run the `@interact` cell again.   \n",
+    "You will now see the candles being displayed for the two selected stocks."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "**Note:**   \n",
+    "Since we are providing the `plot` as a reference to the method, we don't need to return anything since we are mutating our passed in plot."
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 192,
+   "execution_count": 13,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -713,23 +748,32 @@
     "    stock_mean_val=stock_range[['high', 'low']].mean(axis=1)\n",
     "    plot.line(stock_range['short_date'], stock_mean_val, \n",
     "              legend=('Mean price of ' + stock_name), muted_alpha=0.2,\n",
-    "              line_color=color, alpha=0.5)\n",
+    "              line_color=color, alpha=0.5)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "The last missing step is implementing the plotting of the lines if the `volume` value is selected.   \n",
+    "We've created simple lines in the previous exercise, so this should not be a problem.   \n",
     "\n",
-    "    return plot"
+    "One additional interaction feature is to have an interactive legend that allows us to \"mute\", meaning grey out, each stock in the visualization.   \n",
+    "To make our legend interactive please take a look at the documentation for the legend feature.\n",
+    "https://bokeh.pydata.org/en/latest/docs/user_guide/interaction/legends.html"
    ]
   },
   {
-   "cell_type": "code",
-   "execution_count": null,
+   "cell_type": "markdown",
    "metadata": {},
-   "outputs": [],
    "source": [
-    "...TODO"
+    "**Note:**   \n",
+    "Don't forget to update your `add_canlde_plot` `vbar`s and `segment` to also include the `muted_alpha` parameter. Otherwise you won't be able to mute the stocks in the \"open-close\" visualization."
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 193,
+   "execution_count": 14,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -754,8 +798,8 @@
     "    plot.grid.grid_line_alpha=0.3\n",
     "    \n",
     "    if value == 'open-close':\n",
-    "        candle_plot_1=add_candle_plot(plot, stock_1_name, stock_1_range, 'blue')\n",
-    "        candle_plot_2=add_candle_plot(plot, stock_2_name, stock_2_range, 'orange')\n",
+    "        add_candle_plot(plot, stock_1_name, stock_1_range, 'blue')\n",
+    "        add_candle_plot(plot, stock_2_name, stock_2_range, 'orange')\n",
     "        \n",
     "    if value == 'volume':\n",
     "        plot.line(stock_1_range['short_date'], stock_1_range['volume'], \n",
@@ -773,16 +817,25 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "...TODO"
+    "We want to **start implementing our visualization here**.   \n",
+    "\n",
+    "In the following cells, we will extract the necessary data which will be provided to the widget elements.   \n",
+    "In the first cell we want to extract the following information:\n",
+    "- a list of unique stock names that are present in the dataset\n",
+    "- a list of all short_dates that are in 2016\n",
+    "- a sorted list of unique dates generated from the previous list of dates from 2016\n",
+    "- a list with the values `open-close` and `volume`\n",
+    "\n",
+    "Once we have this information in place, we can start building our widgets."
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 194,
+   "execution_count": 15,
    "metadata": {},
    "outputs": [],
    "source": [
-    "# extracing all the stock names\n",
+    "# extracing the necessary data\n",
     "stock_names=dataset['symbol'].unique()\n",
     "dates_2016=dataset[dataset['short_date'] >= '2016-01-01']['short_date']\n",
     "unique_dates_2016=sorted(dates_2016.unique())\n",
@@ -793,20 +846,27 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "...TODO"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "**Note:**   \n",
-    "As mentioned in the previous exercise, we can also make use of the widgets described here: https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html"
+    "Given the extracted information from the cell above, we can now define the widgets and provide the available options to it.   \n",
+    "\n",
+    "As mentioned in the introduction, we want to have several interactive features including:\n",
+    "- two `Dropdown`s with which we can select two stocks that should be compared to each other\n",
+    "    - the first dropdown by default should have the `AAPL` stock selected, named \"Compare: \"\n",
+    "    - the second dropdown by default should have the `AON` stock selected, named \"to: \"\n",
+    "    \n",
+    "    \n",
+    "- a `SelectionRange` which will allow us to select a range of dates from the extracted list of unique 2016 dates\n",
+    "    - by default, the first 25 dates should be selected, named \"From-To\"\n",
+    "    - make sure to disable the `continuous_update` parameter here\n",
+    "    - adjust the layout width to 500px to make sure the dates are displayed correctly\n",
+    "    \n",
+    "    \n",
+    "- a `RadioButton` group that provides the options \"open-close\" and \"volume\"\n",
+    "    - by default, \"open-close\" should be selected, named \"Metric\""
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 195,
+   "execution_count": 16,
    "metadata": {},
    "outputs": [],
    "source": [
@@ -827,26 +887,41 @@
     "\n",
     "value_radio=widgets.RadioButtons(options=value_options,\n",
     "                                 value='open-close',\n",
-    "                                 description='Metric',\n",
-    "                                 orientation='horizontal')"
+    "                                 description='Metric')"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "...TODO"
+    "**Note:**   \n",
+    "As mentioned in the previous exercise, we can also make use of the widgets described here: https://ipywidgets.readthedocs.io/en/stable/examples/Widget%20List.html"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "After setting up the widgets, we can the method that will be called with each update of the interaction widgets.   \n",
+    "As seen in the previous exercise, we will use the `@interact` decorator for this.   \n",
+    "\n",
+    "Instead of value ranges or lists, we will provide the variable names of our already created widgets in the decorator.   \n",
+    "The method will get 4 arguments, `stock_1`, `stock_2`, `date`, and `value`.   \n",
+    "Since we have already set up the empty method that will return a plot above, we can call `show()` with the method call inside to show the result once it is returned from the `get_stock_for_2016` method.   \n",
+    "\n",
+    "Once you've build the widgets, upon execution, you will see them being displayed below the cell.   \n",
+    "We are now ready to to **scroll up and implement the plotting** with Bokeh."
    ]
   },
   {
    "cell_type": "code",
-   "execution_count": 196,
+   "execution_count": 17,
    "metadata": {},
    "outputs": [
     {
      "data": {
       "application/vnd.jupyter.widget-view+json": {
-       "model_id": "907e39bdce42436dbf30d133937f7c27",
+       "model_id": "3c69a87a11504dd28beb7f5bece89d1d",
        "version_major": 2,
        "version_minor": 0
       },
@@ -869,16 +944,12 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
+    "This is a nice example that shows us how much interaction we can add to a visualization with very simple techniques such as using the interact functionality.   \n",
+    "\n",
     "**Note:**   \n",
-    "We can already see that each date is displayed on the x-axis. If we want to display a bigger time range, we have to customize the ticks on our x-axis. This can be done using `Ticker` objects.   "
+    "Think about what else you could add/change for this visualization. Maybe we don't only want to display 2016 but be able to select the year we want to display. Maybe we want to compare different years with each other.   \n",
+    "There are endless options.\n"
    ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": []
   }
  ],
  "metadata": {