{ "cells": [ { "cell_type": "markdown", "metadata": { "tags": [] }, "source": [ "Jupyter-flex allows you to create dashboards based on Jupyter Notebooks based on two simple concepts:\n", "\n", "1. Control the layout of the dashboard using markdown headers (`#`, `##` and `###)\n", "2. Define the dashboard components using Jupyter Notebook cell tags (`body` and others)\n", "\n", "## Your first dashboard\n", "\n", "Let's take a very simple Jupyter Notebook with one plot and make a dashboard.\n", "\n", "The notebook is:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [] }, "outputs": [], "source": [ "import numpy as np\n", "import pandas as pd\n", "import altair as alt\n", "from vega_datasets import data" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [] }, "outputs": [], "source": [ "alt.renderers.set_embed_options(actions=False)" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [] }, "outputs": [], "source": [ "np.random.seed(42)" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "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", ")\n", "plot" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "All you need to do to convert this to a dashboard is to add a `body` tag to the that cell that has the plot as the output.\n", "\n", "
How to view and add tags to cells in Jupyter Lab
\n", "You can find a tag editor by clicking the gears icon on the top right icon on the right sidebar\n", "
\n", "How to view and add tags to cells in Jupyter Classic Notebook
\n", "Responsive plots
\n", "\n", " Depending on the plotting library you use you might need to add a bit of code to make the plot occupy all the space of the card. See the plotting page for more info.\n", "
\n", "