V05. Interactive plots with Bokeh.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# V05: Interactive plots with Bokeh"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "Bokeh is very much a 'New Kid on the Block' in terms of Data Visualisation and isn't quite as well developed as libraries such as Matplotlib or Seaborn. That said, Bokeh offers additional functionality over these libraries particularly in terms of interactivity and integrating with servers.\n",
    "\n",
    "The visualisations that it produces are similar in style to those produced by Javascript charting libraries such as D3,JS and Highcharts without the steep learning curve associated with these libraries and the verbose and extensive code. If you have some Web development and Javascript skills, there is also a Bokeh Javascript library which you can explore also.\n",
    "\n",
    "Whilst Bokeh can produce some amazing visuals, be sure to pick the best tool for the job. Just because Bokeh produces snazzy interactive charts, doesn't necessarily mean that it's a better choice than Matplotlib or Seaborn!\n",
    "\n",
    "<b>IMPORTANT!</b> Bokeh completely revamped their interface from version 0.10 onwards and this notebook was produced using Bokeh version 0.11.1. If you have an older version of Bokeh, the examples below will not work for you! \n",
    "\n",
    "Fortunately updating Bokeh is easy and you'll only need to run the following on your command line:"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "conda update bokeh"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This will update Bokeh to the latest version."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Getting Started"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We'll need a familiar friend to help us with some data..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import pandas as pd"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "As well as a new friend to help us grab some data from the internet..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "import html5lib"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Note! If you don't have the html5lib installed, you can go to the command line and install it via pip:"
   ]
  },
  {
   "cell_type": "raw",
   "metadata": {},
   "source": [
    "pip install html5lib"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Bokeh Charts Module"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We're going to start with the bokeh.charts module. This module is very simple and allows you to produce some nice static charts with a few lines of code. As we'll see, this comes as the expense of power and customisation.\n",
    "\n",
    "Before we start plotting, we'll quickly go through some imports. Bokeh integrates really well with the Jupyter notebook and we can run a couple of simple commands to set this up.\n",
    "\n",
    "* The output_notebook() import / command will ensure that your outputs are all sent to the Jupyter notebook rather than a pop up window.\n",
    "* The show() import / command will show your Bokeh visualisation in the Jupyter notebook.\n",
    "* The output_file() import / command will save your Bokeh visualisation to file."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "    <div class=\"bk-banner\">\n",
       "        <a href=\"http://bokeh.pydata.org\" target=\"_blank\" class=\"bk-logo bk-logo-small bk-logo-notebook\"></a>\n",
       "        <span id=\"0efc5cab-454e-4cbb-852c-48d3c0ea0237\">Loading BokehJS ...</span>\n",
       "    </div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "application/javascript": [
       "\n",
       "(function(global) {\n",
       "  function now() {\n",
       "    return new Date();\n",
       "  }\n",
       "\n",
       "  if (typeof (window._bokeh_onload_callbacks) === \"undefined\") {\n",
       "    window._bokeh_onload_callbacks = [];\n",
       "  }\n",
       "\n",
       "  function run_callbacks() {\n",
       "    window._bokeh_onload_callbacks.forEach(function(callback) { callback() });\n",
       "    delete window._bokeh_onload_callbacks\n",
       "    console.info(\"Bokeh: all callbacks have finished\");\n",
       "  }\n",
       "\n",
       "  function load_libs(js_urls, callback) {\n",
       "    window._bokeh_onload_callbacks.push(callback);\n",
       "    if (window._bokeh_is_loading > 0) {\n",
       "      console.log(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n",
       "      return null;\n",
       "    }\n",
       "    if (js_urls == null || js_urls.length === 0) {\n",
       "      run_callbacks();\n",
       "      return null;\n",
       "    }\n",
       "    console.log(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n",
       "    window._bokeh_is_loading = js_urls.length;\n",
       "    for (var i = 0; i < js_urls.length; i++) {\n",
       "      var url = js_urls[i];\n",
       "      var s = document.createElement('script');\n",
       "      s.src = url;\n",
       "      s.async = false;\n",
       "      s.onreadystatechange = s.onload = function() {\n",
       "        window._bokeh_is_loading--;\n",
       "        if (window._bokeh_is_loading === 0) {\n",
       "          console.log(\"Bokeh: all BokehJS libraries loaded\");\n",
       "          run_callbacks()\n",
       "        }\n",
       "      };\n",
       "      s.onerror = function() {\n",
       "        console.warn(\"failed to load library \" + url);\n",
       "      };\n",
       "      console.log(\"Bokeh: injecting script tag for BokehJS library: \", url);\n",
       "      document.getElementsByTagName(\"head\")[0].appendChild(s);\n",
       "    }\n",
       "  };\n",
       "\n",
       "  var js_urls = ['https://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.11.1.min.js', 'https://cdn.pydata.org/bokeh/release/bokeh-compiler-0.11.1.min.js'];\n",
       "\n",
       "  var inline_js = [\n",
       "    function(Bokeh) {\n",
       "      Bokeh.set_log_level(\"info\");\n",
       "    },\n",
       "    \n",
       "    function(Bokeh) {\n",
       "      Bokeh.$(\"#0efc5cab-454e-4cbb-852c-48d3c0ea0237\").text(\"BokehJS successfully loaded\");\n",
       "    },\n",
       "    function(Bokeh) {\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-0.11.1.min.css\");\n",
       "      console.log(\"Bokeh: injecting CSS: https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.11.1.min.css\");\n",
       "      Bokeh.embed.inject_css(\"https://cdn.pydata.org/bokeh/release/bokeh-widgets-0.11.1.min.css\");\n",
       "    }\n",
       "  ];\n",
       "\n",
       "  function run_inline_js() {\n",
       "    for (var i = 0; i < inline_js.length; i++) {\n",
       "      inline_js[i](window.Bokeh);\n",
       "    }\n",
       "  }\n",
       "\n",
       "  if (window._bokeh_is_loading === 0) {\n",
       "    console.log(\"Bokeh: BokehJS loaded, going straight to plotting\");\n",
       "    run_inline_js();\n",
       "  } else {\n",
       "    load_libs(js_urls, function() {\n",
       "      console.log(\"Bokeh: BokehJS plotting callback run at\", now());\n",
       "      run_inline_js();\n",
       "    });\n",
       "  }\n",
       "}(this));"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from bokeh.io import show, output_notebook\n",
    "from bokeh.charts import Bar, Line\n",
    "\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We'll also need some data. We're going to grab some data from Wikipedia - the medals table for the 2012 London Olympics..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "ename": "ImportError",
     "evalue": "lxml not found, please install it",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mImportError\u001b[0m                               Traceback (most recent call last)",
      "\u001b[0;32m<ipython-input-10-b60f207b3fe3>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[1;32m      3\u001b[0m \u001b[0mlink\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34m'https://en.wikipedia.org/wiki/2012_Summer_Olympics_medal_table'\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      4\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m----> 5\u001b[0;31m \u001b[0mdata\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mpd\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mio\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mhtml\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mread_html\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mlink\u001b[0m\u001b[0;34m)\u001b[0m   \u001b[0;31m# The page with our table in (will return a list)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m      6\u001b[0m \u001b[0mdf\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mpd\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mDataFrame\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdata\u001b[0m\u001b[0;34m[\u001b[0m\u001b[0;36m1\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m)\u001b[0m          \u001b[0;31m# The item in the list that is our table\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m      7\u001b[0m \u001b[0mdf\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0mcolumns\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mdf\u001b[0m\u001b[0;34m.\u001b[0m\u001b[0miloc\u001b[0m\u001b[0;34m[\u001b[0m\u001b[0;36m0\u001b[0m\u001b[0;34m]\u001b[0m             \u001b[0;31m# Setting the column headers\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;32m/Users/tomewing/anaconda/lib/python3.5/site-packages/pandas/io/html.py\u001b[0m in \u001b[0;36mread_html\u001b[0;34m(io, match, flavor, header, index_col, skiprows, attrs, parse_dates, tupleize_cols, thousands, encoding)\u001b[0m\n\u001b[1;32m    868\u001b[0m     \u001b[0m_validate_header_arg\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mheader\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    869\u001b[0m     return _parse(flavor, io, match, header, index_col, skiprows,\n\u001b[0;32m--> 870\u001b[0;31m                   parse_dates, tupleize_cols, thousands, attrs, encoding)\n\u001b[0m",
      "\u001b[0;32m/Users/tomewing/anaconda/lib/python3.5/site-packages/pandas/io/html.py\u001b[0m in \u001b[0;36m_parse\u001b[0;34m(flavor, io, match, header, index_col, skiprows, parse_dates, tupleize_cols, thousands, attrs, encoding)\u001b[0m\n\u001b[1;32m    720\u001b[0m     \u001b[0mretained\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;32mNone\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    721\u001b[0m     \u001b[0;32mfor\u001b[0m \u001b[0mflav\u001b[0m \u001b[0;32min\u001b[0m \u001b[0mflavor\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 722\u001b[0;31m         \u001b[0mparser\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0m_parser_dispatch\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mflav\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    723\u001b[0m         \u001b[0mp\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mparser\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mio\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mcompiled_match\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mattrs\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mencoding\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    724\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;32m/Users/tomewing/anaconda/lib/python3.5/site-packages/pandas/io/html.py\u001b[0m in \u001b[0;36m_parser_dispatch\u001b[0;34m(flavor)\u001b[0m\n\u001b[1;32m    679\u001b[0m     \u001b[0;32melse\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    680\u001b[0m         \u001b[0;32mif\u001b[0m \u001b[0;32mnot\u001b[0m \u001b[0m_HAS_LXML\u001b[0m\u001b[0;34m:\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0;32m--> 681\u001b[0;31m             \u001b[0;32mraise\u001b[0m \u001b[0mImportError\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0;34m\"lxml not found, please install it\"\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m    682\u001b[0m     \u001b[0;32mreturn\u001b[0m \u001b[0m_valid_parsers\u001b[0m\u001b[0;34m[\u001b[0m\u001b[0mflavor\u001b[0m\u001b[0;34m]\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[1;32m    683\u001b[0m \u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;31mImportError\u001b[0m: lxml not found, please install it"
     ]
    }
   ],
   "source": [
    "''' Grabbing the data from Wikipedia '''\n",
    "\n",
    "link = 'https://en.wikipedia.org/wiki/2012_Summer_Olympics_medal_table'\n",
    "\n",
    "data = pd.io.html.read_html(link)   # The page with our table in (will return a list)\n",
    "df = pd.DataFrame(data[1])          # The item in the list that is our table\n",
    "df.columns = df.iloc[0]             # Setting the column headers\n",
    "df = df.drop(0)                     # Dropping the top row as it contains the headers and not data\n",
    "df = df.head(5)                     # Just keeping the top 5 records for simplicity\n",
    "\n",
    "''' Wrangling the data into the correct formats (int instead of str) '''\n",
    "\n",
    "cols = ['Gold','Silver','Bronze','Total']\n",
    "\n",
    "for x in cols:\n",
    "    df[x] = df[x].astype(int)\n",
    "    \n",
    "df"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now we can have a look at creating some basic Bokeh charts..."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basic Bar Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "ename": "NameError",
     "evalue": "name 'df' is not defined",
     "output_type": "error",
     "traceback": [
      "\u001b[0;31m---------------------------------------------------------------------------\u001b[0m",
      "\u001b[0;31mNameError\u001b[0m                                 Traceback (most recent call last)",
      "\u001b[0;32m<ipython-input-11-cef87b0cdfad>\u001b[0m in \u001b[0;36m<module>\u001b[0;34m()\u001b[0m\n\u001b[0;32m----> 1\u001b[0;31m \u001b[0mchart1\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0mBar\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mdf\u001b[0m\u001b[0;34m,\u001b[0m\u001b[0mlabel\u001b[0m \u001b[0;34m=\u001b[0m \u001b[0;34m'NOC'\u001b[0m\u001b[0;34m,\u001b[0m \u001b[0mvalues\u001b[0m\u001b[0;34m=\u001b[0m \u001b[0;34m'Gold'\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n\u001b[0m\u001b[1;32m      2\u001b[0m \u001b[0mshow\u001b[0m\u001b[0;34m(\u001b[0m\u001b[0mchart1\u001b[0m\u001b[0;34m)\u001b[0m\u001b[0;34m\u001b[0m\u001b[0m\n",
      "\u001b[0;31mNameError\u001b[0m: name 'df' is not defined"
     ]
    }
   ],
   "source": [
    "chart1 = Bar(df,label = 'NOC', values= 'Gold')\n",
    "show(chart1)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "## Basic Line Chart"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "chart2 = Line(df,x = 'NOC', y = ['Gold','Silver','Bronze'])\n",
    "show(chart2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Basic Customisation"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "We'll look at doing some basic customisations to our chart as follows:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "chart2 = Line(df,\n",
    "              x = 'NOC', \n",
    "              y = ['Gold','Silver','Bronze'],\n",
    "              xlabel = 'Country',\n",
    "              ylabel = 'Number of Medals',\n",
    "              title = 'Medals by type at London 2012',\n",
    "              legend= 'bottom_right',\n",
    "              height = 600,\n",
    "              width = 600,\n",
    "              color = ['brown','yellow','grey'],\n",
    "             )\n",
    "show(chart2)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "As we can see, this has made our chart look a little bit better but the charts module is very limited in its scope and there are some important things, such as line width and markers, that we'd like to customise but can't.\n",
    "\n",
    "Also we've already learned how to do a lot of this in other libraries such as Matplotlib and Seaborn, so for now we'll focus on the plotting module of Bokeh. If you want to explore the charts module in more detail there are some excellent examples available <a href = \"http://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/blob/master/tutorial/01%20-%20charts.ipynb\">here</a>.\n",
    "\n",
    "Let's carry on by importing the plotting module:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from bokeh.plotting import figure, show"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now lets look at all the ways in which we can customise our line chart..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "''' Some basic data '''\n",
    "\n",
    "x = [1,2,3,4,5]\n",
    "y = [23,54,23,41,72]\n",
    "\n",
    "''' The Figure '''\n",
    "\n",
    "chart3 = figure(plot_width=600, plot_height=600)    # Creating the basic plot\n",
    "\n",
    "''' The title '''\n",
    "\n",
    "chart3.title = \"An Awesome Plot\"                    # Setting the title of the plot\n",
    "chart3.title_text_font_size = '16'                  # Setting the font size for the title\n",
    "\n",
    "''' The Line '''\n",
    "\n",
    "chart3.line(x,y,                                    # Adding data in the form of a line\n",
    "            line_width=3,                           # Setting the line width\n",
    "            color='red')                            # Setting the line color\n",
    "\n",
    "''' The Markers '''\n",
    "\n",
    "chart3.circle(x,y,                                  # Adding markers in the form of circles \n",
    "              line_width=3,                         # Setting the line width\n",
    "              size = 10,                            # Setting the size of the circle\n",
    "              color='red',                          # Setting the colour of the circle\n",
    "              fill_color=\"white\")                   # Setting the fill colour of the circle\n",
    "\n",
    "''' The Grid '''\n",
    "\n",
    "chart3.grid.grid_line_color = None                  # Getting rid of the grid\n",
    "\n",
    "''' y Axis '''\n",
    "\n",
    "chart3.yaxis.axis_label = 'Something'               # Setting the axis label\n",
    "chart3.yaxis.axis_label_text_font_size = '14'       # Setting the axis label font size\n",
    "chart3.yaxis.major_tick_line_color = None           # Removing the ticks from the axis\n",
    "chart3.yaxis.minor_tick_line_color = None           # Removing the ticks from the axis\n",
    "\n",
    "''' x axis '''\n",
    "\n",
    "chart3.xaxis.axis_label = \"Or Other\"                # Setting the axis label\n",
    "chart3.xaxis.axis_label_text_font_size = '14'       # Setting the axis label font size\n",
    "chart3.xaxis.major_tick_line_color = None           # Removing the major ticks from the axis\n",
    "chart3.xaxis.minor_tick_line_color = None           # Removing the minor ticks from the axis\n",
    "\n",
    "\n",
    "show(chart3)                                        # Showing the plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "As we can see, the plot now looks a lot cleaner... But we still need to add interactivity! Fortunately, this is actually really easy to do."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": false
   },
   "outputs": [],
   "source": [
    "from bokeh.models import HoverTool\n",
    "\n",
    "hover = HoverTool(\n",
    "            tooltips=[\n",
    "                (\"Hover Location\", \"$x,$y\"),\n",
    "            ]\n",
    "    )\n",
    "\n",
    "x = [10,20,30,40,50]\n",
    "y = [432,523,723,121,523]\n",
    "\n",
    "chart3 = figure(plot_width=600, plot_height=600, tools=[hover])    # Creating the basic plot\n",
    "''' The title '''\n",
    "\n",
    "chart3.title = \"An Awesome Plot\"                    # Setting the title of the plot\n",
    "chart3.title_text_font_size = '16'                  # Setting the font size for the title\n",
    "\n",
    "''' The Line '''\n",
    "\n",
    "chart3.line(x,y,                                    # Adding data in the form of a line\n",
    "            line_width=3,                           # Setting the line width\n",
    "            color='red')                            # Setting the line color\n",
    "\n",
    "''' The Markers '''\n",
    "\n",
    "chart3.circle(x,y,                                  # Adding markers in the form of circles \n",
    "              line_width=3,                         # Setting the line width\n",
    "              size = 10,                            # Setting the size of the circle\n",
    "              color='red',                          # Setting the colour of the circle\n",
    "              fill_color=\"white\")                   # Setting the fill colour of the circle\n",
    "\n",
    "''' The Grid '''\n",
    "\n",
    "chart3.grid.grid_line_color = None                  # Getting rid of the grid\n",
    "\n",
    "''' y Axis '''\n",
    "\n",
    "chart3.yaxis.axis_label = 'Something'               # Setting the axis label\n",
    "chart3.yaxis.axis_label_text_font_size = '14'       # Setting the axis label font size\n",
    "chart3.yaxis.major_tick_line_color = None           # Removing the ticks from the axis\n",
    "chart3.yaxis.minor_tick_line_color = None           # Removing the ticks from the axis\n",
    "\n",
    "''' x axis '''\n",
    "\n",
    "chart3.xaxis.axis_label = \"Or Other\"                # Setting the axis label\n",
    "chart3.xaxis.axis_label_text_font_size = '14'       # Setting the axis label font size\n",
    "chart3.xaxis.major_tick_line_color = None           # Removing the major ticks from the axis\n",
    "chart3.xaxis.minor_tick_line_color = None           # Removing the minor ticks from the axis\n",
    "\n",
    "\n",
    "show(chart3)                                        # Showing the plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": true
   },
   "source": [
    "This was a VERY quick and brief overview of Bokeh and as you will find if you explore in your own time, there is a LOT more to this wonderful library! In the meantime be sure to check our the further reading section for some more information!"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Further Reading"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<a href  = \"http://nbviewer.jupyter.org/github/bokeh/bokeh-notebooks/tree/master/\">A collection of fantastic Bokeh Jupyter notebooks</a><br/>\n",
    "<a href = \"http://bokeh.pydata.org/en/latest/docs/user_guide.html\">Bokeh User Guide</a><br/>\n",
    "<a href = \"http://bokeh.pydata.org/en/latest/docs/reference.html\">Bokeh Reference Guide</a><br/>\n",
    "<a href = \"http://bokeh.pydata.org/en/latest/docs/gallery.html\">Gallery of advanced Bokeh plots</a>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "collapsed": true
   },
   "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.1"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}