CSE2DV_CSE5INV_Week_11_lab_worksheet.ipynb

{
  "nbformat": 4,
  "nbformat_minor": 0,
  "metadata": {
    "colab": {
      "provenance": [],
      "collapsed_sections": [],
      "authorship_tag": "ABX9TyMvvU42z8xSDyvL86RsvBaW",
      "include_colab_link": true
    },
    "kernelspec": {
      "name": "python3",
      "display_name": "Python 3"
    },
    "language_info": {
      "name": "python"
    }
  },
  "cells": [
    {
      "cell_type": "markdown",
      "metadata": {
        "id": "view-in-github",
        "colab_type": "text"
      },
      "source": [
        "<a href=\"https://colab.research.google.com/github/rskarbez/colab_notebooks/blob/main/CSE2DV_CSE5INV_Week_11_lab_worksheet.ipynb\" target=\"_parent\"><img src=\"https://colab.research.google.com/assets/colab-badge.svg\" alt=\"Open In Colab\"/></a>"
      ]
    },
    {
      "cell_type": "markdown",
      "source": [
        "# CSE2DV/CSE5INV - Week 10 lab notebook\n",
        "\n",
        "In this week's lab, we're focusing our attention on making *interactive* visualizations. We won't be talking about the visual design of an individual vis; visual design is more about how to convey a particular message or meaning, while interactive design is more about how to enable exploratory data analysis. We don't necessarily know what the data means yet, nor does the user; we're just trying to give them the tools they need to find out.\n",
        "\n",
        "We're going to be using the `bokeh` visualization library to create our interactive visualizations: http://bokeh.org/. Let's jump right in and see `bokeh` in (inter)action:"
      ],
      "metadata": {
        "id": "DWLc8fjCzoRh"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "# Standard imports \n",
        "\n",
        "# bokeh.io, as the name suggests, handles system input/output in bokeh.\n",
        "# \n",
        "# We're using output_notebook because we're running in a (Colab) notebook.\n",
        "# \n",
        "# show is the command to actually render a bokeh plot.\n",
        "from bokeh.io import output_notebook, show\n",
        "output_notebook()"
      ],
      "metadata": {
        "id": "QRXShA371amc"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "code",
      "source": [
        "# Plot a complex chart with interactive hover in a few lines of code\n",
        "\n",
        "# bokeh.models provides Bokeh model “building block” classes.\n",
        "#\n",
        "# \"One of the central design principals of Bokeh is that, regardless of how the \n",
        "#  plot creation code is spelled in Python (or other languages), the result is \n",
        "#  an object graph that encompasses all the visual and data aspects of the \n",
        "#  scene. Furthermore, this scene graph is to be serialized, and it is this \n",
        "#  serialized graph that the client library BokehJS uses to render the plot. \n",
        "#  The low-level objects that comprise a Bokeh scene graph are called Models.\"\"\n",
        "#\n",
        "# The ColumnDataSource (CDS) is the core of most Bokeh plots. \n",
        "# It provides the data to the glyphs of your plot.\n",
        "# Think of a ColumnDataSource as a collection of sequences of data that each \n",
        "#   have their own, unique column name.\n",
        "# (Basically, a column is an attribute.)\n",
        "from bokeh.models import ColumnDataSource\n",
        "\n",
        "# By default, the hover tool displays informational tooltips whenever the cursor\n",
        "#  is directly over a glyph. The data to show comes from the glyph’s data \n",
        "#  source, and what to display is configurable with the tooltips property that \n",
        "#  maps display names to columns in the data source, or to special known \n",
        "#  variables.\n",
        "# (Basically, use HoverTool to create tooltips.)\n",
        "from bokeh.models import HoverTool\n",
        "\n",
        "# The bokeh.plotting API is Bokeh’s primary interface, and lets you focus on \n",
        "#  relating glyphs to data. It automatically assembles plots with default \n",
        "#  elements such as axes, grids, and tools for you.\n",
        "# The figure function is at the core of the bokeh.plotting interface. \n",
        "# This function creates a Figure model that includes methods for adding \n",
        "#  different kinds of glyphs to a plot. This function also takes care of \n",
        "#  composing the various elements of your visualization, such as axes, grids, \n",
        "#  and default tools.\n",
        "from bokeh.plotting import figure\n",
        "\n",
        "# autompg_clean is the name of our pandas dataset, it contains data about cars \n",
        "#  and their fuel consumption (in miles per gallon).\n",
        "from bokeh.sampledata.autompg import autompg_clean as df\n",
        "\n",
        "# bokeh.transform contains helper functions for applying client-side \n",
        "#  computations such as transformations to data fields or ColumnDataSource \n",
        "#  expressions.\n",
        "# The factor_cmap() function creates a dict that applies a client-side \n",
        "#  CategoricalColorMapper transformation to a ColumnDataSource column.\n",
        "# (Basically, it assigns a different color to each category.)\n",
        "from bokeh.transform import factor_cmap\n",
        "\n",
        "# Indicate that the 'cyl' (number of cylinders) and 'yr' (model year) attributes \n",
        "#  should be treated as strings (text attributes).\n",
        "df.cyl = df.cyl.astype(str)\n",
        "df.yr = df.yr.astype(str)\n",
        "\n",
        "# Hierarchically group the data in our data frame first by the 'cyl' attribute \n",
        "#  (number of cylinders), and then by the 'mfr' attribute (manufacturer)\n",
        "group = df.groupby(by=['cyl', 'mfr'])\n",
        "# Create a ColumnDataSource object from our grouped datafrme.\n",
        "source = ColumnDataSource(group)\n",
        "\n",
        "# Create a Figure object with the following parameters:\n",
        "#  plot_width=800  => figure is 800 pixels wide\n",
        "#  plot_height=300 => figure is 300 pixels high\n",
        "#  title=\"Mean ...\"=> Sets the title of the plot\n",
        "#  x_range=group   => Customizes the x-axis to group data as described in group\n",
        "#  toolbar_location=None => Hide the bokeh toolbar\n",
        "#                           (By default, a toolbar would appear above the view.)\n",
        "#  tools=\"\"        => Don't include any tools\n",
        "p = figure(plot_width=800, plot_height=300, title=\"Mean MPG by # Cylinders and Manufacturer\",\n",
        "           x_range=group, toolbar_location=None, tools=\"\")\n",
        "\n",
        "# Configure the x-axis in our Figure p\n",
        "#  xgrid.grid_line color         => color of the grid lines in the x direction\n",
        "#  xaxis.axis_label              => label of the x-axis\n",
        "#  xaxis.major_label_orientation => angle of the label text measured in radians\n",
        "#   (This is what makes the manufacturer labels appear tilted.)\n",
        "p.xgrid.grid_line_color = None\n",
        "p.xaxis.axis_label = \"Manufacturer grouped by # Cylinders\"\n",
        "p.xaxis.major_label_orientation = 1.2\n",
        "\n",
        "# Create a color map with a different color for each cylinder count\n",
        "index_cmap = factor_cmap('cyl_mfr', palette=['#2b83ba', '#abdda4', '#ffffbf', '#fdae61', '#d7191c'], \n",
        "                         factors=sorted(df.cyl.unique()), end=1)\n",
        "# In our Figure p, create a 'vbar' (vertical bar) chart\n",
        "#  x='cyl_mfr' => x position given by 'cyl_mfr' attribute\n",
        "#  top='mpg_mean' => max height of each bar given by 'mpg_mean' attribute\n",
        "#  width=1        => each bar has width 1\n",
        "#  source=source  => Our (data) source is our ColumnDataSource source variable\n",
        "#  fill_color=index_cmap => The color of each bar is given by our index_cmap\n",
        "#  hover_line_color=\"darkgrey\" => The selection outline for our tooltips is grey\n",
        "#  hover_fill_color=\"index_cmap\" => Selecting a bar doesn't change its color\n",
        "#    (Rather, it uses the same fill color we were already using: index_cmap)\n",
        "p.vbar(x='cyl_mfr', top='mpg_mean', width=1, source=source,\n",
        "       line_color=\"white\", fill_color=index_cmap, \n",
        "       hover_line_color=\"darkgrey\", hover_fill_color=index_cmap)\n",
        "\n",
        "# Add tools to our Figure p\n",
        "# Specifically, add a HoverTool which provides tooltip information\n",
        "p.add_tools(HoverTool(tooltips=[(\"MPG\", \"@mpg_mean\"), (\"Cyl, Mfr\", \"@cyl_mfr\")]))\n",
        "\n",
        "# Put it all together and render the Figure\n",
        "show(p)"
      ],
      "metadata": {
        "id": "G7Z7_wyJ1qR6"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "OK, so you might notice that the code we needed to create this figure was just a *bit* more complicated than what we needed for our `seaborn` plots a couple of weeks ago. That's true, but we're doing a lot more with this vis. `bokeh` is a much more powerful and configurable visualization library, and it isn't built on top of `matplotlib` like `seaborn` was.\n",
        "\n",
        "Let's look at another example that focuses even more on interactivity. The source code for this example is available at: https://github.com/bokeh/bokeh/blob/branch-3.0/examples/server/app/sliders.py\n",
        "\n",
        "(More example bokeh apps are available here: https://demo.bokeh.org/. The source code for each of these apps can be found in this github directory: https://github.com/bokeh/bokeh/blob/branch-3.0/examples/server/app/. The links are broken most places on the internet.)"
      ],
      "metadata": {
        "id": "iuKsgY7_AAcM"
      }
    },
    {
      "cell_type": "code",
      "source": [
        "# Create and deploy interactive data applications\n",
        "\n",
        "from IPython.display import IFrame\n",
        "IFrame('https://demo.bokeh.org/sliders', width=900, height=500)"
      ],
      "metadata": {
        "id": "pq_gHSm26b45"
      },
      "execution_count": null,
      "outputs": []
    },
    {
      "cell_type": "markdown",
      "source": [
        "`bokeh` has very good tutorials and documentation. So as not to duplicate effort, I will point you toward some tutorials and examples which you can dive into as deeply as you would like. (I suggest starting from the beginning, and trying to get as close to LINKING AND INTERACTIONS as you can, given the topic of this week's lecture.)\n",
        "\n",
        "*   [Basic plotting](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/01%20-%20Basic%20Plotting.ipynb)\n",
        "*   [Styling and theming](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/02%20-%20Styling%20and%20Theming.ipynb)\n",
        "*   [Data sources and transformations](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/03%20-%20Data%20Sources%20and%20Transformations.ipynb)\n",
        "*   [Annotations](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/04%20-%20Adding%20Annotations.ipynb)\n",
        "*   [Layouts](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/05%20-%20Presentation%20Layouts.ipynb)\n",
        "*   [LINKING AND INTERACTIONS](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/06%20-%20Linking%20and%20Interactions.ipynb)\n",
        "*   [Bar and categorical data plots](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/07%20-%20Bar%20and%20Categorical%20Data%20Plots.ipynb)\n",
        "*   [Graph and network plots in bokeh](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/08%20-%20Graph%20and%20Network%20Plots.ipynb)\n",
        "*   [Geospatial plots in bokeh](https://notebooks.gesis.org/binder/jupyter/user/bokeh-bokeh-notebooks-ueuzscsp/notebooks/tutorial/09%20-%20Geographic%20Plots.ipynb)\n",
        "*   https://developers.refinitiv.com/en/article-catalog/article/bokeh--an-interactive-data-visualization-library-in-codebook (This is not from `bokeh` directly, but from Refinitiv.com, which is apparently a financial data and infrastructure provider. Unsurprisingly, the focus is heavily on financial data, but the examples are very thorough.)\n",
        "*   https://thedatafrog.com/en/articles/interactive-visualization-bokeh-jupyter/ (Also not from `bokeh`, but a decent example of how to handle interactivity in a post on The Data Frog.)\n",
        "\n"
      ],
      "metadata": {
        "id": "B_FGWC7pFffJ"
      }
    },
    {
      "cell_type": "markdown",
      "source": [
        "That is it for this lab, and for new lab content this semester. We've gone from Tableau to Python with Bokeh, with a couple of stops in between.\n",
        "\n",
        "Next week's - Week 12's - labs will be devoted to revision, exam prep, and questions.\n",
        "\n",
        "Thanks for your hard work throughout the semester. See you one last time next week!"
      ],
      "metadata": {
        "id": "I0_k1zuYI2MD"
      }
    }
  ]
}