

In [ ]:

    
from __future__ import print_function
import numpy as np
from bqplot import *

Get Data



In [ ]:

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

Basic Heat map



In [ ]:

    
col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc})

Figure(marks=[grid_map], padding_y=0.0)

Heat map with axes



In [ ]:

    
x_sc, y_sc, col_sc = OrdinalScale(), OrdinalScale(reverse=True), ColorScale()

grid_map = GridHeatMap(color=data, scales={'column': x_sc, 'row': y_sc, 'color': col_sc})
ax_x, ax_y = Axis(scale=x_sc), Axis(scale=y_sc, orientation='vertical')

Figure(marks=[grid_map], axes=[ax_x, ax_y], padding_y=0.0)

Non Uniform Heat map



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

## 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 = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])



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 [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

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

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

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 [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

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

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc})
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

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



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, min=-5, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

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

grid_map = GridHeatMap(row=row_data, column=column_data, color=data,
                      scales={'row': y_sc, 'column': x_sc, 'color': col_sc},
                      row_align='end')
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

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



In [ ]:

    
x_sc, y_sc, col_sc = LinearScale(), LinearScale(reverse=True, min=-5, max=15), ColorScale()
ax_x = Axis(scale=x_sc)
ax_y = Axis(scale=y_sc, orientation='vertical')

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

grid_map = GridHeatMap(row=row_data, column=column_data, color=data, 
                       scales={'row': y_sc, 'column': x_sc, 'color': col_sc}, row_align='end')
Figure(marks=[grid_map], padding_y=0.0, axes=[ax_x, ax_y])

Changing opacity and stroke



In [ ]:

    
col_sc = ColorScale()

grid_map = GridHeatMap(color=data, scales={'color': col_sc}, opacity=0.3, stroke='white')
Figure(marks=[grid_map], padding_y=0.0)

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)

col_sc = ColorScale()
grid_map = GridHeatMap(color=data, scales={'color': col_sc}, interactions={'click':'select'},
                      selected_style={'opacity': '1.0'}, unselected_style={'opacity': 0.4})

Figure(marks=[grid_map], padding_y=0.0)

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



In [ ]: