solara-ui 1.45.0__py3-none-any.whl

solara/website/pages/documentation/getting_started/content/04-tutorials/_jupyter_dashboard_1.ipynb

@@ -0,0 +1,1021 @@
+{
+ "cells": [
+  {
+   "cell_type": "markdown",
+   "id": "8aeeb4f6",
+   "metadata": {},
+   "source": [
+    "# Build your Jupyter dashboard using Solara\n",
+    "\n",
+    "Welcome to the first part of a series of tutorials showing you how to create a dashboard in Jupyter and deploy it as a standalone web app. Importantly, you won't need to rewrite your app in a different framework for deployment. We will use a pure Python solution with no JavaScript or CSS required.\n",
+    "\n",
+    "Jupyter notebooks are an incredible data analysis tool since they blend code, visualization, and narrative into a single document. However, we do not want to show the code if the insights must be presented to a non-technical audience.\n",
+    "\n",
+    "\n",
+    "Built on top of ipywidgets, the Solara framework integrates well into the Jupyter notebook, Jupyter lab as well as other Jupyter environments, and as we will see in a later article, can be deployed efficiently using the Solara server. This, by itself, makes Solara a perfect solution for creating dashboards or data apps.\n",
+    "\n",
+    "In this tutorial, we will create a simple dashboard using Solara's UI components. The final product will allow an end-user to filter,\n",
+    "visualize and explore a dataset on a map.\n",
+    "\n",
+    "![image](https://dxhl76zpt6fap.cloudfront.net/public/docs/tutorial/jupyter-dashboard1.webp)\n",
+    "\n",
+    "## Pre-requisites \n",
+    "\n",
+    "You need to install `pandas`, `matplotlib`, `folium` and `solara`. Assuming you are using pip, you can execute on your shell:\n",
+    "\n",
+    "```\n",
+    "$ pip install pandas matplotlib folium solara\n",
+    "```\n",
+    "\n",
+    "\n",
+    "Or in your notebook\n",
+    "```\n",
+    "%pip install pandas matplotlib folium solara\n",
+    "```\n",
+    "\n",
+    "## The start\n",
+    "\n",
+    "We will use a subsample of the [San Fanfrisco crime dataset](https://www.kaggle.com/competitions/sf-crime/data) which contains information on types of crimes and where they were committed.\n",
+    "\n",
+    "[Download the CSV file](https://github.com/widgetti/solara/raw/master/solara/website/pages/documentation/getting_started/content/04-tutorials/SF_crime_sample.csv.gz) if you want to run this locally, or let the code below sort it out."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "6cc6256a",
+   "metadata": {},
+   "source": [
+    "The first thing we do when we read in the data is to print it out to see what the dataset contains."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 1,
+   "id": "4f399bdc",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style scoped>\n",
+       "    .dataframe tbody tr th:only-of-type {\n",
+       "        vertical-align: middle;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>Unnamed: 0</th>\n",
+       "      <th>IncidntNum</th>\n",
+       "      <th>Category</th>\n",
+       "      <th>Descript</th>\n",
+       "      <th>DayOfWeek</th>\n",
+       "      <th>Date</th>\n",
+       "      <th>Time</th>\n",
+       "      <th>PdDistrict</th>\n",
+       "      <th>Resolution</th>\n",
+       "      <th>Address</th>\n",
+       "      <th>X</th>\n",
+       "      <th>Y</th>\n",
+       "      <th>Location</th>\n",
+       "      <th>PdId</th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>0</th>\n",
+       "      <td>50820</td>\n",
+       "      <td>160525689</td>\n",
+       "      <td>BURGLARY</td>\n",
+       "      <td>BURGLARY OF STORE, FORCIBLE ENTRY</td>\n",
+       "      <td>Tuesday</td>\n",
+       "      <td>06/28/2016 12:00:00 AM</td>\n",
+       "      <td>21:25</td>\n",
+       "      <td>TARAVAL</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>600 Block of LINCOLN WY</td>\n",
+       "      <td>-122.464850</td>\n",
+       "      <td>37.765888</td>\n",
+       "      <td>(37.7658875448653, -122.464850114297)</td>\n",
+       "      <td>16052568905051</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>1</th>\n",
+       "      <td>11981</td>\n",
+       "      <td>160334220</td>\n",
+       "      <td>LARCENY/THEFT</td>\n",
+       "      <td>PETTY THEFT FROM LOCKED AUTO</td>\n",
+       "      <td>Friday</td>\n",
+       "      <td>04/22/2016 12:00:00 AM</td>\n",
+       "      <td>19:00</td>\n",
+       "      <td>TARAVAL</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>SAN JOSE AV / LAKEVIEW AV</td>\n",
+       "      <td>-122.450378</td>\n",
+       "      <td>37.716169</td>\n",
+       "      <td>(37.7161694707734, -122.450378171697)</td>\n",
+       "      <td>16033422006243</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>2</th>\n",
+       "      <td>74626</td>\n",
+       "      <td>160740053</td>\n",
+       "      <td>LARCENY/THEFT</td>\n",
+       "      <td>PETTY THEFT FROM A BUILDING</td>\n",
+       "      <td>Monday</td>\n",
+       "      <td>09/12/2016 12:00:00 AM</td>\n",
+       "      <td>08:40</td>\n",
+       "      <td>INGLESIDE</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>0 Block of PHELAN AV</td>\n",
+       "      <td>-122.452290</td>\n",
+       "      <td>37.725693</td>\n",
+       "      <td>(37.7256933575703, -122.452289660492)</td>\n",
+       "      <td>16074005306303</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>3</th>\n",
+       "      <td>60776</td>\n",
+       "      <td>160619721</td>\n",
+       "      <td>WARRANTS</td>\n",
+       "      <td>WARRANT ARREST</td>\n",
+       "      <td>Monday</td>\n",
+       "      <td>08/01/2016 12:00:00 AM</td>\n",
+       "      <td>16:12</td>\n",
+       "      <td>PARK</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>1100 Block of SCOTT ST</td>\n",
+       "      <td>-122.437099</td>\n",
+       "      <td>37.780352</td>\n",
+       "      <td>(37.7803522156893, -122.43709942832)</td>\n",
+       "      <td>16061972163010</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>4</th>\n",
+       "      <td>34547</td>\n",
+       "      <td>160345772</td>\n",
+       "      <td>WARRANTS</td>\n",
+       "      <td>ENROUTE TO OUTSIDE JURISDICTION</td>\n",
+       "      <td>Wednesday</td>\n",
+       "      <td>04/27/2016 12:00:00 AM</td>\n",
+       "      <td>19:34</td>\n",
+       "      <td>SOUTHERN</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>600 Block of BRANNAN ST</td>\n",
+       "      <td>-122.399841</td>\n",
+       "      <td>37.775633</td>\n",
+       "      <td>(37.7756327864282, -122.399841045579)</td>\n",
+       "      <td>16034577262050</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>...</th>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9995</th>\n",
+       "      <td>137465</td>\n",
+       "      <td>170013301</td>\n",
+       "      <td>OTHER OFFENSES</td>\n",
+       "      <td>HARASSING PHONE CALLS</td>\n",
+       "      <td>Saturday</td>\n",
+       "      <td>11/26/2016 12:00:00 AM</td>\n",
+       "      <td>12:00</td>\n",
+       "      <td>SOUTHERN</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>1100 Block of MISSION ST</td>\n",
+       "      <td>-122.412834</td>\n",
+       "      <td>37.777790</td>\n",
+       "      <td>(37.7777903094246, -122.412834332129)</td>\n",
+       "      <td>17001330128135</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9996</th>\n",
+       "      <td>55811</td>\n",
+       "      <td>160573939</td>\n",
+       "      <td>OTHER OFFENSES</td>\n",
+       "      <td>LOST/STOLEN LICENSE PLATE</td>\n",
+       "      <td>Thursday</td>\n",
+       "      <td>07/07/2016 12:00:00 AM</td>\n",
+       "      <td>19:00</td>\n",
+       "      <td>BAYVIEW</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>100 Block of TEXAS ST</td>\n",
+       "      <td>-122.395812</td>\n",
+       "      <td>37.764531</td>\n",
+       "      <td>(37.7645312950153, -122.395812338479)</td>\n",
+       "      <td>16057393971010</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9997</th>\n",
+       "      <td>120115</td>\n",
+       "      <td>166110038</td>\n",
+       "      <td>LARCENY/THEFT</td>\n",
+       "      <td>GRAND THEFT FROM LOCKED AUTO</td>\n",
+       "      <td>Saturday</td>\n",
+       "      <td>05/14/2016 12:00:00 AM</td>\n",
+       "      <td>03:30</td>\n",
+       "      <td>CENTRAL</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>BAY ST / VANNESS AV</td>\n",
+       "      <td>-122.425111</td>\n",
+       "      <td>37.804146</td>\n",
+       "      <td>(37.80414615262, -122.425110613231)</td>\n",
+       "      <td>16611003806244</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9998</th>\n",
+       "      <td>5069</td>\n",
+       "      <td>160093943</td>\n",
+       "      <td>NON-CRIMINAL</td>\n",
+       "      <td>AIDED CASE</td>\n",
+       "      <td>Monday</td>\n",
+       "      <td>02/01/2016 12:00:00 AM</td>\n",
+       "      <td>15:23</td>\n",
+       "      <td>TARAVAL</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>2600 Block of SAN JOSE AV</td>\n",
+       "      <td>-122.450635</td>\n",
+       "      <td>37.715772</td>\n",
+       "      <td>(37.7157715048394, -122.450634805259)</td>\n",
+       "      <td>16009394351040</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9999</th>\n",
+       "      <td>35667</td>\n",
+       "      <td>160373212</td>\n",
+       "      <td>ASSAULT</td>\n",
+       "      <td>BATTERY</td>\n",
+       "      <td>Friday</td>\n",
+       "      <td>05/06/2016 12:00:00 AM</td>\n",
+       "      <td>20:30</td>\n",
+       "      <td>BAYVIEW</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>1300 Block of NEWHALL ST</td>\n",
+       "      <td>-122.391880</td>\n",
+       "      <td>37.735936</td>\n",
+       "      <td>(37.7359364818345, -122.391879837176)</td>\n",
+       "      <td>16037321204134</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "<p>10000 rows × 14 columns</p>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "      Unnamed: 0  IncidntNum        Category  \\\n",
+       "0          50820   160525689        BURGLARY   \n",
+       "1          11981   160334220   LARCENY/THEFT   \n",
+       "2          74626   160740053   LARCENY/THEFT   \n",
+       "3          60776   160619721        WARRANTS   \n",
+       "4          34547   160345772        WARRANTS   \n",
+       "...          ...         ...             ...   \n",
+       "9995      137465   170013301  OTHER OFFENSES   \n",
+       "9996       55811   160573939  OTHER OFFENSES   \n",
+       "9997      120115   166110038   LARCENY/THEFT   \n",
+       "9998        5069   160093943    NON-CRIMINAL   \n",
+       "9999       35667   160373212         ASSAULT   \n",
+       "\n",
+       "                               Descript  DayOfWeek                    Date  \\\n",
+       "0     BURGLARY OF STORE, FORCIBLE ENTRY    Tuesday  06/28/2016 12:00:00 AM   \n",
+       "1          PETTY THEFT FROM LOCKED AUTO     Friday  04/22/2016 12:00:00 AM   \n",
+       "2           PETTY THEFT FROM A BUILDING     Monday  09/12/2016 12:00:00 AM   \n",
+       "3                        WARRANT ARREST     Monday  08/01/2016 12:00:00 AM   \n",
+       "4       ENROUTE TO OUTSIDE JURISDICTION  Wednesday  04/27/2016 12:00:00 AM   \n",
+       "...                                 ...        ...                     ...   \n",
+       "9995              HARASSING PHONE CALLS   Saturday  11/26/2016 12:00:00 AM   \n",
+       "9996          LOST/STOLEN LICENSE PLATE   Thursday  07/07/2016 12:00:00 AM   \n",
+       "9997       GRAND THEFT FROM LOCKED AUTO   Saturday  05/14/2016 12:00:00 AM   \n",
+       "9998                         AIDED CASE     Monday  02/01/2016 12:00:00 AM   \n",
+       "9999                            BATTERY     Friday  05/06/2016 12:00:00 AM   \n",
+       "\n",
+       "       Time PdDistrict      Resolution                    Address           X  \\\n",
+       "0     21:25    TARAVAL  ARREST, BOOKED    600 Block of LINCOLN WY -122.464850   \n",
+       "1     19:00    TARAVAL            NONE  SAN JOSE AV / LAKEVIEW AV -122.450378   \n",
+       "2     08:40  INGLESIDE            NONE       0 Block of PHELAN AV -122.452290   \n",
+       "3     16:12       PARK  ARREST, BOOKED     1100 Block of SCOTT ST -122.437099   \n",
+       "4     19:34   SOUTHERN  ARREST, BOOKED    600 Block of BRANNAN ST -122.399841   \n",
+       "...     ...        ...             ...                        ...         ...   \n",
+       "9995  12:00   SOUTHERN            NONE   1100 Block of MISSION ST -122.412834   \n",
+       "9996  19:00    BAYVIEW            NONE      100 Block of TEXAS ST -122.395812   \n",
+       "9997  03:30    CENTRAL            NONE        BAY ST / VANNESS AV -122.425111   \n",
+       "9998  15:23    TARAVAL  ARREST, BOOKED  2600 Block of SAN JOSE AV -122.450635   \n",
+       "9999  20:30    BAYVIEW            NONE   1300 Block of NEWHALL ST -122.391880   \n",
+       "\n",
+       "              Y                               Location            PdId  \n",
+       "0     37.765888  (37.7658875448653, -122.464850114297)  16052568905051  \n",
+       "1     37.716169  (37.7161694707734, -122.450378171697)  16033422006243  \n",
+       "2     37.725693  (37.7256933575703, -122.452289660492)  16074005306303  \n",
+       "3     37.780352   (37.7803522156893, -122.43709942832)  16061972163010  \n",
+       "4     37.775633  (37.7756327864282, -122.399841045579)  16034577262050  \n",
+       "...         ...                                    ...             ...  \n",
+       "9995  37.777790  (37.7777903094246, -122.412834332129)  17001330128135  \n",
+       "9996  37.764531  (37.7645312950153, -122.395812338479)  16057393971010  \n",
+       "9997  37.804146    (37.80414615262, -122.425110613231)  16611003806244  \n",
+       "9998  37.715772  (37.7157715048394, -122.450634805259)  16009394351040  \n",
+       "9999  37.735936  (37.7359364818345, -122.391879837176)  16037321204134  \n",
+       "\n",
+       "[10000 rows x 14 columns]"
+      ]
+     },
+     "execution_count": 1,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "import pandas as pd\n",
+    "from pathlib import Path\n",
+    "import solara\n",
+    "\n",
+    "ROOT = Path(solara.__file__).parent / \"website\" / \"pages\" / \"docs\" / \"content\" / \"04-tutorial\"\n",
+    "path = ROOT / Path(\"SF_crime_sample.csv.gz\")\n",
+    "url = \"https://github.com/widgetti/solara/raw/master/solara/website/pages/documentation/getting_started/content/04-tutorials/SF_crime_sample.csv.gz\"\n",
+    "\n",
+    "if path.exists():\n",
+    "    df_crime = pd.read_csv(path)\n",
+    "else:\n",
+    "    df_crime = pd.read_csv(url)\n",
+    "\n",
+    "df_crime"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "08a9644a",
+   "metadata": {},
+   "source": [
+    "The data looks clean, but since we will work with the `Category` and `PdDistrict` column data, let us convert those columns to title case."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 2,
+   "id": "f3373227",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "text/html": [
+       "<div>\n",
+       "<style scoped>\n",
+       "    .dataframe tbody tr th:only-of-type {\n",
+       "        vertical-align: middle;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe tbody tr th {\n",
+       "        vertical-align: top;\n",
+       "    }\n",
+       "\n",
+       "    .dataframe thead th {\n",
+       "        text-align: right;\n",
+       "    }\n",
+       "</style>\n",
+       "<table border=\"1\" class=\"dataframe\">\n",
+       "  <thead>\n",
+       "    <tr style=\"text-align: right;\">\n",
+       "      <th></th>\n",
+       "      <th>Unnamed: 0</th>\n",
+       "      <th>IncidntNum</th>\n",
+       "      <th>Category</th>\n",
+       "      <th>Descript</th>\n",
+       "      <th>DayOfWeek</th>\n",
+       "      <th>Date</th>\n",
+       "      <th>Time</th>\n",
+       "      <th>PdDistrict</th>\n",
+       "      <th>Resolution</th>\n",
+       "      <th>Address</th>\n",
+       "      <th>X</th>\n",
+       "      <th>Y</th>\n",
+       "      <th>Location</th>\n",
+       "      <th>PdId</th>\n",
+       "    </tr>\n",
+       "  </thead>\n",
+       "  <tbody>\n",
+       "    <tr>\n",
+       "      <th>0</th>\n",
+       "      <td>50820</td>\n",
+       "      <td>160525689</td>\n",
+       "      <td>Burglary</td>\n",
+       "      <td>BURGLARY OF STORE, FORCIBLE ENTRY</td>\n",
+       "      <td>Tuesday</td>\n",
+       "      <td>06/28/2016 12:00:00 AM</td>\n",
+       "      <td>21:25</td>\n",
+       "      <td>Taraval</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>600 Block of LINCOLN WY</td>\n",
+       "      <td>-122.464850</td>\n",
+       "      <td>37.765888</td>\n",
+       "      <td>(37.7658875448653, -122.464850114297)</td>\n",
+       "      <td>16052568905051</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>1</th>\n",
+       "      <td>11981</td>\n",
+       "      <td>160334220</td>\n",
+       "      <td>Larceny/Theft</td>\n",
+       "      <td>PETTY THEFT FROM LOCKED AUTO</td>\n",
+       "      <td>Friday</td>\n",
+       "      <td>04/22/2016 12:00:00 AM</td>\n",
+       "      <td>19:00</td>\n",
+       "      <td>Taraval</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>SAN JOSE AV / LAKEVIEW AV</td>\n",
+       "      <td>-122.450378</td>\n",
+       "      <td>37.716169</td>\n",
+       "      <td>(37.7161694707734, -122.450378171697)</td>\n",
+       "      <td>16033422006243</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>2</th>\n",
+       "      <td>74626</td>\n",
+       "      <td>160740053</td>\n",
+       "      <td>Larceny/Theft</td>\n",
+       "      <td>PETTY THEFT FROM A BUILDING</td>\n",
+       "      <td>Monday</td>\n",
+       "      <td>09/12/2016 12:00:00 AM</td>\n",
+       "      <td>08:40</td>\n",
+       "      <td>Ingleside</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>0 Block of PHELAN AV</td>\n",
+       "      <td>-122.452290</td>\n",
+       "      <td>37.725693</td>\n",
+       "      <td>(37.7256933575703, -122.452289660492)</td>\n",
+       "      <td>16074005306303</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>3</th>\n",
+       "      <td>60776</td>\n",
+       "      <td>160619721</td>\n",
+       "      <td>Warrants</td>\n",
+       "      <td>WARRANT ARREST</td>\n",
+       "      <td>Monday</td>\n",
+       "      <td>08/01/2016 12:00:00 AM</td>\n",
+       "      <td>16:12</td>\n",
+       "      <td>Park</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>1100 Block of SCOTT ST</td>\n",
+       "      <td>-122.437099</td>\n",
+       "      <td>37.780352</td>\n",
+       "      <td>(37.7803522156893, -122.43709942832)</td>\n",
+       "      <td>16061972163010</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>4</th>\n",
+       "      <td>34547</td>\n",
+       "      <td>160345772</td>\n",
+       "      <td>Warrants</td>\n",
+       "      <td>ENROUTE TO OUTSIDE JURISDICTION</td>\n",
+       "      <td>Wednesday</td>\n",
+       "      <td>04/27/2016 12:00:00 AM</td>\n",
+       "      <td>19:34</td>\n",
+       "      <td>Southern</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>600 Block of BRANNAN ST</td>\n",
+       "      <td>-122.399841</td>\n",
+       "      <td>37.775633</td>\n",
+       "      <td>(37.7756327864282, -122.399841045579)</td>\n",
+       "      <td>16034577262050</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>...</th>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "      <td>...</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9995</th>\n",
+       "      <td>137465</td>\n",
+       "      <td>170013301</td>\n",
+       "      <td>Other Offenses</td>\n",
+       "      <td>HARASSING PHONE CALLS</td>\n",
+       "      <td>Saturday</td>\n",
+       "      <td>11/26/2016 12:00:00 AM</td>\n",
+       "      <td>12:00</td>\n",
+       "      <td>Southern</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>1100 Block of MISSION ST</td>\n",
+       "      <td>-122.412834</td>\n",
+       "      <td>37.777790</td>\n",
+       "      <td>(37.7777903094246, -122.412834332129)</td>\n",
+       "      <td>17001330128135</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9996</th>\n",
+       "      <td>55811</td>\n",
+       "      <td>160573939</td>\n",
+       "      <td>Other Offenses</td>\n",
+       "      <td>LOST/STOLEN LICENSE PLATE</td>\n",
+       "      <td>Thursday</td>\n",
+       "      <td>07/07/2016 12:00:00 AM</td>\n",
+       "      <td>19:00</td>\n",
+       "      <td>Bayview</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>100 Block of TEXAS ST</td>\n",
+       "      <td>-122.395812</td>\n",
+       "      <td>37.764531</td>\n",
+       "      <td>(37.7645312950153, -122.395812338479)</td>\n",
+       "      <td>16057393971010</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9997</th>\n",
+       "      <td>120115</td>\n",
+       "      <td>166110038</td>\n",
+       "      <td>Larceny/Theft</td>\n",
+       "      <td>GRAND THEFT FROM LOCKED AUTO</td>\n",
+       "      <td>Saturday</td>\n",
+       "      <td>05/14/2016 12:00:00 AM</td>\n",
+       "      <td>03:30</td>\n",
+       "      <td>Central</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>BAY ST / VANNESS AV</td>\n",
+       "      <td>-122.425111</td>\n",
+       "      <td>37.804146</td>\n",
+       "      <td>(37.80414615262, -122.425110613231)</td>\n",
+       "      <td>16611003806244</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9998</th>\n",
+       "      <td>5069</td>\n",
+       "      <td>160093943</td>\n",
+       "      <td>Non-Criminal</td>\n",
+       "      <td>AIDED CASE</td>\n",
+       "      <td>Monday</td>\n",
+       "      <td>02/01/2016 12:00:00 AM</td>\n",
+       "      <td>15:23</td>\n",
+       "      <td>Taraval</td>\n",
+       "      <td>ARREST, BOOKED</td>\n",
+       "      <td>2600 Block of SAN JOSE AV</td>\n",
+       "      <td>-122.450635</td>\n",
+       "      <td>37.715772</td>\n",
+       "      <td>(37.7157715048394, -122.450634805259)</td>\n",
+       "      <td>16009394351040</td>\n",
+       "    </tr>\n",
+       "    <tr>\n",
+       "      <th>9999</th>\n",
+       "      <td>35667</td>\n",
+       "      <td>160373212</td>\n",
+       "      <td>Assault</td>\n",
+       "      <td>BATTERY</td>\n",
+       "      <td>Friday</td>\n",
+       "      <td>05/06/2016 12:00:00 AM</td>\n",
+       "      <td>20:30</td>\n",
+       "      <td>Bayview</td>\n",
+       "      <td>NONE</td>\n",
+       "      <td>1300 Block of NEWHALL ST</td>\n",
+       "      <td>-122.391880</td>\n",
+       "      <td>37.735936</td>\n",
+       "      <td>(37.7359364818345, -122.391879837176)</td>\n",
+       "      <td>16037321204134</td>\n",
+       "    </tr>\n",
+       "  </tbody>\n",
+       "</table>\n",
+       "<p>10000 rows × 14 columns</p>\n",
+       "</div>"
+      ],
+      "text/plain": [
+       "      Unnamed: 0  IncidntNum        Category  \\\n",
+       "0          50820   160525689        Burglary   \n",
+       "1          11981   160334220   Larceny/Theft   \n",
+       "2          74626   160740053   Larceny/Theft   \n",
+       "3          60776   160619721        Warrants   \n",
+       "4          34547   160345772        Warrants   \n",
+       "...          ...         ...             ...   \n",
+       "9995      137465   170013301  Other Offenses   \n",
+       "9996       55811   160573939  Other Offenses   \n",
+       "9997      120115   166110038   Larceny/Theft   \n",
+       "9998        5069   160093943    Non-Criminal   \n",
+       "9999       35667   160373212         Assault   \n",
+       "\n",
+       "                               Descript  DayOfWeek                    Date  \\\n",
+       "0     BURGLARY OF STORE, FORCIBLE ENTRY    Tuesday  06/28/2016 12:00:00 AM   \n",
+       "1          PETTY THEFT FROM LOCKED AUTO     Friday  04/22/2016 12:00:00 AM   \n",
+       "2           PETTY THEFT FROM A BUILDING     Monday  09/12/2016 12:00:00 AM   \n",
+       "3                        WARRANT ARREST     Monday  08/01/2016 12:00:00 AM   \n",
+       "4       ENROUTE TO OUTSIDE JURISDICTION  Wednesday  04/27/2016 12:00:00 AM   \n",
+       "...                                 ...        ...                     ...   \n",
+       "9995              HARASSING PHONE CALLS   Saturday  11/26/2016 12:00:00 AM   \n",
+       "9996          LOST/STOLEN LICENSE PLATE   Thursday  07/07/2016 12:00:00 AM   \n",
+       "9997       GRAND THEFT FROM LOCKED AUTO   Saturday  05/14/2016 12:00:00 AM   \n",
+       "9998                         AIDED CASE     Monday  02/01/2016 12:00:00 AM   \n",
+       "9999                            BATTERY     Friday  05/06/2016 12:00:00 AM   \n",
+       "\n",
+       "       Time PdDistrict      Resolution                    Address           X  \\\n",
+       "0     21:25    Taraval  ARREST, BOOKED    600 Block of LINCOLN WY -122.464850   \n",
+       "1     19:00    Taraval            NONE  SAN JOSE AV / LAKEVIEW AV -122.450378   \n",
+       "2     08:40  Ingleside            NONE       0 Block of PHELAN AV -122.452290   \n",
+       "3     16:12       Park  ARREST, BOOKED     1100 Block of SCOTT ST -122.437099   \n",
+       "4     19:34   Southern  ARREST, BOOKED    600 Block of BRANNAN ST -122.399841   \n",
+       "...     ...        ...             ...                        ...         ...   \n",
+       "9995  12:00   Southern            NONE   1100 Block of MISSION ST -122.412834   \n",
+       "9996  19:00    Bayview            NONE      100 Block of TEXAS ST -122.395812   \n",
+       "9997  03:30    Central            NONE        BAY ST / VANNESS AV -122.425111   \n",
+       "9998  15:23    Taraval  ARREST, BOOKED  2600 Block of SAN JOSE AV -122.450635   \n",
+       "9999  20:30    Bayview            NONE   1300 Block of NEWHALL ST -122.391880   \n",
+       "\n",
+       "              Y                               Location            PdId  \n",
+       "0     37.765888  (37.7658875448653, -122.464850114297)  16052568905051  \n",
+       "1     37.716169  (37.7161694707734, -122.450378171697)  16033422006243  \n",
+       "2     37.725693  (37.7256933575703, -122.452289660492)  16074005306303  \n",
+       "3     37.780352   (37.7803522156893, -122.43709942832)  16061972163010  \n",
+       "4     37.775633  (37.7756327864282, -122.399841045579)  16034577262050  \n",
+       "...         ...                                    ...             ...  \n",
+       "9995  37.777790  (37.7777903094246, -122.412834332129)  17001330128135  \n",
+       "9996  37.764531  (37.7645312950153, -122.395812338479)  16057393971010  \n",
+       "9997  37.804146    (37.80414615262, -122.425110613231)  16611003806244  \n",
+       "9998  37.715772  (37.7157715048394, -122.450634805259)  16009394351040  \n",
+       "9999  37.735936  (37.7359364818345, -122.391879837176)  16037321204134  \n",
+       "\n",
+       "[10000 rows x 14 columns]"
+      ]
+     },
+     "execution_count": 2,
+     "metadata": {},
+     "output_type": "execute_result"
+    }
+   ],
+   "source": [
+    "df_crime[\"Category\"] = df_crime[\"Category\"].str.title()\n",
+    "df_crime[\"PdDistrict\"] = df_crime[\"PdDistrict\"].str.title()\n",
+    "df_crime"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "62df988f",
+   "metadata": {},
+   "source": [
+    "Using proper software engineering practices, we write a function that filters a dataframe to contain only the rows that match our chosen districts and categories."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "a7d17a84",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "def crime_filter(df, district_values, category_values):\n",
+    "    df_dist = df.loc[df[\"PdDistrict\"].isin(district_values)]\n",
+    "    df_category = df_dist.loc[df_dist[\"Category\"].isin(category_values)]\n",
+    "    return df_category\n",
+    "\n",
+    "\n",
+    "dff_crime = crime_filter(df_crime, [\"Bayview\", \"Northern\"], [\"Vandalism\", \"Assault\", \"Robbery\"])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "b0e37cb4",
+   "metadata": {},
+   "source": [
+    "Now, with our filtered dataset, we create two bar charts. We use regular Pandas and Matplotlib, but Seaborn or Plotly would also be appropriate choices."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "id": "3254c59d",
+   "metadata": {},
+   "outputs": [
+    {
+     "data": {
+      "image/png": "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",
+      "text/plain": [
+       "<Figure size 1440x720 with 2 Axes>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "import matplotlib.pyplot as plt\n",
+    "\n",
+    "\n",
+    "def crime_charts(df):\n",
+    "    cat_unique = df[\"Category\"].value_counts()\n",
+    "    cat_unique = cat_unique.reset_index()\n",
+    "\n",
+    "    dist_unique = df[\"PdDistrict\"].value_counts()\n",
+    "    dist_unique = dist_unique.reset_index()\n",
+    "\n",
+    "    fig, (ax1, ax2) = plt.subplots(1, 2, figsize=(20, 10))\n",
+    "\n",
+    "    ax1.bar(cat_unique[\"Category\"], cat_unique[\"count\"])\n",
+    "    ax1.set_title(\"Amount of Criminal Case Based on Category\")\n",
+    "    ax2.bar(dist_unique[\"PdDistrict\"], dist_unique[\"count\"])\n",
+    "    ax2.set_title(\"Amount of Criminal Case in Selected District\")\n",
+    "\n",
+    "    display(fig)\n",
+    "    plt.close(fig)\n",
+    "\n",
+    "\n",
+    "crime_charts(dff_crime)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0e71ff2f",
+   "metadata": {},
+   "source": [
+    "Since we do not need bidirectional communication (e.g., we do not need to receive events or data from our map), we use Folium to display the locations of the committed crimes on a map. If we do need bidirectional communication, we can also decide to use [ipyleaflet](https://ipyleaflet.readthedocs.io/).\n",
+    "\n",
+    "Since we cannot display all the data on the map without crashing your browser, we limit it to a maximum of 50 points."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "82f1d2f7",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import folium\n",
+    "import folium.plugins\n",
+    "\n",
+    "\n",
+    "def crime_map(df):\n",
+    "    latitude = 37.77\n",
+    "    longitude = -122.42\n",
+    "\n",
+    "    sanfran_map = folium.Map(location=[latitude, longitude], zoom_start=12)\n",
+    "\n",
+    "    incidents = folium.plugins.MarkerCluster().add_to(sanfran_map)\n",
+    "\n",
+    "    # loop through the dataframe and add each data point to the mark cluster\n",
+    "    for (\n",
+    "        lat,\n",
+    "        lng,\n",
+    "        label,\n",
+    "    ) in zip(df.Y, df.X, df.Category):\n",
+    "        folium.Marker(\n",
+    "            location=[lat, lng],\n",
+    "            icon=None,\n",
+    "            popup=label,\n",
+    "        ).add_to(incidents)\n",
+    "\n",
+    "    # show map\n",
+    "    display(sanfran_map)\n",
+    "\n",
+    "\n",
+    "crime_map(dff_crime.iloc[0:50, :])"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "b74914fd",
+   "metadata": {},
+   "source": [
+    "## Making our first reactive visualization\n",
+    "\n",
+    "The above code works nicely, but if we want to explore different types of crimes, we need to modify and run all cells that determine our output manually. Would it not be much better to have a UI with controls determining the filtering and a view displaying the filtered data interactively?\n",
+    "\n",
+    "Let's start by importing the solara package and creating three reactive variables."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "3e7ea361",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import solara\n",
+    "\n",
+    "districts = solara.reactive([\"Bayview\", \"Northern\"])\n",
+    "categories = solara.reactive([\"Vandalism\", \"Assault\", \"Robbery\"])\n",
+    "limit = solara.reactive(100)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "28622c20",
+   "metadata": {},
+   "source": [
+    "A reactive variable is a container around a value (like an int, string, or list) that allows the UI to listen to changes automatically. Any change to your_reactive_variable.value will be picked up by Solara components that use them so that they can automatically redraw or update themselves.\n",
+    "\n",
+    "Let us now create our first component (View), which filters the data based on the reactive variables and shows the map and the charts. Solara supports the display mechanism of Jupyter so that we can use our previously defined functions."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "56055643",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "@solara.component\n",
+    "def View():\n",
+    "    dff = crime_filter(df_crime, districts.value, categories.value)\n",
+    "    row_count = len(dff)\n",
+    "    if row_count > limit.value:\n",
+    "        solara.Warning(f\"Only showing the first {limit.value} of {row_count:,} crimes on map\")\n",
+    "    crime_map(dff.iloc[: limit.value])\n",
+    "    if row_count > 0:\n",
+    "        crime_charts(dff)\n",
+    "    else:\n",
+    "        solara.Warning(\"You filtered out all the data, no charts shown\")\n",
+    "\n",
+    "\n",
+    "View()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0b05c1db",
+   "metadata": {},
+   "source": [
+    "Note that some UI parts (like the warning and the charts) are conditional. Solara will automatically find out what to add, remove, or update without you having to do this manually. Solara is declarative (similar to ReactJS) but also reactive. If we change the reactive variables, Solara will see those changes and notify the component instances that use its value.\n",
+    "\n",
+    "If we run the next lines of code in our notebook, our View will automatically update."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "fef5d187",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "limit.value = 70\n",
+    "districts.value = [\"Soutern\", \"Northern\"]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "8822d100",
+   "metadata": {},
+   "source": [
+    "We can now explore our data much faster since we don't need to re-run the cells that depend on it.\n",
+    "\n",
+    "Solara's reactive and declarative nature makes it scalable to much larger applications than regular ipywidgets, where keeping the UI in sync and adding, removing, and updating widgets is a manual and bug-prone process."
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "917a1501",
+   "metadata": {},
+   "source": [
+    "## Adding controls\n",
+    "\n",
+    "We created a declarative and reactive mini app in our notebook, but we still need to manually modify the values by executing a code cell in our Notebook. Now, let us create a UI to control it. All Solara input components support reactive variables. This means that controlling a reactive variable using a UI element is often a one-liner."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "c78010ec",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "solara.SelectMultiple(\"District\", all_values=[str(k) for k in df_crime[\"PdDistrict\"].unique().tolist()], values=districts)"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "74484e0c",
+   "metadata": {},
+   "source": [
+    "Whow, that was simple! We can now easily change the filter and see the results update. Lets do this for all our reactive variables, and put them into a single component."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "18290364",
+   "metadata": {
+    "scrolled": true
+   },
+   "outputs": [],
+   "source": [
+    "@solara.component\n",
+    "def Controls():\n",
+    "    solara.SelectMultiple(\"District\", all_values=[str(k) for k in df_crime[\"PdDistrict\"].unique().tolist()], values=districts)\n",
+    "    solara.SelectMultiple(\"Category\", all_values=[str(k) for k in df_crime[\"Category\"].unique().tolist()], values=categories)\n",
+    "    solara.Text(\"Maximum number of rows to show on map\")\n",
+    "    solara.SliderInt(\"\", value=limit, min=1, max=1000)\n",
+    "\n",
+    "\n",
+    "Controls()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "0c1ac606",
+   "metadata": {},
+   "source": [
+    "Note that the reactive variables are bi-directional, meaning that if you change it in the UI elements, it gets reflected on the Python code!"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "0ca68fe8",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "# Note that we can read AND write reactive variables\n",
+    "categories.value = [*categories.value, \"Warrants\"]"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "5af8e2b8",
+   "metadata": {},
+   "source": [
+    "## The final dashboard\n",
+    "\n",
+    "We now have two parts of our UI in separate cells. This can be an amazing experience when developing in a notebook, as it flows naturally in the data exploration process while writing your notebook.\n",
+    "\n",
+    "However, your end user will probably want something more coherent. The components we created are perfectly reusable, so we put them together in a single UI."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "af686391",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "@solara.component\n",
+    "def Page():\n",
+    "    with solara.Sidebar():\n",
+    "        Controls()\n",
+    "    View()\n",
+    "\n",
+    "\n",
+    "Page()"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "id": "e07fd010",
+   "metadata": {},
+   "source": [
+    "## Conclusions\n",
+    "\n",
+    "Using Solara, you created an interactive dashboard within a Jupyter notebook. Your Solara components are declarative, and when using reactive variables also reactive. Whether you change a reactive variables via code or the UI elements, your visualizations and map update automatically.\n",
+    "\n",
+    "Your dashboard prototype now runs in your Jupyter notebook environment, but we still have a few steps to we want to take. In our next tutorial, we will focus on deploying our notebook, without making any code changes. In our third tutorial we will expand our dashboard with a few more components and focus on creating a more advanced layout.\n",
+    "\n",
+    "\n",
+    "\n"
+   ]
+  }
+ ],
+ "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.16"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}