docs/f-23c/aes_size_color_variadic_lines.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "8717e97a",
   "metadata": {},
   "source": [
    "# Variadic lines in `geom_path()` and `geom_line()`\n",
    "\n",
    "Using `size` and `color` aesthetics in the  mapping of `geom_path` or `geom_line`\\\n",
    "may lead to variadic width or/and color of lines, depending on the data."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "0dbb2085",
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "\n",
    "from lets_plot import *\n",
    "from lets_plot.mapping import as_discrete"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "id": "951f6609",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "\n",
       "            <div id=\"4fzbWt\"></div>\n",
       "            <script type=\"text/javascript\" data-lets-plot-script=\"library\">\n",
       "                if(!window.letsPlotCallQueue) {\n",
       "                    window.letsPlotCallQueue = [];\n",
       "                }; \n",
       "                window.letsPlotCall = function(f) {\n",
       "                    window.letsPlotCallQueue.push(f);\n",
       "                };\n",
       "                (function() {\n",
       "                    var script = document.createElement(\"script\");\n",
       "                    script.type = \"text/javascript\";\n",
       "                    script.src = \"https://cdn.jsdelivr.net/gh/JetBrains/lets-plot@v4.0.0/js-package/distr/lets-plot.min.js\";\n",
       "                    script.onload = function() {\n",
       "                        window.letsPlotCall = function(f) {f();};\n",
       "                        window.letsPlotCallQueue.forEach(function(f) {f();});\n",
       "                        window.letsPlotCallQueue = [];\n",
       "                        \n",
       "                    };\n",
       "                    script.onerror = function(event) {\n",
       "                        window.letsPlotCall = function(f) {};    // noop\n",
       "                        window.letsPlotCallQueue = [];\n",
       "                        var div = document.createElement(\"div\");\n",
       "                        div.style.color = 'darkred';\n",
       "                        div.textContent = 'Error loading Lets-Plot JS';\n",
       "                        document.getElementById(\"4fzbWt\").appendChild(div);\n",
       "                    };\n",
       "                    var e = document.getElementById(\"4fzbWt\");\n",
       "                    e.appendChild(script);\n",
       "                })()\n",
       "            </script>\n",
       "            "
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "LetsPlot.setup_html()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "b2d14ae4",
   "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>Ozone</th>\n",
       "      <th>Solar.R</th>\n",
       "      <th>Wind</th>\n",
       "      <th>Temp</th>\n",
       "      <th>Month</th>\n",
       "      <th>Day</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>1</td>\n",
       "      <td>41.0</td>\n",
       "      <td>190.0</td>\n",
       "      <td>7.4</td>\n",
       "      <td>67</td>\n",
       "      <td>5</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>2</td>\n",
       "      <td>36.0</td>\n",
       "      <td>118.0</td>\n",
       "      <td>8.0</td>\n",
       "      <td>72</td>\n",
       "      <td>5</td>\n",
       "      <td>2</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>3</td>\n",
       "      <td>12.0</td>\n",
       "      <td>149.0</td>\n",
       "      <td>12.6</td>\n",
       "      <td>74</td>\n",
       "      <td>5</td>\n",
       "      <td>3</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>4</td>\n",
       "      <td>18.0</td>\n",
       "      <td>313.0</td>\n",
       "      <td>11.5</td>\n",
       "      <td>62</td>\n",
       "      <td>5</td>\n",
       "      <td>4</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>5</td>\n",
       "      <td>NaN</td>\n",
       "      <td>NaN</td>\n",
       "      <td>14.3</td>\n",
       "      <td>56</td>\n",
       "      <td>5</td>\n",
       "      <td>5</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   Unnamed: 0  Ozone  Solar.R  Wind  Temp  Month  Day\n",
       "0           1   41.0    190.0   7.4    67      5    1\n",
       "1           2   36.0    118.0   8.0    72      5    2\n",
       "2           3   12.0    149.0  12.6    74      5    3\n",
       "3           4   18.0    313.0  11.5    62      5    4\n",
       "4           5    NaN      NaN  14.3    56      5    5"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "airquality = pd.read_csv(\"https://raw.githubusercontent.com/vincentarelbundock/Rdatasets/master/csv/datasets/airquality.csv\")\n",
    "airquality.head()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "32a850f2",
   "metadata": {},
   "source": [
    "#### 1. Variable Line Width"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "1abc12ec",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "   <div id=\"5Dn8OP\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "       (function() {\n",
       "           var plotSpec={\n",
       "\"data\":{\n",
       "\"Wind\":[7.4,8.0,12.6,11.5,14.3,14.9,8.6,13.8,20.1,8.6,6.9,9.7,9.2,10.9,13.2,11.5,12.0,18.4,11.5,9.7,9.7,16.6,9.7,12.0,16.6,14.9,8.0,12.0,14.9,5.7,7.4,8.6,9.7,16.1,9.2,8.6,14.3,9.7,6.9,13.8,11.5,10.9,9.2,8.0,13.8,11.5,14.9,20.7,9.2,11.5,10.3,6.3,1.7,4.6,6.3,8.0,8.0,10.3,11.5,14.9,8.0,4.1,9.2,9.2,10.9,4.6,10.9,5.1,6.3,5.7,7.4,8.6,14.3,14.9,14.9,14.3,6.9,10.3,6.3,5.1,11.5,6.9,9.7,11.5,8.6,8.0,8.6,12.0,7.4,7.4,7.4,9.2,6.9,13.8,7.4,6.9,7.4,4.6,4.0,10.3,8.0,8.6,11.5,11.5,11.5,9.7,11.5,10.3,6.3,7.4,10.9,10.3,15.5,14.3,12.6,9.7,3.4,8.0,5.7,9.7,2.3,6.3,6.3,6.9,5.1,2.8,4.6,7.4,15.5,10.9,10.3,10.9,9.7,14.9,15.5,6.3,10.9,11.5,6.9,13.8,10.3,10.3,8.0,12.6,9.2,10.3,10.3,16.6,6.9,13.2,14.3,8.0,11.5],\n",
       "\"Temp\":[67.0,72.0,74.0,62.0,56.0,66.0,65.0,59.0,61.0,69.0,74.0,69.0,66.0,68.0,58.0,64.0,66.0,57.0,68.0,62.0,59.0,73.0,61.0,61.0,57.0,58.0,57.0,67.0,81.0,79.0,76.0,78.0,74.0,67.0,84.0,85.0,79.0,82.0,87.0,90.0,87.0,93.0,92.0,82.0,80.0,79.0,77.0,72.0,65.0,73.0,76.0,77.0,76.0,76.0,76.0,75.0,78.0,73.0,80.0,77.0,83.0,84.0,85.0,81.0,84.0,83.0,83.0,88.0,92.0,92.0,89.0,82.0,73.0,81.0,91.0,80.0,81.0,82.0,84.0,87.0,85.0,74.0,81.0,82.0,86.0,85.0,82.0,86.0,88.0,86.0,83.0,81.0,81.0,81.0,82.0,86.0,85.0,87.0,89.0,90.0,90.0,92.0,86.0,86.0,82.0,80.0,79.0,77.0,79.0,76.0,78.0,78.0,77.0,72.0,75.0,79.0,81.0,86.0,88.0,97.0,94.0,96.0,94.0,91.0,92.0,93.0,93.0,87.0,84.0,80.0,78.0,75.0,73.0,81.0,76.0,77.0,71.0,71.0,78.0,67.0,76.0,68.0,82.0,64.0,71.0,81.0,69.0,63.0,70.0,77.0,75.0,76.0,68.0],\n",
       "\"Month\":[5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0],\n",
       "\"Day\":[1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0]\n",
       "},\n",
       "\"mapping\":{\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":700.0,\n",
       "\"height\":500.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[{\n",
       "\"aesthetic\":\"size\",\n",
       "\"range\":[0.5,5.0]\n",
       "}],\n",
       "\"layers\":[{\n",
       "\"geom\":\"line\",\n",
       "\"mapping\":{\n",
       "\"x\":\"Day\",\n",
       "\"y\":\"Temp\",\n",
       "\"size\":\"Wind\",\n",
       "\"color\":\"Month\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "\"mapping_annotations\":[{\n",
       "\"aes\":\"color\",\n",
       "\"annotation\":\"as_discrete\",\n",
       "\"parameters\":{\n",
       "\"label\":\"Month\"\n",
       "}\n",
       "}]\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"metainfo_list\":[]\n",
       "};\n",
       "           var plotContainer = document.getElementById(\"5Dn8OP\");\n",
       "           window.letsPlotCall(function() {{\n",
       "               LetsPlot.buildPlotFromProcessedSpecs(plotSpec, -1, -1, plotContainer);\n",
       "           }});\n",
       "       })();    \n",
       "   </script>"
      ],
      "text/plain": [
       "<lets_plot.plot.core.PlotSpec at 0x157ed9030>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "ggplot(airquality) \\\n",
    "    + geom_line(\n",
    "        aes(\n",
    "            x = 'Day', \n",
    "            y = 'Temp', \n",
    "            size = 'Wind', # <--- wind varies by day\n",
    "            color = as_discrete('Month')\n",
    "        )\n",
    "    ) \\\n",
    "    + scale_size([0.5, 5.0]) \\\n",
    "    + ggsize(700, 500)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "8152607b",
   "metadata": {},
   "source": [
    "#### 2. Variable Line Color"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "id": "6d2b791b",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "   <div id=\"o3CiGQ\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "       (function() {\n",
       "           var plotSpec={\n",
       "\"data\":{\n",
       "\"Wind\":[7.4,8.0,12.6,11.5,14.3,14.9,8.6,13.8,20.1,8.6,6.9,9.7,9.2,10.9,13.2,11.5,12.0,18.4,11.5,9.7,9.7,16.6,9.7,12.0,16.6,14.9,8.0,12.0,14.9,5.7,7.4,8.6,9.7,16.1,9.2,8.6,14.3,9.7,6.9,13.8,11.5,10.9,9.2,8.0,13.8,11.5,14.9,20.7,9.2,11.5,10.3,6.3,1.7,4.6,6.3,8.0,8.0,10.3,11.5,14.9,8.0,4.1,9.2,9.2,10.9,4.6,10.9,5.1,6.3,5.7,7.4,8.6,14.3,14.9,14.9,14.3,6.9,10.3,6.3,5.1,11.5,6.9,9.7,11.5,8.6,8.0,8.6,12.0,7.4,7.4,7.4,9.2,6.9,13.8,7.4,6.9,7.4,4.6,4.0,10.3,8.0,8.6,11.5,11.5,11.5,9.7,11.5,10.3,6.3,7.4,10.9,10.3,15.5,14.3,12.6,9.7,3.4,8.0,5.7,9.7,2.3,6.3,6.3,6.9,5.1,2.8,4.6,7.4,15.5,10.9,10.3,10.9,9.7,14.9,15.5,6.3,10.9,11.5,6.9,13.8,10.3,10.3,8.0,12.6,9.2,10.3,10.3,16.6,6.9,13.2,14.3,8.0,11.5],\n",
       "\"Temp\":[67.0,72.0,74.0,62.0,56.0,66.0,65.0,59.0,61.0,69.0,74.0,69.0,66.0,68.0,58.0,64.0,66.0,57.0,68.0,62.0,59.0,73.0,61.0,61.0,57.0,58.0,57.0,67.0,81.0,79.0,76.0,78.0,74.0,67.0,84.0,85.0,79.0,82.0,87.0,90.0,87.0,93.0,92.0,82.0,80.0,79.0,77.0,72.0,65.0,73.0,76.0,77.0,76.0,76.0,76.0,75.0,78.0,73.0,80.0,77.0,83.0,84.0,85.0,81.0,84.0,83.0,83.0,88.0,92.0,92.0,89.0,82.0,73.0,81.0,91.0,80.0,81.0,82.0,84.0,87.0,85.0,74.0,81.0,82.0,86.0,85.0,82.0,86.0,88.0,86.0,83.0,81.0,81.0,81.0,82.0,86.0,85.0,87.0,89.0,90.0,90.0,92.0,86.0,86.0,82.0,80.0,79.0,77.0,79.0,76.0,78.0,78.0,77.0,72.0,75.0,79.0,81.0,86.0,88.0,97.0,94.0,96.0,94.0,91.0,92.0,93.0,93.0,87.0,84.0,80.0,78.0,75.0,73.0,81.0,76.0,77.0,71.0,71.0,78.0,67.0,76.0,68.0,82.0,64.0,71.0,81.0,69.0,63.0,70.0,77.0,75.0,76.0,68.0],\n",
       "\"Month\":[5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0],\n",
       "\"Day\":[1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0]\n",
       "},\n",
       "\"mapping\":{\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":700.0,\n",
       "\"height\":500.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[{\n",
       "\"aesthetic\":\"color\",\n",
       "\"low\":\"#1a9641\",\n",
       "\"high\":\"#d7191c\",\n",
       "\"scale_mapper_kind\":\"color_gradient\"\n",
       "}],\n",
       "\"layers\":[{\n",
       "\"geom\":\"line\",\n",
       "\"mapping\":{\n",
       "\"x\":\"Day\",\n",
       "\"y\":\"Temp\",\n",
       "\"color\":\"Wind\",\n",
       "\"group\":\"Month\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"size\":2.0,\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"metainfo_list\":[]\n",
       "};\n",
       "           var plotContainer = document.getElementById(\"o3CiGQ\");\n",
       "           window.letsPlotCall(function() {{\n",
       "               LetsPlot.buildPlotFromProcessedSpecs(plotSpec, -1, -1, plotContainer);\n",
       "           }});\n",
       "       })();    \n",
       "   </script>"
      ],
      "text/plain": [
       "<lets_plot.plot.core.PlotSpec at 0x1688353f0>"
      ]
     },
     "execution_count": 5,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "ggplot(airquality) \\\n",
    "    + geom_line(\n",
    "        aes(\n",
    "            x = 'Day', \n",
    "            y = 'Temp', \n",
    "            color = 'Wind', # <--- wind varies by day\n",
    "            group = 'Month'\n",
    "        ), \n",
    "        size=2\n",
    "    ) \\\n",
    "    + scale_color_gradient(low='#1a9641', high='#d7191c') \\\n",
    "    + ggsize(700, 500)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e129d141",
   "metadata": {},
   "source": [
    "#### 3. Variable both, Line Color and Width"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "id": "adfc369f",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "   <div id=\"7Nm73f\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "       (function() {\n",
       "           var plotSpec={\n",
       "\"data\":{\n",
       "\"Ozone\":[41.0,36.0,12.0,18.0,null,28.0,23.0,19.0,8.0,null,7.0,16.0,11.0,14.0,18.0,14.0,34.0,6.0,30.0,11.0,1.0,11.0,4.0,32.0,null,null,null,23.0,45.0,115.0,37.0,null,null,null,null,null,null,29.0,null,71.0,39.0,null,null,23.0,null,null,21.0,37.0,20.0,12.0,13.0,null,null,null,null,null,null,null,null,null,null,135.0,49.0,32.0,null,64.0,40.0,77.0,97.0,97.0,85.0,null,10.0,27.0,null,7.0,48.0,35.0,61.0,79.0,63.0,16.0,null,null,80.0,108.0,20.0,52.0,82.0,50.0,64.0,59.0,39.0,9.0,16.0,78.0,35.0,66.0,122.0,89.0,110.0,null,null,44.0,28.0,65.0,null,22.0,59.0,23.0,31.0,44.0,21.0,9.0,null,45.0,168.0,73.0,null,76.0,118.0,84.0,85.0,96.0,78.0,73.0,91.0,47.0,32.0,20.0,23.0,21.0,24.0,44.0,21.0,28.0,9.0,13.0,46.0,18.0,13.0,24.0,16.0,13.0,23.0,36.0,7.0,14.0,30.0,null,14.0,18.0,20.0],\n",
       "\"Wind\":[7.4,8.0,12.6,11.5,14.3,14.9,8.6,13.8,20.1,8.6,6.9,9.7,9.2,10.9,13.2,11.5,12.0,18.4,11.5,9.7,9.7,16.6,9.7,12.0,16.6,14.9,8.0,12.0,14.9,5.7,7.4,8.6,9.7,16.1,9.2,8.6,14.3,9.7,6.9,13.8,11.5,10.9,9.2,8.0,13.8,11.5,14.9,20.7,9.2,11.5,10.3,6.3,1.7,4.6,6.3,8.0,8.0,10.3,11.5,14.9,8.0,4.1,9.2,9.2,10.9,4.6,10.9,5.1,6.3,5.7,7.4,8.6,14.3,14.9,14.9,14.3,6.9,10.3,6.3,5.1,11.5,6.9,9.7,11.5,8.6,8.0,8.6,12.0,7.4,7.4,7.4,9.2,6.9,13.8,7.4,6.9,7.4,4.6,4.0,10.3,8.0,8.6,11.5,11.5,11.5,9.7,11.5,10.3,6.3,7.4,10.9,10.3,15.5,14.3,12.6,9.7,3.4,8.0,5.7,9.7,2.3,6.3,6.3,6.9,5.1,2.8,4.6,7.4,15.5,10.9,10.3,10.9,9.7,14.9,15.5,6.3,10.9,11.5,6.9,13.8,10.3,10.3,8.0,12.6,9.2,10.3,10.3,16.6,6.9,13.2,14.3,8.0,11.5],\n",
       "\"Temp\":[67.0,72.0,74.0,62.0,56.0,66.0,65.0,59.0,61.0,69.0,74.0,69.0,66.0,68.0,58.0,64.0,66.0,57.0,68.0,62.0,59.0,73.0,61.0,61.0,57.0,58.0,57.0,67.0,81.0,79.0,76.0,78.0,74.0,67.0,84.0,85.0,79.0,82.0,87.0,90.0,87.0,93.0,92.0,82.0,80.0,79.0,77.0,72.0,65.0,73.0,76.0,77.0,76.0,76.0,76.0,75.0,78.0,73.0,80.0,77.0,83.0,84.0,85.0,81.0,84.0,83.0,83.0,88.0,92.0,92.0,89.0,82.0,73.0,81.0,91.0,80.0,81.0,82.0,84.0,87.0,85.0,74.0,81.0,82.0,86.0,85.0,82.0,86.0,88.0,86.0,83.0,81.0,81.0,81.0,82.0,86.0,85.0,87.0,89.0,90.0,90.0,92.0,86.0,86.0,82.0,80.0,79.0,77.0,79.0,76.0,78.0,78.0,77.0,72.0,75.0,79.0,81.0,86.0,88.0,97.0,94.0,96.0,94.0,91.0,92.0,93.0,93.0,87.0,84.0,80.0,78.0,75.0,73.0,81.0,76.0,77.0,71.0,71.0,78.0,67.0,76.0,68.0,82.0,64.0,71.0,81.0,69.0,63.0,70.0,77.0,75.0,76.0,68.0],\n",
       "\"Month\":[5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,5.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,6.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,7.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,8.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0,9.0],\n",
       "\"Day\":[1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0,31.0,1.0,2.0,3.0,4.0,5.0,6.0,7.0,8.0,9.0,10.0,11.0,12.0,13.0,14.0,15.0,16.0,17.0,18.0,19.0,20.0,21.0,22.0,23.0,24.0,25.0,26.0,27.0,28.0,29.0,30.0]\n",
       "},\n",
       "\"mapping\":{\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"ggsize\":{\n",
       "\"width\":700.0,\n",
       "\"height\":500.0\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[{\n",
       "\"aesthetic\":\"size\",\n",
       "\"range\":[0.5,5.0]\n",
       "},{\n",
       "\"aesthetic\":\"color\",\n",
       "\"palette\":\"RdYlGn\",\n",
       "\"direction\":-1.0,\n",
       "\"scale_mapper_kind\":\"color_brewer\"\n",
       "}],\n",
       "\"layers\":[{\n",
       "\"geom\":\"line\",\n",
       "\"mapping\":{\n",
       "\"x\":\"Day\",\n",
       "\"y\":\"Temp\",\n",
       "\"color\":\"Ozone\",\n",
       "\"size\":\"Wind\",\n",
       "\"group\":\"Month\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"metainfo_list\":[]\n",
       "};\n",
       "           var plotContainer = document.getElementById(\"7Nm73f\");\n",
       "           window.letsPlotCall(function() {{\n",
       "               LetsPlot.buildPlotFromProcessedSpecs(plotSpec, -1, -1, plotContainer);\n",
       "           }});\n",
       "       })();    \n",
       "   </script>"
      ],
      "text/plain": [
       "<lets_plot.plot.core.PlotSpec at 0x168835d20>"
      ]
     },
     "execution_count": 6,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "ggplot(airquality) \\\n",
    "    + geom_line(\n",
    "        aes(\n",
    "            x = 'Day', \n",
    "            y = 'Temp', \n",
    "            color = 'Ozone', # <--- ozone varies by day and sometimes n/a\n",
    "            size = 'Wind', # <--- wind varies by day\n",
    "            group = 'Month'\n",
    "        )\n",
    "    ) \\\n",
    "    + scale_size([0.5, 5.0]) \\\n",
    "    + scale_color_brewer(palette = \"RdYlGn\", direction = -1) \\\n",
    "    + ggsize(700, 500)"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e5404512",
   "metadata": {},
   "source": [
    "#### 4. The Minard Map (simplified)\n",
    "\n",
    "The orirnal can be found here: https://en.wikipedia.org/wiki/Charles_Joseph_Minard#The_map_of_Napoleon's_Russian_campaign"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "id": "d59942ef",
   "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>long</th>\n",
       "      <th>lat</th>\n",
       "      <th>survivors</th>\n",
       "      <th>direction</th>\n",
       "      <th>group</th>\n",
       "    </tr>\n",
       "  </thead>\n",
       "  <tbody>\n",
       "    <tr>\n",
       "      <th>0</th>\n",
       "      <td>24.0</td>\n",
       "      <td>54.9</td>\n",
       "      <td>340000</td>\n",
       "      <td>A</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>1</th>\n",
       "      <td>24.5</td>\n",
       "      <td>55.0</td>\n",
       "      <td>340000</td>\n",
       "      <td>A</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>2</th>\n",
       "      <td>25.5</td>\n",
       "      <td>54.5</td>\n",
       "      <td>340000</td>\n",
       "      <td>A</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>3</th>\n",
       "      <td>26.0</td>\n",
       "      <td>54.7</td>\n",
       "      <td>320000</td>\n",
       "      <td>A</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "    <tr>\n",
       "      <th>4</th>\n",
       "      <td>27.0</td>\n",
       "      <td>54.8</td>\n",
       "      <td>300000</td>\n",
       "      <td>A</td>\n",
       "      <td>1</td>\n",
       "    </tr>\n",
       "  </tbody>\n",
       "</table>\n",
       "</div>"
      ],
      "text/plain": [
       "   long   lat  survivors direction  group\n",
       "0  24.0  54.9     340000         A      1\n",
       "1  24.5  55.0     340000         A      1\n",
       "2  25.5  54.5     340000         A      1\n",
       "3  26.0  54.7     320000         A      1\n",
       "4  27.0  54.8     300000         A      1"
      ]
     },
     "execution_count": 7,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "minard = pd.read_csv('https://raw.githubusercontent.com/JetBrains/lets-plot-docs/master/data/minard/troops.csv')\n",
    "minard.head()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "d5b94934",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "   <div id=\"laAuyP\"></div>\n",
       "   <script type=\"text/javascript\" data-lets-plot-script=\"plot\">\n",
       "       (function() {\n",
       "           var plotSpec={\n",
       "\"data\":{\n",
       "\"long\":[24.0,24.5,25.5,26.0,27.0,28.0,28.5,29.0,30.0,30.3,32.0,33.2,34.4,35.5,36.0,37.6,37.7,37.5,37.0,36.8,35.4,34.3,33.3,32.0,30.4,29.2,28.5,28.3,27.5,26.8,26.4,25.0,24.4,24.2,24.1,24.0,24.5,25.5,26.6,27.4,28.7,28.7,29.2,28.5,28.3,24.0,24.5,24.6,24.6,24.2,24.1],\n",
       "\"lat\":[54.9,55.0,54.5,54.7,54.8,54.9,55.0,55.1,55.2,55.3,54.8,54.9,55.5,55.4,55.5,55.8,55.7,55.7,55.0,55.0,55.3,55.2,54.8,54.6,54.4,54.3,54.2,54.3,54.5,54.3,54.4,54.4,54.4,54.4,54.4,55.1,55.2,54.7,55.7,55.6,55.5,55.5,54.2,54.1,54.2,55.2,55.3,55.8,55.8,54.4,54.4],\n",
       "\"survivors\":[340000.0,340000.0,340000.0,320000.0,300000.0,280000.0,240000.0,210000.0,180000.0,175000.0,145000.0,140000.0,127100.0,100000.0,100000.0,100000.0,100000.0,98000.0,97000.0,96000.0,87000.0,55000.0,37000.0,24000.0,20000.0,20000.0,20000.0,20000.0,20000.0,12000.0,14000.0,8000.0,4000.0,4000.0,4000.0,60000.0,60000.0,60000.0,40000.0,33000.0,33000.0,33000.0,30000.0,30000.0,28000.0,22000.0,22000.0,6000.0,6000.0,6000.0,6000.0],\n",
       "\"direction\":[\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"R\",\"A\",\"A\",\"A\",\"A\",\"A\",\"A\",\"R\",\"R\",\"R\",\"R\",\"A\",\"A\",\"A\",\"R\",\"R\",\"R\"],\n",
       "\"group\":[1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,1.0,2.0,2.0,2.0,2.0,2.0,2.0,2.0,2.0,2.0,2.0,3.0,3.0,3.0,3.0,3.0,3.0]\n",
       "},\n",
       "\"mapping\":{\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"guides\":{\n",
       "\"color\":\"none\"\n",
       "},\n",
       "\"kind\":\"plot\",\n",
       "\"scales\":[{\n",
       "\"aesthetic\":\"size\",\n",
       "\"range\":[1.0,20.0]\n",
       "},{\n",
       "\"aesthetic\":\"color\",\n",
       "\"values\":[\"#E1CBAE\",\"#232021\"]\n",
       "}],\n",
       "\"layers\":[{\n",
       "\"geom\":\"livemap\",\n",
       "\"mapping\":{\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"tiles\":{\n",
       "\"kind\":\"vector_lets_plot\",\n",
       "\"url\":\"wss://tiles.datalore.jetbrains.com\",\n",
       "\"theme\":\"color\",\n",
       "\"attribution\":\"Map: <a href=\\\"https://github.com/JetBrains/lets-plot\\\">© Lets-Plot</a>, map data: <a href=\\\"https://www.openstreetmap.org/copyright\\\">© OpenStreetMap contributors</a>.\"\n",
       "},\n",
       "\"geocoding\":{\n",
       "\"url\":\"https://geo2.datalore.jetbrains.com/map_data/geocoding\"\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "},{\n",
       "\"geom\":\"path\",\n",
       "\"mapping\":{\n",
       "\"x\":\"long\",\n",
       "\"y\":\"lat\",\n",
       "\"size\":\"survivors\",\n",
       "\"group\":\"group\",\n",
       "\"color\":\"direction\"\n",
       "},\n",
       "\"data_meta\":{\n",
       "},\n",
       "\"data\":{\n",
       "}\n",
       "}],\n",
       "\"metainfo_list\":[]\n",
       "};\n",
       "           var plotContainer = document.getElementById(\"laAuyP\");\n",
       "           window.letsPlotCall(function() {{\n",
       "               LetsPlot.buildPlotFromProcessedSpecs(plotSpec, -1, -1, plotContainer);\n",
       "           }});\n",
       "       })();    \n",
       "   </script>"
      ],
      "text/plain": [
       "<lets_plot.plot.core.PlotSpec at 0x168837ca0>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "ggplot(minard) \\\n",
    "    + geom_livemap() \\\n",
    "    + geom_path(aes(x='long', y='lat', size='survivors', group='group', color='direction')) \\\n",
    "    + scale_size([1.0, 20.0]) \\\n",
    "    + scale_color_manual([\"#E1CBAE\", \"#232021\"]) \\\n",
    "    + guides(color = \"none\")"
   ]
  }
 ],
 "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.10.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}