Cleaner notebook

ba32660b · David Beniamine · 47da91c7 · ba32660b
Verified Commit ba32660b authored 4 years ago by David Beniamine
--- a/dashboards/Interactive_Voila.ipynb
+++ b/dashboards/Interactive_Voila.ipynb
@@ -266,7 +266,7 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 2,
+   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
@@ -654,11 +654,30 @@
     },
     "metadata": {},
     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "import panel as pn\n",
+    "# We use interact and widgets from panel\n",
+    "from panel import interact\n",
+    "from panel.widgets import IntSlider\n",
+    "from bokeh.sampledata.sea_surface_temperature import sea_surface_temperature\n",
+    "from bokeh.models import ColumnDataSource\n",
+    "from bokeh.plotting import figure\n",
+    "\n",
+    "# Use ipywidget communication, required for voilà only required once per notebook\n",
+    "pn.extension(comms='ipywidgets')"
+   ]
  },
+  {
+   "cell_type": "code",
+   "execution_count": 4,
+   "metadata": {},
+   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "aa83696ae844457998782c5ec8af5800",
+       "model_id": "c11e6ee24ab6489a8515a0efcedcec0a",
       "version_major": 2,
       "version_minor": 0
      },
@@ -668,23 +687,12 @@
       "    [1] ParamFunction(function)"
      ]
     },
-     "execution_count": 2,
+     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
-    "import panel as pn\n",
-    "# We use interact and widgets from panel\n",
-    "from panel import interact\n",
-    "from panel.widgets import IntSlider\n",
-    "from bokeh.sampledata.sea_surface_temperature import sea_surface_temperature\n",
-    "from bokeh.models import ColumnDataSource\n",
-    "from bokeh.plotting import figure\n",
-    "\n",
-    "# Use ipywidget communication, required for voilà\n",
-    "pn.extension(comms='ipywidgets')\n",
-    "\n",
    "# Donnees templates bokeh\n",
    "df = sea_surface_temperature.copy()\n",
    "\n",
