Various updates (#2)

* Tutorial dashboard and data -> notebook folder

* Open links in new tab

* Add and link TOC

* Typos and small updates

* Update color mapper section

* Add red banner to highlight demo dashboard

* Update ColorMappers

* Fix typos

Author: tcmetzger

README.md

@@ -14,8 +14,8 @@ This is helpful if you can't access mybinder.org, or if you want to
 
 ## Local setup
 
-To run the tutorial locally, you first need to clone this repository to your local
-machine. For example:
+To run the tutorial locally, first clone this repository to your local machine.
+For example:
 
 ```bash
 git clone [email protected]:bokeh/tutorial.git

notebooks/01_introduction.ipynb

@@ -7,7 +7,7 @@
     "<table style=\"float:left; border:none\">\n",
     "   <tr style=\"border:none\">\n",
     "       <td style=\"border:none\">\n",
-    "           <a href=\"https://bokeh.org/\">\n",
+    "           <a href=\"https://bokeh.org/\" target=\"_blank\">\n",
     "           <img\n",
     "               src=\"assets/bokeh-transparent.png\"\n",
     "               style=\"width:50px\"\n",
@@ -20,17 +20,16 @@
     "   </tr>\n",
     "</table>\n",
     "\n",
-    "<div style=\"float:right;\"><h2>01 Tutorial Overview</h2></div>"
+    "<div style=\"float:right;\"><a href=\"TOC.ipynb\" target=\"_blank\">Table of contents</a><br><h2>01 Tutorial Overview</h2></div>"
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
     "### What is Bokeh?\n",
     "\n",
-    "Bokeh is an open source library for creating **interactive visualization for modern web\n",
+    "Bokeh is an open-source library for creating **interactive visualization for modern web\n",
     "browsers**.\n",
     "\n",
     "With Bokeh, you can use Python to build beautiful data visualizations, ranging from\n",
@@ -67,55 +66,30 @@
    "source": [
     "# create a complex chart with mouse-over tooltips\n",
     "\n",
-    "from bokeh.models import ColumnDataSource, HoverTool\n",
+    "from bokeh.palettes import HighContrast3\n",
     "from bokeh.plotting import figure, show\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",
+    "fruits = [\"Apples\", \"Pears\", \"Nectarines\", \"Plums\", \"Grapes\", \"Strawberries\"]\n",
+    "years = [\"2015\", \"2016\", \"2017\"]\n",
+    "\n",
+    "data = {\"fruits\": fruits, \"2015\": [2, 1, 4, 3, 2, 4], \"2016\": [5, 3, 4, 2, 4, 6], \"2017\": [3, 2, 4, 4, 5, 3]}\n",
     "\n",
-    "group = df.groupby(by=[\"cyl\", \"mfr\"])\n",
-    "source = ColumnDataSource(group)\n",
+    "p = figure(x_range=fruits, height=250, title=\"Fruit Counts by Year\", toolbar_location=None, tools=\"hover\", tooltips=\"$name @fruits: @$name\")\n",
     "\n",
-    "p = figure(\n",
-    "    width=800,\n",
-    "    height=300,\n",
-    "    title=\"Mean MPG by # Cylinders and Manufacturer\",\n",
-    "    x_range=group,\n",
-    "    toolbar_location=None,\n",
-    "    tools=\"\",\n",
-    ")\n",
+    "p.vbar_stack(years, x=\"fruits\", width=0.9, color=HighContrast3, source=data, legend_label=years)\n",
     "\n",
+    "p.y_range.start = 0\n",
+    "p.x_range.range_padding = 0.1\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(\n",
-    "    \"cyl_mfr\",\n",
-    "    palette=[\"#2b83ba\", \"#abdda4\", \"#ffffbf\", \"#fdae61\", \"#d7191c\"],\n",
-    "    factors=sorted(df.cyl.unique()),\n",
-    "    end=1,\n",
-    ")\n",
-    "\n",
-    "p.vbar(\n",
-    "    x=\"cyl_mfr\",\n",
-    "    top=\"mpg_mean\",\n",
-    "    width=1,\n",
-    "    source=source,\n",
-    "    line_color=\"white\",\n",
-    "    fill_color=index_cmap,\n",
-    "    hover_line_color=\"darkgrey\",\n",
-    "    hover_fill_color=index_cmap,\n",
-    ")\n",
-    "\n",
-    "p.add_tools(HoverTool(tooltips=[(\"MPG\", \"@mpg_mean\"), (\"Cyl, Mfr\", \"@cyl_mfr\")]))\n",
+    "p.axis.minor_tick_line_color = None\n",
+    "p.outline_line_color = None\n",
+    "p.legend.location = \"top_left\"\n",
+    "p.legend.orientation = \"horizontal\"\n",
     "\n",
     "show(p)"
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -130,7 +104,9 @@
     "[\"T-100 Domestic Market\"](https://transtats.bts.gov/DL_SelectFields.aspx?gnoyr_VQ=FIL&QO_fu146_anzr=Nv4%20Pn44vr45)\n",
     "dataset of airline routes within the United States for the year 2021.\n",
     "\n",
-    "Run the next code cell to see the dashboard you'll be building:"
+    "<p style=\"background-color: #f74531; padding: 10px;\">\n",
+    "👇 Run the code cell below to see the dashboard you'll be building:\n",
+    "</p>"
    ]
   },
   {
@@ -139,13 +115,9 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "# load dashboard object\n",
-    "import sys\n",
-    "\n",
-    "sys.path.append(\"../data\")\n",
+    "# load and display tutorial dashboard\n",
     "from tutorial_dashboard import dashboard_layout\n",
     "\n",
-    "# show dashboard\n",
     "show(dashboard_layout)"
    ]
   },
@@ -154,7 +126,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "This dashboard might take a few seconds to load. Once it is loaded, you can interact\n",
+    "This dashboard **might take a few seconds to load**. Once it is loaded, you can interact\n",
     "with the different elements of the dashboard.\n",
     "\n",
     "The tutorial will walk you through all the steps of creating this dashboard, introducing\n",
@@ -179,11 +151,13 @@
     "* [11 Widgets and interactivity](11_widgets_interactivity.ipynb)\n",
     "* [12 Building the demo dashboard](12_demo_dashboard.ipynb)\n",
     "* [13 Exporting and embedding](13_exporting_embedding.ipynb)\n",
-    "* [14 Next steps](15_next_steps.ipynb)"
+    "* [14 Next steps](15_next_steps.ipynb)\n",
+    "\n",
+    "You can always access this table of contents using the link in the top right corner of\n",
+    "every chapter!"
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -215,7 +189,6 @@
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -227,15 +200,10 @@
     "Run each code cell as you make your way through each chapter.\n",
     "\n",
     "Please **run the code cells in the order they are presented** in the notebooks. If you\n",
-    "don't run the code cells in the correct order, you might get errors.\n",
-    "\n",
-    "Running code means you update the notebook file. When you close a notebook to move from\n",
-    "one chapter to another, your browser will ask you for **confirmation to leave the site**.\n",
-    "You can safely ignore this message for the purpose of this tutorial."
+    "don't run the code cells in the correct order, you might get errors."
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -274,7 +242,6 @@
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -303,13 +270,12 @@
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
     "# Next section\n",
     "\n",
-    "<a href=\"02_installation_and_setup.ipynb\">\n",
+    "<a href=\"02_installation_and_setup.ipynb\" target=\"_blank\">\n",
     "    <img src=\"assets/arrow.svg\" alt=\"Next section\" width=\"100\" align=\"right\">\n",
     "</a>\n",
     "\n",
@@ -322,7 +288,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "bk-tutorial",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },

notebooks/02_installation_and_setup.ipynb

@@ -7,7 +7,7 @@
     "<table style=\"float:left; border:none\">\n",
     "   <tr style=\"border:none\">\n",
     "       <td style=\"border:none\">\n",
-    "           <a href=\"https://bokeh.org/\">\n",
+    "           <a href=\"https://bokeh.org/\" target=\"_blank\">\n",
     "           <img\n",
     "               src=\"assets/bokeh-transparent.png\"\n",
     "               style=\"width:50px\"\n",
@@ -20,11 +20,10 @@
     "   </tr>\n",
     "</table>\n",
     "\n",
-    "<div style=\"float:right;\"><h2>02 Bokeh Installation and Setup</h2></div>"
+    "<div style=\"float:right;\"><a href=\"TOC.ipynb\" target=\"_blank\">Table of contents</a><br><h2>02 Bokeh Installation and Setup</h2></div>"
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -39,7 +38,6 @@
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -67,7 +65,6 @@
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -103,7 +100,6 @@
    ]
   },
   {
-   "attachments": {},
    "cell_type": "markdown",
    "metadata": {},
    "source": [
@@ -122,7 +118,7 @@
    "source": [
     "# Next section\n",
     "\n",
-    "<a href=\"03_basic_concepts.ipynb\">\n",
+    "<a href=\"03_basic_concepts.ipynb\" target=\"_blank\">\n",
     "    <img src=\"assets/arrow.svg\" alt=\"Next section\" width=\"100\" align=\"right\">\n",
     "</a>\n",
     "\n",
@@ -133,7 +129,7 @@
  ],
  "metadata": {
   "kernelspec": {
-   "display_name": "bk-tutorial",
+   "display_name": "Python 3 (ipykernel)",
    "language": "python",
    "name": "python3"
   },
@@ -147,7 +143,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.10.8 | packaged by conda-forge | (main, Nov 22 2022, 08:16:33) [MSC v.1929 64 bit (AMD64)]"
+   "version": "3.10.8"
   },
   "vscode": {
    "interpreter": {

notebooks/03_basic_concepts.ipynb

@@ -7,7 +7,7 @@
     "<table style=\"float:left; border:none\">\n",
     "   <tr style=\"border:none\">\n",
     "       <td style=\"border:none\">\n",
-    "           <a href=\"https://bokeh.org/\">\n",
+    "           <a href=\"https://bokeh.org/\" target=\"_blank\">\n",
     "           <img\n",
     "               src=\"assets/bokeh-transparent.png\"\n",
     "               style=\"width:50px\"\n",
@@ -20,7 +20,7 @@
     "   </tr>\n",
     "</table>\n",
     "\n",
-    "<div style=\"float:right;\"><h2>03 Basic Concepts</h2></div>"
+    "<div style=\"float:right;\"><a href=\"TOC.ipynb\" target=\"_blank\">Table of contents</a><br><h2>03 Basic Concepts</h2></div>"
    ]
   },
   {
@@ -60,7 +60,7 @@
     "connected to the BokehJS JavaScript library on the browser-side through JSON\n",
     "](assets/bokeh_bokehjs.svg)\n",
     "\n",
-    "This tutorial focuses on using Bokeh in Python which generates the BokehJS code\n",
+    "This tutorial focuses on using Bokeh in Python, which generates the BokehJS code\n",
     "automatically. However, you can also use BokehJS directly in JavaScript. For\n",
     "more information, see the chapter\n",
     "[BokehJS](https://docs.bokeh.org/en/latest/docs/user_guide/advanced/bokehjs.html)\n",
@@ -76,7 +76,7 @@
     "You can interact with Bokeh using one of the following two interfaces:\n",
     "\n",
     "* The high-level **bokeh.plotting** interface: This is Bokeh’s primary\n",
-    "interface. It is a general-purpose interface which is similar to the plotting\n",
+    "interface. It is a general-purpose interface similar to the plotting\n",
     "interfaces of libraries such as [Matplotlib](http://matplotlib.org/) or\n",
     "[Matlab](http://www.mathworks.com/products/matlab/). The bokeh.plotting interface\n",
     "takes care of many aspects of your plot automatically. Therefore, it makes it\n",
@@ -197,7 +197,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "You'll learn more about widgets in the chapter [TBD]"
+    "You'll learn more about widgets in chapter [11 Widgets and interactivity](11_widgets_and_interactivity.ipynb)."
    ]
   },
   {
@@ -207,7 +207,7 @@
     "#### Layouts\n",
     "\n",
     "A Bokeh document can consist of a single plot. However, you can also combine several\n",
-    "plots and widges into a more complex visualization. To combine multiple elements in one\n",
+    "plots and widgets into a more complex visualization. Combining multiple elements in one\n",
     "document is called a **layout**. Bokeh provides several different layout options to\n",
     "arrange your plots and widgets in a document.\n",
     "\n",
@@ -247,7 +247,7 @@
    "cell_type": "markdown",
    "metadata": {},
    "source": [
-    "You will learn more about layouts in chapter [TBD]"
+    "You will learn more about layouts in chapter [10 Layouts](10_layouts.ipynb)."
    ]
   },
   {
@@ -256,7 +256,7 @@
    "source": [
     "# Next section\n",
     "\n",
-    "<a href=\"04_basic_plots.ipynb\">\n",
+    "<a href=\"04_basic_plots.ipynb\" target=\"_blank\">\n",
     "    <img src=\"assets/arrow.svg\" alt=\"Next section\" width=\"100\" align=\"right\">\n",
     "</a>\n",
     "\n",