

In [ ]:

    
from __future__ import print_function
import numpy as np
import bqplot.pyplot as plt
from bqplot import LinearScale

Get Data



In [ ]:

    
np.random.seed(0)
data = np.random.randn(10, 10)

Basic Heat map



In [ ]:

    
from ipywidgets import *
fig = plt.figure(padding_y=0.0)
grid_map = plt.gridheatmap(data)
fig



In [ ]:

    
grid_map.display_format = '.2f'



In [ ]:

    
grid_map.font_style = {'font-size': '16px', 'fill':'blue', 'font-weight': 'bold'}

Hide tick_labels and color axis using 'axes_options'



In [ ]:

    
axes_options = {'column': {'visible': False}, 'row': {'visible': False}, 'color': {'visible': False}}



In [ ]:

    
fig = plt.figure(padding_y=0.0)
grid_map = plt.gridheatmap(data, axes_options=axes_options)
fig

Non Uniform Heat map



In [ ]:

    
fig = plt.figure(padding_y=0.0)
plt.scales(scales={'x': LinearScale(), 'y': LinearScale(reverse=True)})

## The data along the rows is not uniform. Hence the 5th row(from top) of the map
## is twice the height of the remaining rows.
row_data = np.arange(10)
row_data[5:] = np.arange(6, 11)
column_data = np.arange(10, 20)

grid_map = plt.gridheatmap(data, row=row_data, column=column_data)
fig



In [ ]:

    
print(row_data.shape)
print(column_data.shape)
print(data.shape)

Alignment of the data with respect to the grid

For a N-by-N matrix, N+1 points along the row or the column are assumed to be end points.



In [ ]:

    
fig = plt.figure(padding_y=0.0)
plt.scales(scales={'x': LinearScale(), 'y': LinearScale(reverse=True)})

row_data = np.arange(11)
column_data = np.arange(10, 21)

grid_map = plt.gridheatmap(data, row=row_data, column=column_data)
fig

By default, for N points along any dimension, data aligns to the start of the rectangles in the grid. The grid extends infinitely in the other direction. By default, the grid extends infintely towards the bottom and the right.



In [ ]:

    
fig = plt.figure(padding_y=0.0)
plt.scales(scales={'x': LinearScale(), 
                   'y': LinearScale(reverse=True, max=15)})

row_data = np.arange(10)
column_data = np.arange(10, 20)

grid_map = plt.gridheatmap(data, row=row_data, column=column_data)
fig

By changing the row_align and column_align properties, the grid can extend in the opposite direction



In [ ]:

    
fig = plt.figure(padding_y=0.0)
plt.scales(scales={'x': LinearScale(), 
                   'y': LinearScale(reverse=True, min=-5, max=15)})

row_data = np.arange(10)
column_data = np.arange(10, 20)

grid_map = plt.gridheatmap(data, row=row_data, column=column_data, row_align='end')
fig

For N+1 points on any direction, the grid extends infintely in both directions



In [ ]:

    
fig = plt.figure(padding_y=0.0)
plt.scales(scales={'x': LinearScale(), 
                   'y': LinearScale(reverse=True, min=-5, max=15)})

row_data = np.arange(9)
column_data = np.arange(10, 20)

grid_map = plt.gridheatmap(data, row=row_data, column=column_data, row_align='end')
fig

Changing opacity and stroke



In [ ]:

    
fig = plt.figure(padding_y=0.0)
grid_map = plt.gridheatmap(data, opacity=0.3, stroke='white', axes_options=axes_options)
fig

Selections on the grid map

Selection on the GridHeatMap works similar to excel. Clicking on a cell selects the cell, and deselects the previous selection. Using the Ctrl key allows multiple cells to be selected, while the Shift key selects the range from the last cell in the selection to the current cell.



In [ ]:

    
data = np.random.randn(10, 10)
fig = plt.figure(padding_y=0.0)
grid_map = plt.gridheatmap(data, interactions={'click':'select'},
                           selected_style={'stroke': 'blue', 'stroke-width': 3}, 
                           axes_options=axes_options)

fig

The selected trait of a GridHeatMap contains a list of lists, with each sub-list containing the row and column index of a selected cell.



In [ ]:

    
grid_map.selected

Registering `on_element_click` event handler



In [ ]:

    
import numpy as np
from IPython.display import display

np.random.seed(0)
data = np.random.randn(10, 10)

figure = plt.figure(padding_y=0.0)
grid_map = plt.gridheatmap(data, interactions={'click': 'select'},
                           selected_style={'stroke': 'blue', 'stroke-width': 3})

from ipywidgets import Output
out = Output()
@out.capture()
def print_event(self, target):
    print(target)
    
# test
print_event(1, 'test output')
grid_map.on_element_click(print_event)

display(figure)
display(out)