Chapter 6. Jupyter Dashboards

In this chapter, we will cover the following recipes:

• What is Jupyter dashboards?
• Creating an R dashboard
• Creating a Python dashboard
• Creating a Julia dashboard
• Developing a JavaScript (Node.js) dashboard

Introduction

Jupyter dashboard is an extension for Jupyter that allows the Notebook developer to create a view of a Notebook in a specific layout without the reader working with the underlying Notebook script coding. There are two layouts:

• Grid layout: The screen is laid out in a grid, allowing you to arrange elements vertically and horizontally within the screen
• Report layout: Close to a standard Notebook, where elements are laid out vertically down the page

What is Jupyter dashboards?

In this recipe, we will learn how to install and enable Jupyter dashboards layout extension to your Notebook. 

Getting ready

You first need to install the extension in your environment. You can use the conda command:

conda install jupyter_dashboards -c conda-forge

You can also use pip to install.

Assuming you have a set of items from a Notebook in mind, you first need to start Jupyter with the extension enabled. You enable the extension once from the command line (every time you start your computer) using the following command:

jupyter nbextension enable jupyter_dashboards --py --sys-prefix

You can then start your Notebook as usual.

How to do it...

When you start your Notebook, there is an icon gadget set at the top of the Notebook that you can work with:

If you hover over the middle icon you get a submenu:

It has the corresponding View menu items:

The icon gadget and menu items are:

• Notebook: Edit the code
• Dashboard Layout:
  • Grid layout: Size and position of the dashboard cells...

Creating an R dashboard

In this section, we create a dashboard in an R Notebook.

How to do it...

We have the following script; it loads and analyzes the data, producing four graphical elements. They are the head of the dataset, regression analysis, comparing sales components as drivers to sales, and comparing ad effectiveness:

 # Load and display same of the data points
 #install.packages("s20x", repos='http://cran.us.r-project.org')
 #install.packages("car", repos='http://cran.us.r-project.org')

 # libraries used
 library(s20x)
 library(car)

 # load and display data - originally at http://www.dataapple.net/wp-content/uploads/2013/04/
 df <- read.csv("grapeJuice.csv",header=T)
 head(df) 

# Calculate ad effectiveness
#
#divide the dataset into two sub dataset by ad_type
 sales_ad_nature = subset(df,ad_type==0)
 sales_ad_family = subset(df,ad_type==1)

# graph the two
 par(mfrow = c(1,2))

 hist(sales_ad_nature$sales,main="",xlab="sales with nature production theme ad",prob=T)
 lines(density...

Create a Python dashboard

We will use somewhat similar graphics and data derived from the same dataset as before to produce a dashboard based on Python coding.

How to do it...

We have the coding as follows.

We first load all the imports used. We also set up matplotlib to draw graphics inline in our Notebook. We also preconfigure the image sizes:

import pandas as pd
import numpy as np
import statsmodels.formula.api as sm
import matplotlib.pylab as plt
%matplotlib inline
from matplotlib.pylab import rcParams
rcParams['figure.figsize'] = 15, 6

We read in the data and display the first few records:

data = pd.read_csv("Documents/grapeJuice.csv")
data.head()

The following is the output:

We scale down the sales figures as the other factors are much smaller. Then we produce a scatter plot of the set:

data["sales"] = data["sales"] / 20
plt.plot(data); #suppresses extraneous matplotlib messages

The following is the output:

Next, we produce a regression analysis on the data:

Y = data['sales'][:-1]
X = data[['price...

Creating a Julia dashboard

In this section, we use a Julia Notebook to load a dataset, produce graphics, analyze the data, and put the entirety into a Jupyter Notebook.

How to do it...

Julia uses many of the packages available in R and/or Python, so the conversion is pretty similar.

Load in the packages used (again, very similar):

#Pkg.add("DataFrames")
#Pkg.add("PyPlot")
#Pkg.add("GLM")
using DataFrames;
using GLM;
using PyPlot;

Read in our DataFrame and look at the start of the table:

juice = readtable("grapeJuice.csv")
size(juice)
names(juice)
head(juice)

Produce a linear regression:

lm = fit(LinearModel, @formula(sales ~ price + ad_type + price_apple + price_cookies), juice)

I found a Julia function to emulate the R pairs() functionality, which provides an x and y graph between all elements of a regression line from https://gist.github.com/ahwillia/43c2cfb894f2bfec6760:

function pairs(data)
    (nobs, nvars) = size(data)
    (fig, ax) = subplots(nvars, nvars, figsize=(8,8))
    subplots_adjust...

Develop a JavaScript (Node.js) dashboard

In this section, we develop a node.js Notebook and change the presentation to a dashboard.

Note

 I could not get the JavaScript kernel to work on Windows. I used a Mac for this section.

How to do it...

We have two JavaScript sections in our Notebook that produce some statistics. In this first section, we read a TSV file, produce the corresponding JSON-formatted output on screen, and select the largest weight from the animal set in the file:

var fs = require("fs");
var d3 = require("d3");
var _ = require("lodash");
fs.readFile("/Users/ToomeyD/Documents//animals.tsv", "utf8", function(error, data) {
     data = d3.tsvParse(data);
     console.log(JSON.stringify(data, null, 4));

     var maxWeight = d3.max(data, function(d) {
         return parseInt(d.avg_weight);
     });
     console.log(maxWeight);
});

This produces the output:

And it produces a section computing basic statistics using the stats package:

const stats = require("stats-analysis");
var arr...