{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "Python has a large collection of plotting libraries and while any content that rendens in a Jupyter Notebooks will render in Jupyter-flex dashboards there are some things to consider for plots to look the best they can.\n", "\n", "## Interactive (JS) libraries\n", "\n", "Since Jupyter-flex dashboards have a web frontend, either static `.html` files or a running webserver, in general any library that outputs a web based plot will look better, this includes: [Altair](https://altair-viz.github.io/), [plotly](https://plot.ly/python/), [Bokeh](https://docs.bokeh.org/en/latest/index.html) and [bqplot](https://github.com/bloomberg/bqplot)." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Responsive\n", "\n", "For plots to look great in flex dashboards they should be responsive, that means that they should ocupy all the space that the parent html components has instead of having a static width and heigth.\n", "\n", "A responsive behaviour is usually not the default for most plotting libraries and but it's very easy to change this.\n", "The way to do this differs from library to library here are some tips to make this happen in the libraries that we test more.\n", "\n", "We include some CSS as part of the library to make these popular plotting libraries behave better in the dashboards." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Altair\n", "\n", "Starting from [Altair](https://altair-viz.github.io/) version 4.0 it's possible to make a responsive chart width and height, one can do that by setting the `width` and `height` properties to `\"container\"`.\n", "\n", "For example take this example:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import altair as alt\n", "from vega_datasets import data" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "source = data.cars()\n", "\n", "plot = alt.Chart(source).mark_circle(size=60).encode(\n", " x='Horsepower',\n", " y='Miles_per_Gallon',\n", " color='Origin',\n", " tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']\n", ")" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "plot" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "If we tag the previous cell with `body` then the size will be static and not responsive, to make it responsive we just add a bit of code:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "outputs": [], "source": [ "plot.properties(\n", " width='container',\n", " height='container'\n", ")\n", "None" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "This could make the plot very small on the Jupyter Notebook interface but will look great and expanded in a Flex dashboard. \n", "\n", "It's usually easy to add the call to `property()` once you are done with the Notebook or control this globally using a variable." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[![Jupyter-flex altair](/assets/img/screenshots/plots/altair-single.png \"Altair single\")](/examples/altair-single.html)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Plotly\n", "\n", "[Plotly](https://plot.ly/python/) requires no big changes thanks to the some extra code and styling included in Jupyter-flex.\n", "We can make things look a bit better by changing the margin of the plot.\n", "\n", "For example a simple plot that uses `plotly.express`:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import plotly.express as px\n", "import plotly.graph_objects as go" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "margin = go.layout.Margin(l=20, r=20, b=20, t=30)" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "df = px.data.iris()\n", "fig = px.scatter(df, x=\"sepal_width\", y=\"sepal_length\")\n", "\n", "fig.update_layout(margin=margin)\n", "fig" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[![Jupyter-flex plotly](/assets/img/screenshots/plots/plotly-single.png \"Plotly single\")](/examples/plotly-single.html)\n", "\n", "

Click on the image to open the rendered dashboard

" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Bokeh\n", "\n", "Using [Bokeh](https://docs.bokeh.org/en/latest/index.html) plots in Jupyter-flex dashboard requires two things:\n", "\n", "1. One `meta` tag in the cell that does `output_notebook()` to embed the bokeh JS code in the notebook. The `meta` tag will add that cell to the dashboard `.html` with the `display: none;` style.\n", "2. Add `sizing_mode=\"stretch_both\"` to the Bokeh `figure()` call\n", "\n", "Lets look at this example Notebook:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "meta" ] }, "outputs": [], "source": [ "import numpy as np\n", "\n", "from bokeh.plotting import figure, show, output_notebook\n", "output_notebook()" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "x = np.linspace(0, 4 * np.pi, 100)\n", "y = np.sin(x)" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "fig = figure()\n", "fig.line(x, y)\n", "\n", "show(fig)" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "outputs": [], "source": [ "fig = figure(sizing_mode=\"stretch_both\")\n", "fig.line(x, y)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Similar to what happens in Altair we see that the plot might not look its best well in the Jupyter Notebook interface but renders beautifully in the final flex dashboard.\n", "\n", "It's usually easy to add the `sizing_mode=\"stretch_both\"` code once you are done with the Notebook or control this globally using a variable.\n", "\n", "[![Jupyter-flex bokeh](/assets/img/screenshots/plots/bokeh-single.png \"Bokeh single\")](/examples/bokeh-single.html)\n", "\n", "

Click on the image to open the rendered dashboard

" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### bqplot\n", "\n", "[bqplot](https://github.com/bloomberg/bqplot) is a plotting library that is 100% based on ipywidgets and therefore works great with them, it also required no major changes for the plots to look great on Jupyter-flex dashboards.\n", "\n", "Once simple example:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import numpy as np\n", "from bqplot import *" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "size = 100\n", "np.random.seed(42)\n", "\n", "x_data = range(size)\n", "y_data = np.random.randn(size)\n", "y_data_2 = np.random.randn(size)\n", "y_data_3 = np.cumsum(np.random.randn(size) * 100.)" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "outputs": [], "source": [ "x_ord = OrdinalScale()\n", "y_sc = LinearScale()\n", "\n", "bar = Bars(x=np.arange(10), y=np.random.rand(10), scales={'x': x_ord, 'y': y_sc})\n", "ax_x = Axis(scale=x_ord)\n", "ax_y = Axis(scale=y_sc, tick_format='0.2f', orientation='vertical')\n", "\n", "Figure(marks=[bar], axes=[ax_x, ax_y], padding_x=0.025, padding_y=0.025)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[![Jupyter-flex bqplot](/assets/img/screenshots/plots/bqplot-single.png \"bqplot single\")](/examples/bqplot-single.html)\n", "\n", "

Click on the image to open the rendered dashboard

" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Updating plots\n", "\n", "When using Voila and IPython widgets to dynamically update the content of plots in the dashboard there are some things to consider:\n", "\n", "1. If the library has native support for IPython Widgets then it's a good idea to use that functionality, this is possible in:\n", " 1. bqplot because the library is designed that way\n", " 2. plotly using [Figure Widget](https://plot.ly/python/figurewidget/)\n", "2. If the library doesn't have native support for ipywidgets it's still possible to use it and update the dashboard the using [Output Widgets](https://ipywidgets.readthedocs.io/en/latest/examples/Output%20Widget.html)\n", "\n", "When using Output Widgets remember to call `clear()` before displaying new content, for example:\n", "\n", "```\n", "out = widgets.Output()\n", "\n", "with out:\n", " out.clear_output()\n", " display(...)\n", "```\n", "\n", "It's common to have the `with out: ...` code inside a callback function from a widgets `observe()` method." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Examples\n", "\n", "More examples that show the plotting libraries in action and other examples that show how to have more dyamic dashboards with ipywidgets:\n", "\n", "
\n", "
\n", " \n", " \"Jupyter-flex:\n", " \n", "
Altair plots
\n", "
\n", "
\n", " \n", " \"Jupyter-flex:\n", " \n", "
Plotly plots
\n", "
\n", "
\n", " \n", " \"Jupyter-flex:\n", " \n", "
Bokeh plots
\n", "
\n", "
\n", "\n", "
\n", "
\n", " \n", " \"Jupyter-flex:\n", " \n", "
bqplot plots (runs in mybinder.org)
\n", "
\n", "
\n", " \n", " \"Jupyter-flex:\n", " \n", "
Movie Explorer (runs in mybinder.org)
\n", "
\n", "
\n", " \n", " \"Jupyter-flex:\n", " \n", "
Wealth of Nations (runs in mybinder.org)
\n", "
\n", "
\n", "\n", "
\n", "
\n", " \n", " \"Jupyter-flex:\n", " \n", "
Iris clustering (runs in mybinder.org)
\n", "
\n", "
\n", "
\n", "
\n", "
\n", "
" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [] } ], "metadata": { "celltoolbar": "Tags", "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.7.6" } }, "nbformat": 4, "nbformat_minor": 4 }