Interactive histogramming#

In this example, we have a dataset which contains information about the number of taxi ride drop-offs in New York City in the year 2015. The raw data (obtained from the Vaex documentation) has been histogrammed into three dimensions: latitude, longitude and hour-of-the-day.

The goal is to create an interactive visualization with on-the-fly histogramming and smoothing. It will contain:

a central 2D image that shows a longitude-latitude map of the drop-offs, for a single hour-of-the-day slice.
a slider above the main panel which allows to navigate the hour-of-the-day dimension, updating the 2D map.
a 1D figure below the 2D map, displaying the same data but summed along the latitude dimension.
in the 1D panel, we also want to add a gaussian smoothed version of the 1D curve.

[1]:

%matplotlib widget
import scipp as sc
import plopp as pp
from plopp import widgets
from plopp.data import examples
from scipp.scipy.ndimage import gaussian_filter
import ipywidgets as ipw

data = sc.io.load_hdf5(examples.nyc_taxi())
data

Downloading file 'nyc_taxi_data.h5' from 'https://public.esss.dk/groups/scipp/plopp/1/nyc_taxi_data.h5' to '/home/runner/.cache/plopp/1'.

[2]:

# Slider node that provides index to slice
slider = ipw.IntSlider(description='Hour:', min=0, max=23)
slider_node = pp.widget_node(slider)

# Node that actually does the slicing
slice_node = pp.Node(lambda da, ind: da['hour', ind], da=data, ind=slider_node)

# Add a 2D figure to show the NYC map
fig2d = pp.imagefigure(slice_node, norm='log')

# Add a node after the slicing to sum along the latitude dimension
sum_lat = pp.Node(sc.sum, slice_node, dim='latitude')

# Add a node after the sum that performs as Gaussian smoothing
smooth = pp.Node(gaussian_filter, sum_lat, sigma=5)

# Add a 1D figure that will display both raw sum and smoothed data
fig1d = pp.linefigure(sum_lat, smooth, norm='log')

widgets.Box([slider, fig2d, fig1d])  # Container box

[2]:

Below is a preview of the graph of connected nodes:

[3]:

pp.show_graph(fig1d)

[3]: