{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "# Plotting\n", "\n", "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 heigh (e.g. `500px` x `500px`).\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", "Note that Jupyter-flex includes some CSS and JS code to make these popular plotting libraries behave better in a dashboard scenario." ] }, { "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 `chart` 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": [ "chart" ] }, "outputs": [], "source": [ "plot.properties(\n", " width='container',\n", " height='container'\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "This makes it look not great... on the Jupyter Notebook interface but will look great and expanded in a Flex dashboard. It's usually easy to add the call to `property()` once the Notebook is finished or control this globally using a simple variable for easy development." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[![Jupyter-flex altair](/assets/img/screenshots/plots/altair-simple.png \"Altair simple\")](/examples/altair-simple.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-simple.png \"Plotly simple\")](/examples/plotly-simple.html)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### Bokeh\n", "\n", "Showing [Bokeh](https://docs.bokeh.org/en/latest/index.html). plots in Jupyter-flex dashboard requires:\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` just after the `` tag and make it invisible using `display: none;`\n", "2. Add `sizing_mode=\"stretch_both\"` to the Bokeh `figure()`\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": [ "chart" ] }, "outputs": [], "source": [ "fig = figure(sizing_mode=\"stretch_both\")\n", "fig.line(x, y)\n", "\n", "show(fig)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "Similar to what happens in Altair we see that the plot doesn't render well in the Notebook Interface but renders beautifully in the final flex dashboard. It's quite easy to add the `sizing_mode=\"stretch_both\"` code once the Notebook is finished or control this globally using a simple variable for easy development.\n", "\n", "[![Jupyter-flex bokeh](/assets/img/screenshots/plots/bokeh-simple.png \"Bokeh simple\")](/examples/bokeh-simple.html)" ] }, { "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": [ "chart" ] }, "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-simple.png \"bqplot simple\")](/examples/bqplot-simple.html)" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Dynamic plots\n", "\n", "When using Voila and IPython widgets to dynamically update the content of 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 natively since 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 `clear()` the contents 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", "You usually 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", "
" ] } ], "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": 2 }