{ "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, for example: [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 but it's very easy to change this even if the way to do this changes from library to library, here are some tips to make this happen in the most popular plotting libraries." ] }, { "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 chart have responsive width and height by setting the `width` and `height` properties to `\"container\"`.\n", "\n", "For example:" ] }, { "cell_type": "code", "execution_count": 1, "metadata": { "tags": [] }, "outputs": [], "source": [ "import altair as alt\n", "from vega_datasets import data" ] }, { "cell_type": "code", "execution_count": 2, "metadata": { "tags": [] }, "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": 3, "metadata": { "tags": [] }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "" ], "text/plain": [ "alt.Chart(...)" ] }, "execution_count": 3, "metadata": {}, "output_type": "execute_result" } ], "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": 4, "metadata": { "tags": [ "body" ] }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", "" ], "text/plain": [ "alt.Chart(...)" ] }, "execution_count": 4, "metadata": {}, "output_type": "execute_result" } ], "source": [ "plot.properties(\n", " width='container',\n", " height='container'\n", ")" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "This could could make the plot invisible the Jupyter Lab or Jupyter Classic interface but will look great and expanded in the 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": [ "[![](/assets/img/screenshots/plots/altair-single.png)](/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 dashboard that uses `plotly.express`:" ] }, { "cell_type": "code", "execution_count": 6, "metadata": { "tags": [] }, "outputs": [], "source": [ "import plotly.express as px\n", "import plotly.graph_objects as go" ] }, { "cell_type": "code", "execution_count": 7, "metadata": { "tags": [] }, "outputs": [], "source": [ "margin = go.layout.Margin(l=20, r=20, b=20, t=30)" ] }, { "cell_type": "code", "execution_count": 9, "metadata": { "tags": [] }, "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", "None" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[![](/assets/img/screenshots/plots/plotly-single.png)](/examples/plotly-single.html)\n", "\n", "

Click on the image to open the 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", "For example:" ] }, { "cell_type": "code", "execution_count": 10, "metadata": { "tags": [ "meta" ] }, "outputs": [ { "data": { "text/html": [ "\n", "
\n", " \n", " Loading BokehJS ...\n", "
" ] }, "metadata": {}, "output_type": "display_data" }, { "data": { "application/javascript": [ "\n", "(function(root) {\n", " function now() {\n", " return new Date();\n", " }\n", "\n", " var force = true;\n", "\n", " if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n", " root._bokeh_onload_callbacks = [];\n", " root._bokeh_is_loading = undefined;\n", " }\n", "\n", " var JS_MIME_TYPE = 'application/javascript';\n", " var HTML_MIME_TYPE = 'text/html';\n", " var EXEC_MIME_TYPE = 'application/vnd.bokehjs_exec.v0+json';\n", " var CLASS_NAME = 'output_bokeh rendered_html';\n", "\n", " /**\n", " * Render data to the DOM node\n", " */\n", " function render(props, node) {\n", " var script = document.createElement(\"script\");\n", " node.appendChild(script);\n", " }\n", "\n", " /**\n", " * Handle when an output is cleared or removed\n", " */\n", " function handleClearOutput(event, handle) {\n", " var cell = handle.cell;\n", "\n", " var id = cell.output_area._bokeh_element_id;\n", " var server_id = cell.output_area._bokeh_server_id;\n", " // Clean up Bokeh references\n", " if (id != null && id in Bokeh.index) {\n", " Bokeh.index[id].model.document.clear();\n", " delete Bokeh.index[id];\n", " }\n", "\n", " if (server_id !== undefined) {\n", " // Clean up Bokeh references\n", " var cmd = \"from bokeh.io.state import curstate; print(curstate().uuid_to_server['\" + server_id + \"'].get_sessions()[0].document.roots[0]._id)\";\n", " cell.notebook.kernel.execute(cmd, {\n", " iopub: {\n", " output: function(msg) {\n", " var id = msg.content.text.trim();\n", " if (id in Bokeh.index) {\n", " Bokeh.index[id].model.document.clear();\n", " delete Bokeh.index[id];\n", " }\n", " }\n", " }\n", " });\n", " // Destroy server and session\n", " var cmd = \"import bokeh.io.notebook as ion; ion.destroy_server('\" + server_id + \"')\";\n", " cell.notebook.kernel.execute(cmd);\n", " }\n", " }\n", "\n", " /**\n", " * Handle when a new output is added\n", " */\n", " function handleAddOutput(event, handle) {\n", " var output_area = handle.output_area;\n", " var output = handle.output;\n", "\n", " // limit handleAddOutput to display_data with EXEC_MIME_TYPE content only\n", " if ((output.output_type != \"display_data\") || (!Object.prototype.hasOwnProperty.call(output.data, EXEC_MIME_TYPE))) {\n", " return\n", " }\n", "\n", " var toinsert = output_area.element.find(\".\" + CLASS_NAME.split(' ')[0]);\n", "\n", " if (output.metadata[EXEC_MIME_TYPE][\"id\"] !== undefined) {\n", " toinsert[toinsert.length - 1].firstChild.textContent = output.data[JS_MIME_TYPE];\n", " // store reference to embed id on output_area\n", " output_area._bokeh_element_id = output.metadata[EXEC_MIME_TYPE][\"id\"];\n", " }\n", " if (output.metadata[EXEC_MIME_TYPE][\"server_id\"] !== undefined) {\n", " var bk_div = document.createElement(\"div\");\n", " bk_div.innerHTML = output.data[HTML_MIME_TYPE];\n", " var script_attrs = bk_div.children[0].attributes;\n", " for (var i = 0; i < script_attrs.length; i++) {\n", " toinsert[toinsert.length - 1].firstChild.setAttribute(script_attrs[i].name, script_attrs[i].value);\n", " toinsert[toinsert.length - 1].firstChild.textContent = bk_div.children[0].textContent\n", " }\n", " // store reference to server id on output_area\n", " output_area._bokeh_server_id = output.metadata[EXEC_MIME_TYPE][\"server_id\"];\n", " }\n", " }\n", "\n", " function register_renderer(events, OutputArea) {\n", "\n", " function append_mime(data, metadata, element) {\n", " // create a DOM node to render to\n", " var toinsert = this.create_output_subarea(\n", " metadata,\n", " CLASS_NAME,\n", " EXEC_MIME_TYPE\n", " );\n", " this.keyboard_manager.register_events(toinsert);\n", " // Render to node\n", " var props = {data: data, metadata: metadata[EXEC_MIME_TYPE]};\n", " render(props, toinsert[toinsert.length - 1]);\n", " element.append(toinsert);\n", " return toinsert\n", " }\n", "\n", " /* Handle when an output is cleared or removed */\n", " events.on('clear_output.CodeCell', handleClearOutput);\n", " events.on('delete.Cell', handleClearOutput);\n", "\n", " /* Handle when a new output is added */\n", " events.on('output_added.OutputArea', handleAddOutput);\n", "\n", " /**\n", " * Register the mime type and append_mime function with output_area\n", " */\n", " OutputArea.prototype.register_mime_type(EXEC_MIME_TYPE, append_mime, {\n", " /* Is output safe? */\n", " safe: true,\n", " /* Index of renderer in `output_area.display_order` */\n", " index: 0\n", " });\n", " }\n", "\n", " // register the mime type if in Jupyter Notebook environment and previously unregistered\n", " if (root.Jupyter !== undefined) {\n", " var events = require('base/js/events');\n", " var OutputArea = require('notebook/js/outputarea').OutputArea;\n", "\n", " if (OutputArea.prototype.mime_types().indexOf(EXEC_MIME_TYPE) == -1) {\n", " register_renderer(events, OutputArea);\n", " }\n", " }\n", "\n", " \n", " if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n", " root._bokeh_timeout = Date.now() + 5000;\n", " root._bokeh_failed_load = false;\n", " }\n", "\n", " var NB_LOAD_WARNING = {'data': {'text/html':\n", " \"
\\n\"+\n", " \"

\\n\"+\n", " \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n", " \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n", " \"

\\n\"+\n", " \"\\n\"+\n", " \"\\n\"+\n", " \"from bokeh.resources import INLINE\\n\"+\n", " \"output_notebook(resources=INLINE)\\n\"+\n", " \"\\n\"+\n", " \"
\"}};\n", "\n", " function display_loaded() {\n", " var el = document.getElementById(\"1002\");\n", " if (el != null) {\n", " el.textContent = \"BokehJS is loading...\";\n", " }\n", " if (root.Bokeh !== undefined) {\n", " if (el != null) {\n", " el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n", " }\n", " } else if (Date.now() < root._bokeh_timeout) {\n", " setTimeout(display_loaded, 100)\n", " }\n", " }\n", "\n", "\n", " function run_callbacks() {\n", " try {\n", " root._bokeh_onload_callbacks.forEach(function(callback) {\n", " if (callback != null)\n", " callback();\n", " });\n", " } finally {\n", " delete root._bokeh_onload_callbacks\n", " }\n", " console.debug(\"Bokeh: all callbacks have finished\");\n", " }\n", "\n", " function load_libs(css_urls, js_urls, callback) {\n", " if (css_urls == null) css_urls = [];\n", " if (js_urls == null) js_urls = [];\n", "\n", " root._bokeh_onload_callbacks.push(callback);\n", " if (root._bokeh_is_loading > 0) {\n", " console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n", " return null;\n", " }\n", " if (js_urls == null || js_urls.length === 0) {\n", " run_callbacks();\n", " return null;\n", " }\n", " console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n", " root._bokeh_is_loading = css_urls.length + js_urls.length;\n", "\n", " function on_load() {\n", " root._bokeh_is_loading--;\n", " if (root._bokeh_is_loading === 0) {\n", " console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n", " run_callbacks()\n", " }\n", " }\n", "\n", " function on_error(url) {\n", " console.error(\"failed to load \" + url);\n", " }\n", "\n", " for (let i = 0; i < css_urls.length; i++) {\n", " const url = css_urls[i];\n", " const element = document.createElement(\"link\");\n", " element.onload = on_load;\n", " element.onerror = on_error.bind(null, url);\n", " element.rel = \"stylesheet\";\n", " element.type = \"text/css\";\n", " element.href = url;\n", " console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n", " document.body.appendChild(element);\n", " }\n", "\n", " const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\": \"dM3QQsP+wXdHg42wTqW85BjZQdLNNIXqlPw/BgKoExPmTG7ZLML4EGqLMfqHT6ON\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\": \"8x57I4YuIfu8XyZfFo0XVr2WAT8EK4rh/uDe3wF7YuW2FNUSNEpJbsPaB1nJ2fz2\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\": \"3QTqdz9LyAm2i0sG5XTePsHec3UHWwVsrOL68SYRoAXsafvfAyqtQ+h440+qIBhS\"};\n", "\n", " for (let i = 0; i < js_urls.length; i++) {\n", " const url = js_urls[i];\n", " const element = document.createElement('script');\n", " element.onload = on_load;\n", " element.onerror = on_error.bind(null, url);\n", " element.async = false;\n", " element.src = url;\n", " if (url in hashes) {\n", " element.crossOrigin = \"anonymous\";\n", " element.integrity = \"sha384-\" + hashes[url];\n", " }\n", " console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n", " document.head.appendChild(element);\n", " }\n", " };\n", "\n", " function inject_raw_css(css) {\n", " const element = document.createElement(\"style\");\n", " element.appendChild(document.createTextNode(css));\n", " document.body.appendChild(element);\n", " }\n", "\n", " \n", " var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\"];\n", " var css_urls = [];\n", " \n", "\n", " var inline_js = [\n", " function(Bokeh) {\n", " Bokeh.set_log_level(\"info\");\n", " },\n", " function(Bokeh) {\n", " \n", " \n", " }\n", " ];\n", "\n", " function run_inline_js() {\n", " \n", " if (root.Bokeh !== undefined || force === true) {\n", " \n", " for (var i = 0; i < inline_js.length; i++) {\n", " inline_js[i].call(root, root.Bokeh);\n", " }\n", " if (force === true) {\n", " display_loaded();\n", " }} else if (Date.now() < root._bokeh_timeout) {\n", " setTimeout(run_inline_js, 100);\n", " } else if (!root._bokeh_failed_load) {\n", " console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n", " root._bokeh_failed_load = true;\n", " } else if (force !== true) {\n", " var cell = $(document.getElementById(\"1002\")).parents('.cell').data().cell;\n", " cell.output_area.append_execute_result(NB_LOAD_WARNING)\n", " }\n", "\n", " }\n", "\n", " if (root._bokeh_is_loading === 0) {\n", " console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n", " run_inline_js();\n", " } else {\n", " load_libs(css_urls, js_urls, function() {\n", " console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n", " run_inline_js();\n", " });\n", " }\n", "}(window));" ], "application/vnd.bokehjs_load.v0+json": "\n(function(root) {\n function now() {\n return new Date();\n }\n\n var force = true;\n\n if (typeof root._bokeh_onload_callbacks === \"undefined\" || force === true) {\n root._bokeh_onload_callbacks = [];\n root._bokeh_is_loading = undefined;\n }\n\n \n\n \n if (typeof (root._bokeh_timeout) === \"undefined\" || force === true) {\n root._bokeh_timeout = Date.now() + 5000;\n root._bokeh_failed_load = false;\n }\n\n var NB_LOAD_WARNING = {'data': {'text/html':\n \"
\\n\"+\n \"

\\n\"+\n \"BokehJS does not appear to have successfully loaded. If loading BokehJS from CDN, this \\n\"+\n \"may be due to a slow or bad network connection. Possible fixes:\\n\"+\n \"

\\n\"+\n \"\\n\"+\n \"\\n\"+\n \"from bokeh.resources import INLINE\\n\"+\n \"output_notebook(resources=INLINE)\\n\"+\n \"\\n\"+\n \"
\"}};\n\n function display_loaded() {\n var el = document.getElementById(\"1002\");\n if (el != null) {\n el.textContent = \"BokehJS is loading...\";\n }\n if (root.Bokeh !== undefined) {\n if (el != null) {\n el.textContent = \"BokehJS \" + root.Bokeh.version + \" successfully loaded.\";\n }\n } else if (Date.now() < root._bokeh_timeout) {\n setTimeout(display_loaded, 100)\n }\n }\n\n\n function run_callbacks() {\n try {\n root._bokeh_onload_callbacks.forEach(function(callback) {\n if (callback != null)\n callback();\n });\n } finally {\n delete root._bokeh_onload_callbacks\n }\n console.debug(\"Bokeh: all callbacks have finished\");\n }\n\n function load_libs(css_urls, js_urls, callback) {\n if (css_urls == null) css_urls = [];\n if (js_urls == null) js_urls = [];\n\n root._bokeh_onload_callbacks.push(callback);\n if (root._bokeh_is_loading > 0) {\n console.debug(\"Bokeh: BokehJS is being loaded, scheduling callback at\", now());\n return null;\n }\n if (js_urls == null || js_urls.length === 0) {\n run_callbacks();\n return null;\n }\n console.debug(\"Bokeh: BokehJS not loaded, scheduling load and callback at\", now());\n root._bokeh_is_loading = css_urls.length + js_urls.length;\n\n function on_load() {\n root._bokeh_is_loading--;\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: all BokehJS libraries/stylesheets loaded\");\n run_callbacks()\n }\n }\n\n function on_error(url) {\n console.error(\"failed to load \" + url);\n }\n\n for (let i = 0; i < css_urls.length; i++) {\n const url = css_urls[i];\n const element = document.createElement(\"link\");\n element.onload = on_load;\n element.onerror = on_error.bind(null, url);\n element.rel = \"stylesheet\";\n element.type = \"text/css\";\n element.href = url;\n console.debug(\"Bokeh: injecting link tag for BokehJS stylesheet: \", url);\n document.body.appendChild(element);\n }\n\n const hashes = {\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\": \"dM3QQsP+wXdHg42wTqW85BjZQdLNNIXqlPw/BgKoExPmTG7ZLML4EGqLMfqHT6ON\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\": \"8x57I4YuIfu8XyZfFo0XVr2WAT8EK4rh/uDe3wF7YuW2FNUSNEpJbsPaB1nJ2fz2\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\": \"3QTqdz9LyAm2i0sG5XTePsHec3UHWwVsrOL68SYRoAXsafvfAyqtQ+h440+qIBhS\"};\n\n for (let i = 0; i < js_urls.length; i++) {\n const url = js_urls[i];\n const element = document.createElement('script');\n element.onload = on_load;\n element.onerror = on_error.bind(null, url);\n element.async = false;\n element.src = url;\n if (url in hashes) {\n element.crossOrigin = \"anonymous\";\n element.integrity = \"sha384-\" + hashes[url];\n }\n console.debug(\"Bokeh: injecting script tag for BokehJS library: \", url);\n document.head.appendChild(element);\n }\n };\n\n function inject_raw_css(css) {\n const element = document.createElement(\"style\");\n element.appendChild(document.createTextNode(css));\n document.body.appendChild(element);\n }\n\n \n var js_urls = [\"https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js\", \"https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js\"];\n var css_urls = [];\n \n\n var inline_js = [\n function(Bokeh) {\n Bokeh.set_log_level(\"info\");\n },\n function(Bokeh) {\n \n \n }\n ];\n\n function run_inline_js() {\n \n if (root.Bokeh !== undefined || force === true) {\n \n for (var i = 0; i < inline_js.length; i++) {\n inline_js[i].call(root, root.Bokeh);\n }\n if (force === true) {\n display_loaded();\n }} else if (Date.now() < root._bokeh_timeout) {\n setTimeout(run_inline_js, 100);\n } else if (!root._bokeh_failed_load) {\n console.log(\"Bokeh: BokehJS failed to load within specified timeout.\");\n root._bokeh_failed_load = true;\n } else if (force !== true) {\n var cell = $(document.getElementById(\"1002\")).parents('.cell').data().cell;\n cell.output_area.append_execute_result(NB_LOAD_WARNING)\n }\n\n }\n\n if (root._bokeh_is_loading === 0) {\n console.debug(\"Bokeh: BokehJS loaded, going straight to plotting\");\n run_inline_js();\n } else {\n load_libs(css_urls, js_urls, function() {\n console.debug(\"Bokeh: BokehJS plotting callback run at\", now());\n run_inline_js();\n });\n }\n}(window));" }, "metadata": {}, "output_type": "display_data" } ], "source": [ "import numpy as np\n", "\n", "from bokeh.plotting import figure, show, output_notebook\n", "output_notebook()" ] }, { "cell_type": "code", "execution_count": 11, "metadata": { "tags": [] }, "outputs": [], "source": [ "x = np.linspace(0, 4 * np.pi, 100)\n", "y = np.sin(x)" ] }, { "cell_type": "code", "execution_count": 16, "metadata": { "tags": [] }, "outputs": [ { "data": { "text/html": [ "
GlyphRenderer(
id = '1414', …)
data_source = ColumnDataSource(id='1411', ...),
glyph = Line(id='1412', ...),
hover_glyph = None,
js_event_callbacks = {},
js_property_callbacks = {},
level = 'glyph',
muted = False,
muted_glyph = None,
name = None,
nonselection_glyph = Line(id='1413', ...),
selection_glyph = 'auto',
subscribed_events = [],
syncable = True,
tags = [],
view = CDSView(id='1415', ...),
visible = True,
x_range_name = 'default',
y_range_name = 'default')
\n", "\n" ], "text/plain": [ "GlyphRenderer(id='1414', ...)" ] }, "execution_count": 16, "metadata": {}, "output_type": "execute_result" } ], "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 might not look its best well in the Jupyter Notebook interface (or these docs) but renders great in the 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", "[![](/assets/img/screenshots/plots/bokeh-single.png)](/examples/bokeh-single.html)\n", "\n", "

Click on the image to open the dashboard

" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "### bqplot\n", "\n", "[bqplot](https://github.com/bloomberg/bqplot) is a plotting library that is 100% based on Jupyter widgets 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": 12, "metadata": { "execution": { "iopub.execute_input": "2021-08-10T17:48:27.730066Z", "iopub.status.busy": "2021-08-10T17:48:27.729404Z", "iopub.status.idle": "2021-08-10T17:48:27.797560Z", "shell.execute_reply": "2021-08-10T17:48:27.798094Z" } }, "outputs": [], "source": [ "import numpy as np\n", "from bqplot import *" ] }, { "cell_type": "code", "execution_count": 13, "metadata": { "execution": { "iopub.execute_input": "2021-08-10T17:48:27.803864Z", "iopub.status.busy": "2021-08-10T17:48:27.803097Z", "iopub.status.idle": "2021-08-10T17:48:27.805510Z", "shell.execute_reply": "2021-08-10T17:48:27.805965Z" } }, "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": 14, "metadata": { "execution": { "iopub.execute_input": "2021-08-10T17:48:27.820684Z", "iopub.status.busy": "2021-08-10T17:48:27.814005Z", "iopub.status.idle": "2021-08-10T17:48:27.842081Z", "shell.execute_reply": "2021-08-10T17:48:27.840529Z" }, "tags": [ "body" ] }, "outputs": [ { "data": { "application/vnd.jupyter.widget-view+json": { "model_id": "08287f3a41ed446aaaeb97afc7742eaf", "version_major": 2, "version_minor": 0 }, "text/plain": [ "Figure(axes=[Axis(scale=OrdinalScale()), Axis(orientation='vertical', scale=LinearScale(), tick_format='0.2f')…" ] }, "metadata": {}, "output_type": "display_data" } ], "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": [ "[![](/assets/img/screenshots/plots/bqplot-single.png)](/examples/bqplot-single.html)\n", "\n", "

Click on the image to open the 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 Jupyter widgets 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 Jupyter widgets:\n", "\n", "
\n", "\n", "\n", "
\n", " \n", "
altair-single
\n", "
\n", "\n", "\n", "\n", "\n", "
\n", " \n", "
altair
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
altair-scroll
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
bokeh-single
\n", "
\n", "\n", "\n", "\n", "\n", "
\n", " \n", "
bokeh
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
bqplot-single (runs in mybinder.org)
\n", "
\n", "\n", "\n", "\n", "\n", "
\n", " \n", "
bqplot (runs in mybinder.org)
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
plotly-single
\n", "
\n", "\n", "\n", "\n", "\n", "
\n", " \n", "
plotly
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
plots-mixed-content
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
Iris clustering (runs in mybinder.org)
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
Wealth of Nations (runs in mybinder.org)
\n", "
\n", "\n", "\n", "\n", "
\n", " \n", "
Movie Explorer (runs in mybinder.org)
\n", "
\n", "\n", "\n", "
" ] } ], "metadata": { "celltoolbar": "Tags", "kernelspec": { "display_name": "Python 3 (ipykernel)", "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.8.10" }, "widgets": { "application/vnd.jupyter.widget-state+json": { "state": { "08287f3a41ed446aaaeb97afc7742eaf": { "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "FigureModel", "state": { "_dom_classes": [], "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "FigureModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "Figure", "animation_duration": 0, "axes": [ "IPY_MODEL_7e8c99cbcf7b47ba9f1dda4c59ed6370", "IPY_MODEL_63f8e7044b79435983565ee606f0a9be" ], "background_style": {}, "fig_margin": { "bottom": 60, "left": 60, "right": 60, "top": 60 }, "interaction": null, "layout": "IPY_MODEL_67e56df8d42e46bb84aeee84c597773f", "legend_location": "top-right", "legend_style": {}, "legend_text": {}, "marks": [ "IPY_MODEL_83e26db23f7a4f3bbe82550eff2396f6" ], "max_aspect_ratio": 100, "min_aspect_ratio": 0.01, "padding_x": 0.025, "padding_y": 0.025, "pixel_ratio": null, "scale_x": "IPY_MODEL_72ecf30a52894e5e99a0928292656fb8", "scale_y": "IPY_MODEL_e47da3a5495740e0ad9f2a64751c13e8", "theme": "classic", "title": "", "title_style": {} } }, "10f4e043eabd47109706457a731ac4a1": { "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "LinearScaleModel", "state": { "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "LinearScaleModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "LinearScale", "allow_padding": true, "max": null, "mid_range": 0.8, "min": null, "min_range": 0.6, "reverse": false, "stabilized": false } }, "63f8e7044b79435983565ee606f0a9be": { "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "AxisModel", "state": { "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "AxisModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "Axis", "color": null, "grid_color": null, "grid_lines": "solid", "label": "", "label_color": null, "label_location": "middle", "label_offset": null, "num_ticks": null, "offset": {}, "orientation": "vertical", "scale": "IPY_MODEL_10f4e043eabd47109706457a731ac4a1", "side": null, "tick_format": "0.2f", "tick_rotate": 0, "tick_style": {}, "tick_values": null, "visible": true } }, "67e56df8d42e46bb84aeee84c597773f": { "model_module": "@jupyter-widgets/base", "model_module_version": "1.2.0", "model_name": "LayoutModel", "state": { "_model_module": "@jupyter-widgets/base", "_model_module_version": "1.2.0", "_model_name": "LayoutModel", "_view_count": null, "_view_module": "@jupyter-widgets/base", "_view_module_version": "1.2.0", "_view_name": "LayoutView", "align_content": null, "align_items": null, "align_self": null, "border": null, "bottom": null, "display": null, "flex": null, "flex_flow": null, "grid_area": null, "grid_auto_columns": null, "grid_auto_flow": null, "grid_auto_rows": null, "grid_column": null, "grid_gap": null, "grid_row": null, "grid_template_areas": null, "grid_template_columns": null, "grid_template_rows": null, "height": null, "justify_content": null, "justify_items": null, "left": null, "margin": null, "max_height": null, "max_width": null, "min_height": null, "min_width": null, "object_fit": null, "object_position": null, "order": null, "overflow": null, "overflow_x": null, "overflow_y": null, "padding": null, "right": null, "top": null, "visibility": null, "width": null } }, "72ecf30a52894e5e99a0928292656fb8": { "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "LinearScaleModel", "state": { "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "LinearScaleModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "LinearScale", "allow_padding": false, "max": 1, "mid_range": 0.8, "min": 0, "min_range": 0.6, "reverse": false, "stabilized": false } }, "7e8c99cbcf7b47ba9f1dda4c59ed6370": { "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "AxisModel", "state": { "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "AxisModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "Axis", "color": null, "grid_color": null, "grid_lines": "solid", "label": "", "label_color": null, "label_location": "middle", "label_offset": null, "num_ticks": null, "offset": {}, "orientation": "horizontal", "scale": "IPY_MODEL_92ee6973606a45599e2ad46b376326a6", "side": null, "tick_format": null, "tick_rotate": 0, "tick_style": {}, "tick_values": null, "visible": true } }, "83e26db23f7a4f3bbe82550eff2396f6": { "buffers": [ { "data": "AAAAAAEAAAACAAAAAwAAAAQAAAAFAAAABgAAAAcAAAAIAAAACQAAAA==", "encoding": "base64", "path": [ "x", "value" ] }, { "data": "FD9ivNoM0j90icbGVrbGPy4qRjoJBeg/K79NFpfR6T8RNe3WN7LvPzCCBflTaNo/nggA8iTP1z8helL+X9joP9Ta76a5z9U/+1k/lsPI7T8=", "encoding": "base64", "path": [ "y", "value" ] } ], "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "BarsModel", "state": { "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "BarsModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "Bars", "align": "center", "apply_clip": true, "base": 0, "color": null, "color_mode": "auto", "colors": [ "steelblue" ], "display_legend": false, "enable_hover": true, "fill": true, "interactions": { "hover": "tooltip" }, "label_display": false, "label_display_format": ".2f", "label_display_horizontal_offset": 0, "label_display_vertical_offset": 0, "label_font_style": {}, "labels": [], "opacities": [], "opacity_mode": "auto", "orientation": "vertical", "padding": 0.05, "preserve_domain": {}, "scales": { "x": "IPY_MODEL_92ee6973606a45599e2ad46b376326a6", "y": "IPY_MODEL_10f4e043eabd47109706457a731ac4a1" }, "scales_metadata": { "color": { "dimension": "color" }, "x": { "dimension": "x", "orientation": "horizontal" }, "y": { "dimension": "y", "orientation": "vertical" } }, "selected": null, "selected_style": {}, "stroke": null, "stroke_width": 1, "tooltip": null, "tooltip_location": "mouse", "tooltip_style": { "opacity": 0.9 }, "type": "stacked", "unselected_style": {}, "visible": true, "x": { "dtype": "int32", "shape": [ 10 ], "type": null, "value": {} }, "y": { "dtype": "float64", "shape": [ 10 ], "type": null, "value": {} } } }, "92ee6973606a45599e2ad46b376326a6": { "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "OrdinalScaleModel", "state": { "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "OrdinalScaleModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "OrdinalScale", "allow_padding": true, "domain": [], "reverse": false } }, "e47da3a5495740e0ad9f2a64751c13e8": { "model_module": "bqplot", "model_module_version": "^0.5.31", "model_name": "LinearScaleModel", "state": { "_model_module": "bqplot", "_model_module_version": "^0.5.31", "_model_name": "LinearScaleModel", "_view_count": null, "_view_module": "bqplot", "_view_module_version": "^0.5.31", "_view_name": "LinearScale", "allow_padding": false, "max": 1, "mid_range": 0.8, "min": 0, "min_range": 0.6, "reverse": false, "stabilized": false } } }, "version_major": 2, "version_minor": 0 } } }, "nbformat": 4, "nbformat_minor": 4 }