Moved interact section to building panels section (#201)

* Moved interact section to 02

* Moved time at which Exercise 3 is tackled in index notebook

examples/tutorial/02_Building_Panels.ipynb

@@ -17,21 +17,66 @@
     "\n",
     "Panel is designed to make it simple to add interactive controls to your existing plots and data displays, simple to build apps for your own use in a notebook, simple to deploy apps as standalone dashboards to share with colleagues, and seamlessly shift back and forth between each of these tasks as your needs evolve. If there is one thing you should take away from this tutorial, it's Panel!\n",
     "\n",
-    "In this section of the tutorial we will get you familiarized with the three main types of components in Panel, to get you started on displaying objects, laying them out, and then connecting them to interactive widgets to build simple apps. Finally we will take you through an exercise to build a simple dashboard from a number of existing components. For now, we won't show code for any particular plotting library, but if you have a favorite one already, you should be able to use it with Panel in the exercises.\n",
-    "\n",
-    "## Component types\n",
+    "Throughout this tutorial we will use an earthquake dataset collected by the US Geological survey, so will start by loading it:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import dask.dataframe as dd\n",
     "\n",
-    "Before we start building interactive apps, we will learn about the three main types of components in Panel:\n",
+    "df = dd.read_parquet('../data/earthquakes.parq', columns=['time', 'place', 'mag']).reset_index(drop=True).persist()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "Additionally before displaying anything with Panel it is always necessary to load the Panel extension:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import panel as pn\n",
     "\n",
-    "* **Pane**: A Pane provides a view of an external object (text, image, plot, etc.) by wrapping it\n",
-    "* **Panel**: A Panel lays out multiple components in a row, column, or grid.\n",
-    "* **Widget**: A Widget provides input controls to add interactive features to your Panel.\n",
+    "pn.extension()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## pn.interact\n",
     "\n",
-    "If you ever want to discover how a particular component works, see the [reference gallery](https://panel.pyviz.org/reference/index.html).\n",
+    "Before we get into the details of how Panel allows you to render and lay out objects we will dive straight and use Panel's `interact` function, modeled on the similar function in `ipywidgets`, to get a simple interactive app. For instance, if you have a function that returns a row of a dataframe given an index, you can very easily make a panel with a widget to control the row displayed."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def select_row(row=0):\n",
+    "    return df.loc[row].compute()\n",
     "\n",
-    "## Displaying content\n",
+    "pn.interact(select_row, row=(0, len(df)-1))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "This approach can be used for any function that returns a displayable object, calling the function whenever one of the parameters of that function has changed.  \n",
     "\n",
-    "Before displaying anything with Panel it is always necessary to load the Panel extension:"
+    "In the spirit of shortcuts and not dead ends, let's see what's in the object returned by `interact`:"
    ]
   },
   {
@@ -40,15 +85,45 @@
    "metadata": {},
    "outputs": [],
    "source": [
-    "import panel as pn\n",
+    "app = pn.interact(select_row, row=(0, len(df)-1))\n",
     "\n",
-    "pn.extension()"
+    "print(app)"
    ]
   },
   {
    "cell_type": "markdown",
    "metadata": {},
    "source": [
+    "Here, `interact` has constructed a Column panel consisting of one Column of widgets (with one widget), and one Row of output (with one HTML pane). This object, once created, is a full compositional Panel object, and can be reconfigured and expanded if you wish without breaking the connections between widgets and values:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "pn.Column(\"## Choose a row\", pn.Row(app[0], app[1]))"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "We've now seen how we can very easily build an interactive app, in the rest of this section and the next section of the tutorial we will get you familiarized with the three main types of components in Panel, to get you started on displaying objects, laying them out, and then connecting them to interactive widgets to build simple apps. Finally we will take you through an exercise to build a simple dashboard from a number of existing components. For now, we won't show code for any particular plotting library, but if you have a favorite one already, you should be able to use it with Panel in the exercises.\n",
+    "\n",
+    "## Component types\n",
+    "\n",
+    "Before we start building more interactive apps, we will learn about the three main types of components in Panel:\n",
+    "\n",
+    "* **Pane**: A Pane provides a view of an external object (text, image, plot, etc.) by wrapping it\n",
+    "* **Panel**: A Panel lays out multiple components in a row, column, or grid.\n",
+    "* **Widget**: A Widget provides input controls to add interactive features to your Panel.\n",
+    "\n",
+    "If you ever want to discover how a particular component works, see the [reference gallery](https://panel.pyviz.org/reference/index.html).\n",
+    "\n",
+    "## Displaying content\n",
+    "\n",
     "The fundamental concept behind Panel is that it transforms the objects you give it into a viewable object that can be composed into a layout and updated dynamically. In this tutorial we will be building a dashboard visualizing a dataset of earthquake events, so let us start by displaying a title using the `pn.panel` function:"
    ]
   },

examples/tutorial/03_Interlinked_Panels.ipynb

@@ -26,7 +26,7 @@
    "source": [
     "In the previous section we learned the very basics of working with Panel. Specifically we looked at the different types of components, how to update them and how to serve a Panel application or dashboard. However to start building actual apps with Panel we need to be able to add interactivity by linking different components together. In this section we will learn how to link widgets to outputs to start building some simple interactive applications.\n",
     "\n",
-    "In this example we will use the earthquake data we started playing with in the previous exercise, so will start by loading it:"
+    "In this section we will once again make use of the earthquake dataset we loaded previously:"
    ]
   },
   {
@@ -40,63 +40,6 @@
     "df = dd.read_parquet('../data/earthquakes.parq', columns=['time', 'place', 'mag']).reset_index(drop=True).persist()"
    ]
   },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "## pn.interact\n",