@@ -710,6 +718,13 @@
    "    getplot\n",
    ").servable()"
   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
  }
 ],
 "metadata": {

 %% Cell type:markdown id: tags:

 ## Interactive sliders

 Les sliders affectent le calcul, la valeur est calulée par un callback python

 %% Cell type:code id: tags:

 ``` python
 from ipywidgets import HBox, VBox, IntSlider, interactive_output, Dropdown
 from IPython.display import display

 a = IntSlider()
 b = IntSlider()

 def f(a, b):
    print("{} * {} = {}".format(a, b, a * b))

 out = interactive_output(f, { "a": a, "b": b })

 display(HBox([VBox([a, b]), out]))
 ```

 %% Output


 %% Cell type:markdown id: tags:

 Un autre slider, pas de calcul

 %% Cell type:code id: tags:

 ``` python
 from ipywidgets import interact

 def foo(x):
    print(x)

 interact(foo, x=(0, 10))
 ```

 %% Output


    <function __main__.foo(x)>

 %% Cell type:markdown id: tags:

 ## Quand on click ce boutton un affichage ce produit

 %% Cell type:code id: tags:

 ``` python
 # sort of based on https://github.com/voila-dashboards/voila-material/issues/18
 import ipywidgets as widgets
 from IPython.display import display
 output = widgets.Output()

 @output.capture(clear_output=False,wait=True) # based on https://github.com/jupyter-widgets/ipywidgets/issues/1846 and https://ipywidgets.readthedocs.io/en/latest/examples/Output%20Widget.html
 def sayHello(b):
    print('Hello world!')

 run_button = widgets.Button(
      description = 'run'
 )
 run_button.on_click(sayHello)
 display(run_button)
 output
 ```

 %% Output



 %% Cell type:markdown id: tags:

 ## Figure interactive avec matplotlib

 %% Cell type:code id: tags:

 ``` python
 %matplotlib  inline

 from ipywidgets import interact, interactive
 import matplotlib.pyplot as plt
 import numpy as np

 def ma_fonction(a,b,c):
    plt.figure(2) # ???
    x = np.linspace(-10,10, num=1000)
    plt.plot(x, a*x**2+b*x+c)
    plt.ylim(-10,10)
    plt.show()

 interactive_plot = interactive(ma_fonction, a=(-10,10), b=(-20,20), c=(-5,5))
 interactive_plot
 ```

 %% Output


 %% Cell type:markdown id: tags:

 ## Figure interactive avec seaborn

 %% Cell type:code id: tags:

 ``` python
 from ipywidgets import interact, interactive
 import matplotlib.pyplot as plt
 import numpy as np
 import seaborn as sns

 # Chargement d'un dataset connu
 tips = sns.load_dataset("tips")
 tips

 @interact(xmax=50,ymax=10, hue=["smoker","sex","day","time","size"], comic=[('Non',False),('Oui',True)])
 def f(xmax, ymax, hue, comic):
    sns.set()
    sns.set(style="darkgrid")
    if(comic):
        ctx = plt.xkcd()
    else:
        from contextlib import nullcontext
        ctx = nullcontext()
    with ctx:
        plot = sns.relplot(x="total_bill", y="tip",  hue=hue, data=tips)
        plot.set(xlim=(0, xmax), ylim=(0, ymax))
 ```

 %% Output


 %% Cell type:markdown id: tags:

 ## Figure interactive avec bokeh

 Si l'on veut utiliser Bokeh, les choses se complique :

 + L'interaction avec ipywidget ne fonctionne pas sur voilà aucun affichage
 + L'interaction "Bokeh" standard fonctionne sur jupyterlab  mais affiche `JavaScript output is disabled in JupyterLab` sur voilà, voir [#108](https://github.com/voila-dashboards/voila/issues/108)
 + L'interaction en mode bokeh [app embarquée](https://github.com/bokeh/bokeh/blob/2.2.3/examples/howto/server_embed/notebook_embed.ipynb), fonctionne sur jupyter et voilà embarqué dans jupyter mais demande ouvre une websocket sur un port indeterminé => l'enfer pour le reverse proxy

 **Finalement [#244](https://github.com/voila-dashboards/voila/issues/244#issuecomment-514341910) done la solution : embarquer le code bokeh dans [panel holoviz](https://panel.holoviz.org/user_guide/index.html)**

 Cela signifie qu'on utilise l'[interaction de panel](https://panel.holoviz.org/user_guide/Interact.html)

 Voici un exemple "simple"

 %% Cell type:code id: tags:

 ``` python
 import panel as pn
 # We use interact and widgets from panel
 from panel import interact
 from panel.widgets import IntSlider
 from bokeh.sampledata.sea_surface_temperature import sea_surface_temperature
 from bokeh.models import ColumnDataSource
 from bokeh.plotting import figure

-# Use ipywidget communication, required for voilà
+# Use ipywidget communication, required for voilà only required once per notebook
 pn.extension(comms='ipywidgets')
+```
+
+%% Output
+

+
+%% Cell type:code id: tags:
+
+``` python
 # Donnees templates bokeh
 df = sea_surface_temperature.copy()

 # Un slider pour l'interaction
 days=IntSlider(name='Smooting by N Days', start=0, end=30, step=1, value=0)

 @pn.depends(days.param.value)
 def getplot(days):
    if (days):
        data = df.rolling('{0}D'.format(days)).mean()
    else:
        data = df

    source = ColumnDataSource(data=data)
    plot = figure(x_axis_type='datetime', y_range=(0, 25),
              y_axis_label='Temperature (Celsius)',
             title="Sea Surface Temperature at 43.18, -70.43")
    plot.line('time', 'temperature', source=source)
    return plot

 pn.Column(
    days,
    getplot
 ).servable()
 ```

 %% Output

-
-
    Column
        [0] IntSlider(end=30, name='Smooting by N Days', value_throttled=0)
        [1] ParamFunction(function)
+
+%% Cell type:code id: tags:
+
+``` python
+```