{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "<table style=\"float:left; border:none\">\n",
    "   <tr style=\"border:none\">\n",
    "       <td style=\"border:none\">\n",
    "           <a href=\"https://bokeh.org/\">     \n",
    "           <img \n",
    "               src=\"assets/bokeh-transparent.png\" \n",
    "               style=\"width:50px\"\n",
    "           >\n",
    "           </a>    \n",
    "       </td>\n",
    "       <td style=\"border:none\">\n",
    "           <h1>Bokeh Tutorial</h1>\n",
    "       </td>\n",
    "   </tr>\n",
    "</table>\n",
    "<div style=\"float:right;\"><h2>00. Introduction and Setup</h2></div>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "# Tutorial Overview\n",
    "\n",
    "The tutorial is broken into several sections, which are each presented in their own notebook:\n",
    "\n",
    "1.  [Basic Plotting](01%20-%20Basic%20Plotting.ipynb)\n",
    "2.  [Styling and Theming](02%20-%20Styling%20and%20Theming.ipynb)\n",
    "3.  [Data Sources and Transformations](03%20-%20Data%20Sources%20and%20Transformations.ipynb)\n",
    "4.  [Adding Annotations](04%20-%20Adding%20Annotations.ipynb)\n",
    "5.  [Presentation and Layouts](05%20-%20Presentation%20Layouts.ipynb)\n",
    "6.  [Linking and Interactions](06%20-%20Linking%20and%20Interactions.ipynb)\n",
    "7.  [Bar and Categorical Data Plots](07%20-%20Bar%20and%20Categorical%20Data%20Plots.ipynb)\n",
    "8.  [Graph and Network Plots](08%20-%20Graph%20and%20Network%20Plots.ipynb)\n",
    "9.  [Geographic Plots](09%20-%20Geographic%20Plots.ipynb)\n",
    "10. [Exporting and Embedding](10%20-%20Exporting%20and%20Embedding.ipynb)\n",
    "11. [Running Bokeh Applications](11%20-%20Running%20Bokeh%20Applications.ipynb)\n",
    "\n",
    "As well as some extra topic appendices:\n",
    "\n",
    "A1. [Models and Primitives](A1%20-%20Models%20and%20Primitives.ipynb)<br />\n",
    "A2. [Visualizing Big Data with Datashader](A2%20-%20Visualizing%20Big%20Data%20with%20Datashader.ipynb)<br />\n",
    "A3. [High-Level Charting with Holoviews](A3%20-%20High-Level%20Charting%20with%20Holoviews.ipynb)<br />\n",
    "A4. [Additional Resources](A4%20-%20Additional%20Resources.ipynb)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## What is Bokeh\n",
    "\n",
    "Bokeh is an interactive visualization library that targets modern web browsers for presentation. It is good for:\n",
    "\n",
    "* Interactive visualization in modern browsers\n",
    "* Standalone HTML documents, or server-backed apps\n",
    "* Expressive and versatile graphics\n",
    "* Large, dynamic or streaming data\n",
    "* Easy usage from python (or Scala, or R, or...)\n",
    "\n",
    "And most importantly:\n",
    "\n",
    "## <center><i>NO JAVASCRIPT REQUIRED</i></center>\n",
    "\n",
    "Bokeh is an interactive visualization library for modern web browsers. It provides elegant, concise construction of versatile graphics, and affords high-performance interactivity over large or streaming datasets. Bokeh can help anyone who would like to quickly and easily make interactive plots, dashboards, and data applications."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## What can I *do* with Bokeh"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Standard imports \n",
    "\n",
    "from bokeh.io import output_notebook, show\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [],
   "source": [
    "# Plot a complex chart with interactive hover in a few lines of code\n",
    "\n",
    "from bokeh.models import ColumnDataSource, HoverTool\n",
    "from bokeh.plotting import figure\n",
    "from bokeh.sampledata.autompg import autompg_clean as df\n",
    "from bokeh.transform import factor_cmap\n",
    "\n",
    "df.cyl = df.cyl.astype(str)\n",
    "df.yr = df.yr.astype(str)\n",
    "\n",
    "group = df.groupby(by=['cyl', 'mfr'])\n",
    "source = ColumnDataSource(group)\n",
    "\n",
    "p = figure(width=800, height=300, title=\"Mean MPG by # Cylinders and Manufacturer\",\n",
    "           x_range=group, toolbar_location=None, tools=\"\")\n",
    "\n",
    "p.xgrid.grid_line_color = None\n",
    "p.xaxis.axis_label = \"Manufacturer grouped by # Cylinders\"\n",
    "p.xaxis.major_label_orientation = 1.2\n",
    "\n",
    "index_cmap = factor_cmap('cyl_mfr', palette=['#2b83ba', '#abdda4', '#ffffbf', '#fdae61', '#d7191c'], \n",
    "                         factors=sorted(df.cyl.unique()), end=1)\n",
    "\n",
    "p.vbar(x='cyl_mfr', top='mpg_mean', width=1, source=source,\n",
    "       line_color=\"white\", fill_color=index_cmap, \n",
    "       hover_line_color=\"darkgrey\", hover_fill_color=index_cmap)\n",
    "\n",
    "p.add_tools(HoverTool(tooltips=[(\"MPG\", \"@mpg_mean\"), (\"Cyl, Mfr\", \"@cyl_mfr\")]))\n",
    "\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [],
   "source": [
    "# Create and deploy interactive data applications\n",
    "\n",
    "from IPython.display import IFrame\n",
    "IFrame('https://demo.bokeh.org/sliders', width=900, height=500)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "# Getting set up"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [],
   "source": [
    "from IPython.core.display import Markdown\n",
    "Markdown(open(\"README.md\").read())"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "### Setup-test, run the next cell. Hopefully you should see output that looks something like this:\n",
    "\n",
    "    IPython - 7.9.0\n",
    "    Pandas - 0.25.2\n",
    "    Bokeh - 1.4.0\n",
    "    \n",
    "If this isn't working for you, see the [`README.md`](README.md) in this directory."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "Collapsed": "false"
   },
   "outputs": [],
   "source": [
    "from IPython import __version__ as ipython_version\n",
    "from pandas import __version__ as pandas_version\n",
    "from bokeh import __version__ as bokeh_version\n",
    "print(\"IPython - %s\" % ipython_version)\n",
    "print(\"Pandas - %s\" % pandas_version)\n",
    "print(\"Bokeh - %s\" % bokeh_version)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "# Next Section"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "Collapsed": "false"
   },
   "source": [
    "Click on this link to go to the next notebook: [01 - Basic Plotting](01%20-%20Basic%20Plotting.ipynb)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "anaconda-cloud": {},
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "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.9.13"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}