bokeh_datacamp03.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Using the current document\n",
    "\n",
    "Let's get started with building an interactive Bokeh app. This typically begins with importing the curdoc, or \"current document\", function from bokeh.io. This current document will eventually hold all the plots, controls, and layouts that you create. Your job in this exercise is to use this function to add a single plot to your application.\n",
    "\n",
    "In the video, Bryan described the process for running a Bokeh app using the bokeh serve command line tool. In this chapter and the one that follows, the DataCamp environment does this for you behind the scenes. Notice that your code is part of a script.py file. When you hit 'Submit Answer', you'll see in the IPython Shell that we call bokeh serve script.py for you.\n",
    "\n",
    "Remember, as in the previous chapters, that there are different options available for you to interact with your plots, and as before, you may have to scroll down to view the lower portion of the plots.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Perform necessary imports\n",
    "from bokeh.io import curdoc\n",
    "from bokeh.plotting import figure\n",
    "\n",
    "# Create a new plot: plot\n",
    "plot = figure()\n",
    "\n",
    "# Add a line to the plot\n",
    "x = [1,2,3,4,5]\n",
    "y = [2,5,4,6,7]\n",
    "plot.line(x,y)\n",
    "\n",
    "# Add the plot to the current document\n",
    "curdoc().add_root(plot)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Add a single slider\n",
    "\n",
    "In the previous exercise, you added a single plot to the \"current document\" of your application. In this exercise, you'll practice adding a layout to your current document.\n",
    "\n",
    "Your job here is to create a single slider, use it to create a widgetbox layout, and then add this layout to the current document.\n",
    "\n",
    "The slider you create here cannot be used for much, but in the later exercises, you'll use it to update your plots!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Perform the necessary imports\n",
    "from bokeh.io import curdoc\n",
    "from bokeh.layouts import widgetbox\n",
    "from bokeh.models import Slider\n",
    "\n",
    "# Create a slider: slider\n",
    "slider = Slider(title='my slider', start=0, end=10, step=0.1, value=2)\n",
    "\n",
    "# Create a widgetbox layout: layout\n",
    "layout = widgetbox(slider)\n",
    "\n",
    "# Add the layout to the current document\n",
    "curdoc().add_root(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Your job in this exercise is to create two sliders, add them to a widgetbox layout, and then add the layout into the current document."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Perform necessary imports\n",
    "from bokeh.io import curdoc\n",
    "from bokeh.layouts import widgetbox\n",
    "from bokeh.models import Slider\n",
    "\n",
    "# Create first slider: slider1\n",
    "slider1 = Slider(title='slider1', start=0, end=10, step=0.1, value=2)\n",
    "\n",
    "# Create second slider: slider2\n",
    "slider2 = Slider(title='slider2', start=10, end=100, step=1, value=20)\n",
    "\n",
    "# Add slider1 and slider2 to a widgetbox\n",
    "layout = widgetbox(slider1,slider2)\n",
    "\n",
    "# Add the layout to the current document\n",
    "curdoc().add_root(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### How to combine Bokeh models into layouts\n",
    "\n",
    "Let's begin making a Bokeh application that has a simple slider and plot, that also updates the plot based on the slider.\n",
    "\n",
    "In this exercise, your job is to first explicitly create a ColumnDataSource. You'll then combine a plot and a slider into a single column layout, and add it to the current document.\n",
    "\n",
    "After you are done, notice how in the figure you generate, the slider will not actually update the plot, because a widget callback has not been defined. You'll learn how to update the plot using widget callbacks in the next exercise.\n",
    "\n",
    "All the necessary modules have been imported for you. The plot is available in the workspace as plot, and the slider is available as slider."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create ColumnDataSource: source\n",
    "source = ColumnDataSource(data = {'x':x,'y':y})\n",
    "\n",
    "# Add a line to the plot\n",
    "plot.line('x', 'y', source=source)\n",
    "\n",
    "# Create a column layout: layout\n",
    "layout = column(widgetbox(slider), plot)\n",
    "\n",
    "# Add the layout to the current document\n",
    "curdoc().add_root(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Learn about widget callbacks\n",
    "\n",
    "You'll now learn how to use widget callbacks to update the state of a Bokeh application, and in turn, the data that is presented to the user.\n",
    "\n",
    "Your job in this exercise is to use the slider's on_change() function to update the plot's data from the previous example. NumPy's sin() function will be used to update the y-axis data of the plot.\n",
    "\n",
    "Now that you have added a widget callback, notice how as you move the slider of your app, the figure also updates!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Define a callback function: callback\n",
    "def callback(attr, old, new):\n",
    "\n",
    "    # Read the current value of the slider: scale\n",
    "    scale = slider.value\n",
    "\n",
    "    # Compute the updated y using np.sin(scale/x): new_y\n",
    "    new_y = np.sin(scale/x)\n",
    "\n",
    "    # Update source with the new data values\n",
    "    source.data = {'x': x, 'y': new_y}\n",
    "\n",
    "# Attach the callback to the 'value' property of slider\n",
    "slider.on_change('value', callback)\n",
    "\n",
    "# Create layout and add to current document\n",
    "layout = column(widgetbox(slider), plot)\n",
    "curdoc().add_root(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Updating data sources from dropdown callbacks\n",
    "\n",
    "You'll now learn to update the plot's data using a drop down menu instead of a slider. This would allow users to do things like select between different data sources to view.\n",
    "\n",
    "The ColumnDataSource source has been created for you along with the plot. Your job in this exercise is to add a drop down menu to update the plot's data.\n",
    "\n",
    "All necessary modules have been imported for you."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Perform necessary imports\n",
    "from bokeh.models import ColumnDataSource, Select\n",
    "\n",
    "# Create ColumnDataSource: source\n",
    "source = ColumnDataSource(data={\n",
    "    'x' : fertility,\n",
    "    'y' : female_literacy\n",
    "})\n",
    "\n",
    "# Create a new plot: plot\n",
    "plot = figure()\n",
    "\n",
    "# Add circles to the plot\n",
    "plot.circle('x', 'y', source=source)\n",
    "\n",
    "# Define a callback function: update_plot\n",
    "def update_plot(attr, old, new):\n",
    "    # If the new Selection is 'female_literacy', update 'y' to female_literacy\n",
    "    if new == 'female_literacy': \n",
    "        source.data = {\n",
    "            'x' : fertility,\n",
    "            'y' : female_literacy\n",
    "        }\n",
    "    # Else, update 'y' to population\n",
    "    else:\n",
    "        source.data = {\n",
    "            'x' : fertility,\n",
    "            'y' : population\n",
    "        }\n",
    "\n",
    "# Create a dropdown Select widget: select    \n",
    "select = Select(title=\"distribution\", options=['female_literacy', 'population'], value='female_literacy')\n",
    "\n",
    "# Attach the update_plot callback to the 'value' property of select\n",
    "select.on_change('value', update_plot)\n",
    "\n",
    "# Create layout and add to current document\n",
    "layout = row(select, plot)\n",
    "curdoc().add_root(layout)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Synchronize two dropdowns\n",
    "\n",
    "Here, you'll practice using a dropdown callback to update another dropdown's options. This will allow you to customize your applications even further and is a powerful addition to your toolbox.\n",
    "\n",
    "Your job in this exercise is to create two dropdown select widgets and then define a callback such that one dropdown is used to update the other dropdown.\n",
    "\n",
    "All modules necessary have been imported."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create two dropdown Select widgets: select1, select2\n",
    "select1 = Select(title='First', options=['A', 'B'], value='A')\n",
    "select2 = Select(title='Second', options=['1', '2', '3'], value='1')\n",
    "\n",
    "# Define a callback function: callback\n",
    "def callback(attr, old, new):\n",
    "    # If select1 is 'A' \n",
    "    if select1.value == 'A':\n",
    "        # Set select2 options to ['1', '2', '3']\n",
    "        select2.options = ['1','2','3']\n",
    "\n",
    "        # Set select2 value to '1'\n",
    "        select2.value = '1'\n",
    "    else:\n",
    "        # Set select2 options to ['100', '200', '300']\n",
    "        select2.options = ['100','200','300']\n",
    "\n",
    "        # Set select2 value to '100'\n",
    "        select2.value = '100'\n",
    "\n",
    "# Attach the callback to the 'value' property of select1\n",
    "select1.on_change('value',callback )\n",
    "\n",
    "# Create layout and add to current document\n",
    "layout = widgetbox(select1, select2)\n",
    "curdoc().add_root(layout)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Button widgets\n",
    "\n",
    "It's time to practice adding buttons to your interactive visualizations. Your job in this exercise is to create a button and use its on_click() method to update a plot.\n",
    "\n",
    "All necessary modules have been imported for you. In addition, the ColumnDataSource with data x and y as well as the figure have been created for you and are available in the workspace as source and plot.\n",
    "\n",
    "When you're done, be sure to interact with the button you just added to your plot, and notice how it updates the data!"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create a Button with label 'Update Data'\n",
    "button = Button(label='Update Data')\n",
    "\n",
    "# Define an update callback with no arguments: update\n",
    "def update():\n",
    "\n",
    "    # Compute new y values: y\n",
    "    y = np.sin(x) + np.random.random(N)\n",
    "\n",
    "    # Update the ColumnDataSource data dictionary\n",
    "    source.data = {'x':x,'y':y}\n",
    "\n",
    "# Add the update callback to the button\n",
    "button.on_click(update)\n",
    "\n",
    "# Create layout and add to current document\n",
    "layout = column(widgetbox(button), plot)\n",
    "curdoc().add_root(layout)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "#### Button styles\n",
    "\n",
    "You can also get really creative with your Button widgets.\n",
    "\n",
    "In this exercise, you'll practice using CheckboxGroup, RadioGroup, and Toggle to add multiple Button widgets with different styles.\n",
    "\n",
    "curdoc and widgetbox have already been imported for you."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Import CheckboxGroup, RadioGroup, Toggle from bokeh.models\n",
    "from bokeh.models import CheckboxGroup, RadioGroup, Toggle\n",
    "\n",
    "# Add a Toggle: toggle\n",
    "toggle = Toggle(button_type='success', label='Toggle button')\n",
    "\n",
    "# Add a CheckboxGroup: checkbox\n",
    "checkbox = CheckboxGroup(labels=['Option 1', 'Option 2', 'Option 3'])\n",
    "\n",
    "# Add a RadioGroup: radio\n",
    "radio = RadioGroup(labels=['Option 1', 'Option 2', 'Option 3'])\n",
    "\n",
    "# Add widgetbox(toggle, checkbox, radio) to the current document\n",
    "curdoc().add_root(widgetbox(toggle, checkbox, radio))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "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.5.4"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}