-    "\n",
-    "The simplest way to get interactivity is to use Panel's `interact` function, modeled on the similar function in `ipywidgets`. For instance, if you have a function that returns a row of a dataframe given an index, you can very easily make a panel with a widget to control the row displayed."
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "def select_row(row=0):\n",
-    "    return df.loc[row].compute()\n",
-    "\n",
-    "pn.interact(select_row, row=(0, len(df)-1))"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "This approach can be used for any function that returns a displayable object, calling the function whenever one of the parameters of that function has changed.  \n",
-    "\n",
-    "In the spirit of shortcuts and not dead ends, let's see what's in the object returned by `interact`:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "app = pn.interact(select_row, row=(0, len(df)-1))\n",
-    "\n",
-    "print(app)"
-   ]
-  },
-  {
-   "cell_type": "markdown",
-   "metadata": {},
-   "source": [
-    "Here, `interact` has constructed a Column panel consisting of one Column of widgets (with one widget), and one Row of output (with one HTML pane). This object, once created, is a full compositional Panel object, and can be reconfigured and expanded if you wish without breaking the connections between widgets and values:"
-   ]
-  },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "pn.Column(\"## Choose a row\", pn.Row(app[0], app[1]))"
-   ]
-  },
   {
    "cell_type": "markdown",
    "metadata": {},

examples/tutorial/index.ipynb

@@ -55,8 +55,8 @@
     "   \n",
     "- **The `.plot` API: a data-centric approach to visualization**   \n",
     "   * **30 min**  [Basic Plotting](./04_Basic_Plotting.ipynb): Quick introduction to the `.plot` interface.\n",
-    "   * **10 min**  [*Exercise 3*](./exercises/Plotting.ipynb#Exercise-3): Add some `.plot` or `.hvplot` visualizations to your dashboard.\n",
     "   * **10 min**  [Composing Plots](./05_Composing_Plots.ipynb): Overlaying and laying out `.hvplot` outputs to show relationships.\n",
+    "   * **10 min**  [*Exercise 3*](./exercises/Plotting.ipynb#Exercise-3): Add some `.plot` or `.hvplot` visualizations to your dashboard.\n",
     "   * **10 min**  *Break*\n",
     "\n",
     "   \n",