How to view and add tags to cells in Jupyter Notebook
\n", "Terminal
\n", "```\n", "$ jupyter nbconvert --to flex notebook.ipynb\n", "```\n", "\n", "Optionally add the `--execute` flag to execute the notebook before converting it\n", "\n", "Terminal
\n", "```\n", "$ jupyter nbconvert --to flex notebook.ipynb --execute\n", "```\n", "\n", "Open the resulting `.html` file in a browser and the result will be:\n", "\n", "[](/examples/one-plot.html)\n", "\n", "You might notice that the default title of the dashboard is the name of the notebook file, you can customize this using [parameters](#orientation-and-title).\n", "\n", "This is a very simple example, now let's look at the card concept of Jupyter-flex." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Cards\n", "\n", "A card is the object that holds any output components of the dashboard such as plots, text, widgets and more.\n", "The basic components of a card are:\n", "\n", "1. Header will be a level-3 markdown header (`###`).\n", "2. One (or more) tagged output code cells that contain plots tagged with `chart`. In general its a good idea to just have one plot with some text per card\n", "3. One (or more) tagged output markdown cells tagged with `text` that contain some narrative for the dashboard.\n", "3. Footer will be one markdown cell tagged with `footer`\n", "\n", "For example this notebook:" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "import plotly.express as px" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "df = px.data.iris()" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "### Iris dataset" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "# One plot\n", "fig = px.scatter(df, x=\"sepal_width\", y=\"sepal_length\")\n", "fig.show()" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "# Another plot\n", "fig = px.scatter(df, x=\"petal_width\", y=\"petal_length\")\n", "fig.show()" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "text" ] }, "outputs": [], "source": [ "# These are two plots the iris datasets" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "footer" ] }, "outputs": [], "source": [ "# This plot is using plotly." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[](/examples/one-card-full.html)\n", "\n", "You will notice that plots ocupy all the available space equaly, text uses the remaining space." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Multiple cards\n", "\n", "You define a new card by adding a level-3 markdown header (`###`).\n", "\n", "Any output components (plots, text, footer) before a new card this will be part of the previous card.\n", "\n", "Going back to the notebook in the first section we can add a new plot to the by adding two new cells:\n", "\n", "1. One markdown cell with a level 3 (`###`) markdown header\n", "2. One code cell with the `chart` tag" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "### Second plot" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "chart" ] }, "outputs": [], "source": [ "fig = px.scatter(df, x=\"petal_width\", y=\"petal_length\")\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[](/examples/two-plots.html)\n", "\n", "You will notice that the default layout is a single column with cards stacked vertically and sized to fill available browser height." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Sections: multiple columns\n", "\n", "To add another column to the dashboard use a level 2 markdown header (`##`).\n", "\n", "In this case the value of the header is irrelevant its just an indicator to create a new section." ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "## Column" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "chart" ] }, "outputs": [], "source": [ "fig = px.scatter(df, x=\"sepal_length\", y=\"petal_length\")\n", "fig.show()" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "In this case the result would be:\n", "\n", "[](/examples/two-columns.html)\n", "\n", "You can see that the default orientation is to have multiple sections as columns." ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Orientation and title\n", "\n", "You can control the parameters of the dashboard such as title and orientation to be based of rows instead of columns\n", "by tagging a code cell to as `parameters`.\n", "\n", "It's usually a good idea to have this cell at the begining of the notebook.\n", "\n", "Let's change the orientation of the plot to `rows` and add a title of `A Flex dashboard`." ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "parameters" ] }, "outputs": [], "source": [ "flex_title = \"A flex dashboard\"\n", "flex_orientation = \"rows\"" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[](/examples/two-rows.html)\n", "\n" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Learning more\n", "\n", "The [Layout](/layout) page goes in depth about all the options to control the content of the dashboards in Jupyter-flex.\n", "\n", "The [Voila](/voila) page describes how to leverage Voila to create dashboards that use a live Jupyter kernel that enable viewers to change underlying parameters and see the results immediately using [ipywidgets](https://ipywidgets.readthedocs.io/)." ] } ], "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.8.0" } }, "nbformat": 4, "nbformat_minor": 2 }