{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# So easy, *voilà*!\n", "\n", "In this example notebook, we demonstrate how voila can render Jupyter notebooks with interactions requiring a roundtrip to the kernel." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Jupyter Widgets" ] }, { "cell_type": "code", "execution_count": 1, "metadata": {}, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "43f7ac3144f143b6ab21d9895f938344", "version_major": 2, "version_minor": 0 }, "text/plain": [ "VBox(children=(FloatSlider(value=4.0, description='$x$'), FloatText(value=0.0, description='$x^2$', disabled=T…" ] }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import ipywidgets as widgets\n", "\n", "slider = widgets.FloatSlider(description='$x$', value=4)\n", "text = widgets.FloatText(disabled=True, description='$x^2$')\n", "\n", "def compute(*ignore):\n", " text.value = str(slider.value ** 2)\n", "\n", "slider.observe(compute, 'value')\n", "\n", "widgets.VBox([slider, text])" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Basic outputs of code cells" ] }, { "cell_type": "code", "execution_count": 2, "metadata": {}, "outputs": [ { "data": { "text/html": [ "
\n", "\n", "\n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", " \n", "
sepal_lengthsepal_widthpetal_lengthpetal_widthspecies
05.13.51.40.2setosa
14.93.01.40.2setosa
24.73.21.30.2setosa
34.63.11.50.2setosa
45.03.61.40.2setosa
55.43.91.70.4setosa
64.63.41.40.3setosa
75.03.41.50.2setosa
84.42.91.40.2setosa
94.93.11.50.1setosa
105.43.71.50.2setosa
114.83.41.60.2setosa
124.83.01.40.1setosa
134.33.01.10.1setosa
145.84.01.20.2setosa
155.74.41.50.4setosa
165.43.91.30.4setosa
175.13.51.40.3setosa
185.73.81.70.3setosa
195.13.81.50.3setosa
205.43.41.70.2setosa
215.13.71.50.4setosa
224.63.61.00.2setosa
235.13.31.70.5setosa
244.83.41.90.2setosa
255.03.01.60.2setosa
265.03.41.60.4setosa
275.23.51.50.2setosa
285.23.41.40.2setosa
294.73.21.60.2setosa
..................
1206.93.25.72.3virginica
1215.62.84.92.0virginica
1227.72.86.72.0virginica
1236.32.74.91.8virginica
1246.73.35.72.1virginica
1257.23.26.01.8virginica
1266.22.84.81.8virginica
1276.13.04.91.8virginica
1286.42.85.62.1virginica
1297.23.05.81.6virginica
1307.42.86.11.9virginica
1317.93.86.42.0virginica
1326.42.85.62.2virginica
1336.32.85.11.5virginica
1346.12.65.61.4virginica
1357.73.06.12.3virginica
1366.33.45.62.4virginica
1376.43.15.51.8virginica
1386.03.04.81.8virginica
1396.93.15.42.1virginica
1406.73.15.62.4virginica
1416.93.15.12.3virginica
1425.82.75.11.9virginica
1436.83.25.92.3virginica
1446.73.35.72.5virginica
1456.73.05.22.3virginica
1466.32.55.01.9virginica
1476.53.05.22.0virginica
1486.23.45.42.3virginica
1495.93.05.11.8virginica
\n", "

150 rows × 5 columns

\n", "
" ], "text/plain": [ " sepal_length sepal_width petal_length petal_width species\n", "0 5.1 3.5 1.4 0.2 setosa\n", "1 4.9 3.0 1.4 0.2 setosa\n", "2 4.7 3.2 1.3 0.2 setosa\n", "3 4.6 3.1 1.5 0.2 setosa\n", "4 5.0 3.6 1.4 0.2 setosa\n", "5 5.4 3.9 1.7 0.4 setosa\n", "6 4.6 3.4 1.4 0.3 setosa\n", "7 5.0 3.4 1.5 0.2 setosa\n", "8 4.4 2.9 1.4 0.2 setosa\n", "9 4.9 3.1 1.5 0.1 setosa\n", "10 5.4 3.7 1.5 0.2 setosa\n", "11 4.8 3.4 1.6 0.2 setosa\n", "12 4.8 3.0 1.4 0.1 setosa\n", "13 4.3 3.0 1.1 0.1 setosa\n", "14 5.8 4.0 1.2 0.2 setosa\n", "15 5.7 4.4 1.5 0.4 setosa\n", "16 5.4 3.9 1.3 0.4 setosa\n", "17 5.1 3.5 1.4 0.3 setosa\n", "18 5.7 3.8 1.7 0.3 setosa\n", "19 5.1 3.8 1.5 0.3 setosa\n", "20 5.4 3.4 1.7 0.2 setosa\n", "21 5.1 3.7 1.5 0.4 setosa\n", "22 4.6 3.6 1.0 0.2 setosa\n", "23 5.1 3.3 1.7 0.5 setosa\n", "24 4.8 3.4 1.9 0.2 setosa\n", "25 5.0 3.0 1.6 0.2 setosa\n", "26 5.0 3.4 1.6 0.4 setosa\n", "27 5.2 3.5 1.5 0.2 setosa\n", "28 5.2 3.4 1.4 0.2 setosa\n", "29 4.7 3.2 1.6 0.2 setosa\n", ".. ... ... ... ... ...\n", "120 6.9 3.2 5.7 2.3 virginica\n", "121 5.6 2.8 4.9 2.0 virginica\n", "122 7.7 2.8 6.7 2.0 virginica\n", "123 6.3 2.7 4.9 1.8 virginica\n", "124 6.7 3.3 5.7 2.1 virginica\n", "125 7.2 3.2 6.0 1.8 virginica\n", "126 6.2 2.8 4.8 1.8 virginica\n", "127 6.1 3.0 4.9 1.8 virginica\n", "128 6.4 2.8 5.6 2.1 virginica\n", "129 7.2 3.0 5.8 1.6 virginica\n", "130 7.4 2.8 6.1 1.9 virginica\n", "131 7.9 3.8 6.4 2.0 virginica\n", "132 6.4 2.8 5.6 2.2 virginica\n", "133 6.3 2.8 5.1 1.5 virginica\n", "134 6.1 2.6 5.6 1.4 virginica\n", "135 7.7 3.0 6.1 2.3 virginica\n", "136 6.3 3.4 5.6 2.4 virginica\n", "137 6.4 3.1 5.5 1.8 virginica\n", "138 6.0 3.0 4.8 1.8 virginica\n", "139 6.9 3.1 5.4 2.1 virginica\n", "140 6.7 3.1 5.6 2.4 virginica\n", "141 6.9 3.1 5.1 2.3 virginica\n", "142 5.8 2.7 5.1 1.9 virginica\n", "143 6.8 3.2 5.9 2.3 virginica\n", "144 6.7 3.3 5.7 2.5 virginica\n", "145 6.7 3.0 5.2 2.3 virginica\n", "146 6.3 2.5 5.0 1.9 virginica\n", "147 6.5 3.0 5.2 2.0 virginica\n", "148 6.2 3.4 5.4 2.3 virginica\n", "149 5.9 3.0 5.1 1.8 virginica\n", "\n", "[150 rows x 5 columns]" ] }, "execution_count": 2, "metadata": {}, "output_type": "execute_result" } ], "source": [ "import pandas as pd\n", "\n", "iris = pd.read_csv('https://raw.githubusercontent.com/mwaskom/seaborn-data/master/iris.csv')\n", "iris" ] } ], "metadata": { "kernelspec": { "display_name": "Python 3", "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.6.8" } }, "nbformat": 4, "nbformat_minor": 4 }