I often want to provide some simple interactive visualizations for this blog. I like to include visualization to give some sense of how the data change as various parameters are changed. Examples can be found in Finding sparse solutions to linear systems, Least squares and regularization, and Computer color is only kinda broken.

I have discovered a new tool, Holoviews to create these widgets. I want to create these interactive widgets for my blog, meaning I want to embed these in a static HTML page. Previously, I used Jake Vanderplas’s ipywidgets-static but in this post I’ll walk through creating a widget.

import holoviews as hv
hv.extension('bokeh')
import numpy as np
import pandas as pd

When I create a widget, I’m often showing the result of some function over different parameters. Let’s define that function:

def f(param1, param2, opt_param=0):
    result = param1 + param2
    result += np.random.randn() * opt_param
    return {'param1': param1, 'param2': param2,
            'result': result, 'opt_param': opt_param}

The visualization will use param1 and param2. It will provide some interactivity with opt_param. But of course we need to evaluate this function with these parameters:

param1 = np.logspace(0, 1)
param2 = np.logspace(0, 1)
opt_param = np.linspace(0, 1, num=5)

data = [f(p1, p2, opt_param=op)
        for p1 in param1 for p2 in param2 for op in opt_param]
df = pd.DataFrame(data)

Now, the Holoviews specific material starts though it’s pretty minimal. First, I’m going to convert my pd.DataFrame to a Holoview’s Table:

# ignore extra columns to holoviews doesn't show extra sliders
to_keep = ['param1', 'param2', 'result', 'opt_param']
table = hv.Table(df[to_keep])

Now that we have the data, lets visualize:

%%opts HeatMap (cmap='viridis') [tools=['hover'] xticks=10 yticks=5 colorbar=True toolbar='above' logx=True show_title=False]
%%output filename="holoviews" fig="html"
table.to.heatmap(kdims=['param1', 'param2'], vdims='result')

And that’s an easy-to-create static HTML interactive visualization.

Notes

  • kdims stands for “key dimensions”, vdims stands for “value dimensions”. See Annotating your data for more detail.
  • More detail on these interactive visualization can be found in Gridded Datasets and Tabular Datasets.
    • Using tabular data to show a gridded visualization is not space efficient; an example that uses pandas is at holoviews#1745 (comment)
  • Holoviews uses param to declare parameters for classes… meaning that the documentation is good! Try misspelling a value; param will print a list of accepted values.
    • This means that the code is rather nice; it specifies exactly what parameters can be passed in, and includes documentation.
  • Issue #1745: hv.Table(df).to.image throws warning and error
    • Filed because using table.to.image would remove the lines in the heatmap
  • Issue #84: Improving customizability and layout of widgets
    • Resolving will allow positioning/styling slider