More examples

127d47ed · David Beniamine · ba32660b · 127d47ed
Verified Commit 127d47ed authored 4 years ago by David Beniamine
--- a/dashboards/Interactive_Voila.ipynb
+++ b/dashboards/Interactive_Voila.ipynb
@@ -261,12 +261,12 @@
    "\n",
    "Cela signifie qu'on utilise l'[interaction de panel](https://panel.holoviz.org/user_guide/Interact.html)\n",
    "\n",
-    "Voici un exemple \"simple\""
+    "Voici un exemple \"simple\" inspiré [de celui-ci](https://panel.holoviz.org/gallery/simple/iris_kmeans.html#simple-gallery-iris-kmeans)"
   ]
  },
  {
   "cell_type": "code",
-   "execution_count": 3,
+   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
@@ -671,13 +671,13 @@
  },
  {
   "cell_type": "code",
-   "execution_count": 4,
+   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "application/vnd.jupyter.widget-view+json": {
-       "model_id": "c11e6ee24ab6489a8515a0efcedcec0a",
+       "model_id": "83489f69f33145768e6e6033b10ad8ef",
       "version_major": 2,
       "version_minor": 0
      },
@@ -687,7 +687,7 @@
       "    [1] ParamFunction(function)"
      ]
     },
-     "execution_count": 4,
+     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }

 %% 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"
+Voici un exemple "simple" inspiré [de celui-ci](https://panel.holoviz.org/gallery/simple/iris_kmeans.html#simple-gallery-iris-kmeans)
 %% 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à 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
 ```