Heatmap

import hvplot.pandas  # noqa

heatmap can be data has two categorical axes. Data can either be pre-computed into a matrix, or it can be 1d and the aggregation will be computed when rendering.

from bokeh.sampledata import sea_surface_temperature as sst

df = sst.sea_surface_temperature
df.tail()

	temperature
time
2017-03-21 22:00:00+00:00	4.000
2017-03-21 22:30:00+00:00	3.975
2017-03-21 23:00:00+00:00	4.017
2017-03-21 23:30:00+00:00	4.121
2017-03-22 00:00:00+00:00	4.316

In the first example, we’ll make a sea surface temperature calendar of sorts:

df.hvplot.heatmap(x='time.month', y='time.day', C='temperature', 
                  height=500, width=500, colorbar=False)

WARNING:param.HeatMapPlot00915: HeatMap element index is not unique,  ensure you aggregate the data before displaying it, e.g. using heatmap.aggregate(function=np.mean). Duplicate index values have been dropped.

If the value for each section of the heatmap is pre-computed, then use x='index' and y='columns' to plot those values. Note to see how to make this same plot in bokeh, see the bokeh docs.

from bokeh.sampledata.unemployment1948 import data

data = data.set_index('Year').drop('Annual', axis=1).transpose()
data.head()

Year	1948	1949	1950	1951	1952	1953	1954	1955	1956	1957	...	2007	2008	2009	2010	2011	2012	2013	2014	2015	2016
Jan	4.0	5.0	7.6	4.4	3.7	3.4	5.7	5.8	4.7	4.9	...	5.0	5.4	8.5	10.6	9.8	8.8	8.5	7.0	6.1	5.3
Feb	4.7	5.8	7.9	4.2	3.8	3.2	6.3	5.7	4.8	4.7	...	4.9	5.2	8.9	10.4	9.5	8.7	8.1	7.0	5.8	5.2
Mar	4.5	5.6	7.1	3.8	3.3	2.9	6.4	5.2	4.7	4.3	...	4.5	5.2	9.0	10.2	9.2	8.4	7.6	6.8	5.6	5.1
Apr	4.0	5.4	6.0	3.2	3.0	2.8	6.1	4.9	4.1	4.0	...	4.3	4.8	8.6	9.5	8.7	7.7	7.1	5.9	5.1	4.7
May	3.4	5.7	5.3	2.9	2.9	2.5	5.7	4.2	4.2	3.9	...	4.3	5.2	9.1	9.3	8.7	7.9	7.3	6.1	5.3	4.5

5 rows × 69 columns

data.hvplot.heatmap(
    x='columns', 
    y='index', 
    title='US Unemployment 1948—2016', 
    cmap=["#75968f", "#a5bab7", "#c9d9d3", "#e2e2e2", "#dfccce", "#ddb7b1", "#cc7878", "#933b41", "#550b1d"], 
    xaxis='top', 
    rot=70,
    width=800, height=300).opts(
    toolbar=None, 
    fontsize={'title': 10, 'xticks': 5, 'yticks': 5}
)