Page Layout and Dashboarding

nbinteract gives basic page layout functionality using special comments in your code. Include one or more of these markers in a Python. Outputting the HTML code by nbinteract add their corresponding CSS classes to the generated cells.

Marker Description CSS class added
nbi:left Floats cell to the left nbinteract-left
nbi:right Floats cell to the right nbinteract-right
nbi:hide_in Hides cell input nbinteract-hide_in
nbi:hide_out Hides cell output nbinteract-hide_out

By default, only the full template will automatically provide styling for these classes. For other templates, nbinteract assumes that the embedding page will use the CSS classes to style the cells.

You can use the layout markers to create simple dashboards. In this page, we create a dashboard using a dataset of trending videos on YouTube. We first create a dashboard showing the code used to generate the plots. Further down the page, we replicate the dashboard without showing the code.

# nbi:hide_in
import warnings
# Ignore numpy dtype warnings. These warnings are caused by an interaction
# between numpy and Cython and can be safely ignored.
# Reference: https://stackoverflow.com/a/40846742
warnings.filterwarnings("ignore", message="numpy.dtype size changed")
warnings.filterwarnings("ignore", message="numpy.ufunc size changed")

import numpy as np
import matplotlib.pyplot as plt
import pandas as pd
import nbinteract as nbi

# Jupyter Specifics
#
import ipywidgets as widgets
# from ipywidgets import interact, interactive, fixed, interact_manual
from ipywidgets.widgets import interact, IntSlider, FloatSlider, Layout


np.set_printoptions(threshold=20, precision=2, suppress=True)
pd.options.display.max_rows = 7
pd.options.display.max_columns = 8
pd.set_option('precision', 2)

# This option stops scientific notation for pandas
pd.set_option('display.float_format', '{:.2f}'.format)

style = {'description_width': '150px'}
slider_layout = Layout(width='90%')

# Some Magics
#
%matplotlib inline

# nbi:hide_in
def df_interact(df, nrows=7, ncols=7):
    '''
    Outputs sliders that show rows and columns of df
    '''
    def peek(row=0, col=0):
        return df.iloc[row:row + nrows, col:col + ncols]
    if len(df.columns) <= ncols:
        interact(peek, row=(0, len(df) - nrows, nrows), col=fixed(0))
    else:
        interact(peek,
                 row=(0, len(df) - nrows, nrows),
                 col=(0, len(df.columns) - ncols))
    print('({} rows, {} columns) total'.format(df.shape[0], df.shape[1]))

# nbi:hide_in
videos = pd.read_csv('https://github.com/SamLau95/nbinteract/raw/master/notebooks/youtube_trending.csv',
                     parse_dates=['publish_time'],
                     index_col='publish_time')

df_interact(videos)

(2435 rows, 8 columns) total

Dashboard 1

# nbi:left
options = {
    'title': 'Views for Trending Videos',
    'xlabel': 'Date Trending',
    'ylabel': 'Views [1k]',
    'animation_duration': 500,
    'aspect_ratio': 1.0,
}

def xs(channel):
    return videos.loc[videos['channel_title']
            == channel].index

def ys(xs):    
    return (videos.loc[xs, 'views'])/1000




nbi.scatter(xs, ys,
  channel =
    videos['channel_title'].unique()[9:15],
    options = options)

# nbi:right
options={
    'ylabel': 'Proportion per Unit [1k]',
    'xlabel': 'Units',
    'bins': 100,
    'aspect_ratio': 1.0,
}

def values(col):
    vals = videos[col]
    return (vals[vals < vals.quantile(0.8)])/1000






nbi.hist(
 values,col =
 widgets.ToggleButtons(
  options =
    ['comment_count', 'likes', 'dislikes', 'views']), 
  options = options)

Dashboard 2

This dashboard example is using the same widgets used for Dashboard 1, but without showing the code.

# nbi:hide_in
df_interact(videos)

(2435 rows, 8 columns) total

# nbi:hide_in
# nbi:left
options = {
    'title': 'Views for Trending Videos',
    'xlabel': 'Date Trending',
    'ylabel': 'Views [1k]',
    'animation_duration': 500,
    'aspect_ratio': 1.0,
}

def xs(channel):
    return videos.loc[videos['channel_title'] == channel].index

def ys(xs):    
    return (videos.loc[xs, 'views'])/1000

nbi.scatter(xs, ys,
  channel=videos['channel_title'].unique()[9:15],
  options = options)

# nbi:hide_in
# nbi:right
options={
    'ylabel': 'Proportion per Unit [1k]',
    'xlabel': 'Units',
    'bins': 100,
    'aspect_ratio': 1.0,
}

def values(col):
    vals = videos[col]
    return (vals[vals < vals.quantile(0.8)])/1000

nbi.hist(
    values,col =
    widgets.ToggleButtons(
      options =
        ['comment_count', 'likes', 'dislikes', 'views']), 
      options = options)