{
 "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",
    "\n",
    "<div style=\"float:right;\"><h2>05. Presentation and Layout</h2></div>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.io import output_notebook, show\n",
    "from bokeh.plotting import figure\n",
    "\n",
    "output_notebook()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "In the previous chapters we started to learn how to create single plots using differnet kinds of data. But we often want to plot more than one thing. Bokeh plots can be individually embedded in HTML documents, but it's often easier to\n",
    "combine multiple plots in one of Bokeh's built-in layouts. We will learn how to do that in this chapter\n",
    "\n",
    "The cell below defines a few data variables we will use in examples."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "x = list(range(11))\n",
    "y0, y1, y2 = x, [10-i for i in x], [abs(i-5) for i in x]"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Rows and Columns\n",
    "The `bokeh.layouts` modules provides the ``row`` and ``column`` functions to arrange plot objects in vertical or horizontal layouts. Below is an example of three plots arranged in a row."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.layouts import row\n",
    "\n",
    "# create a new plot\n",
    "s1 = figure(width=250, height=250)\n",
    "s1.circle(x, y0, size=10, color=\"navy\", alpha=0.5)\n",
    "\n",
    "# create another one\n",
    "s2 = figure(width=250, height=250)\n",
    "s2.triangle(x, y1, size=10, color=\"firebrick\", alpha=0.5)\n",
    "\n",
    "# create and another\n",
    "s3 = figure(width=250, height=250)\n",
    "s3.square(x, y2, size=10, color=\"olive\", alpha=0.5)\n",
    "\n",
    "# show the results in a row\n",
    "show(row(s1, s2, s3))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# EXERCISE: use column to arrange a few plots vertically (don't forget to import column)\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Grid plots\n",
    "\n",
    "Bokeh also provides a `gridplot` layout in `bokeh.layouts` for arranging plots in a grid, as show in the example below."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.layouts import gridplot\n",
    "\n",
    "# create a new plot\n",
    "s1 = figure(width=250, height=250)\n",
    "s1.circle(x, y0, size=10, color=\"navy\", alpha=0.5)\n",
    "\n",
    "# create another one\n",
    "s2 = figure(width=250, height=250)\n",
    "s2.triangle(x, y1, size=10, color=\"firebrick\", alpha=0.5)\n",
    "\n",
    "# create and another\n",
    "s3 = figure(width=250, height=250)\n",
    "s3.square(x, y2, size=10, color=\"olive\", alpha=0.5)\n",
    "\n",
    "# put all the plots in a gridplot\n",
    "p = gridplot([[s1, s2], [s3, None]], toolbar_location=None)\n",
    "\n",
    "# show the results\n",
    "show(p)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# EXERCISE: create a gridplot of your own\n"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Next Section"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Click on this link to go to the next notebook: [06 - Linking and Interactions](06%20-%20Linking%20and%20Interactions.ipynb).\n",
    "\n",
    "To go back to the overview, click [here](00%20-%20Introduction%20and%20Setup.ipynb)."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "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
}