Heatmaps with padding gaps in Plotly

This post will introduce you to xgap and ygap fields for Plotly Heatmaps.

You can set horizontal and vertical gap (in pixels) between the heatmap bricks using these fields.

We will create two different plots, one with the padding and another without it.
The plots will show events per weekday and time of day.

import plotly.plotly as py
import plotly.graph_objs as go

from random import randint

We are using randomly generated data to use in the plots.

The variable hours represents the hours in a day.

hours = ['00','01','02','03','04','05','06','07','08','09','10', '11','12','13','14','15','16','17','18','19','20','21','22','23']

The variable days represents all the days in a week.

days = ['Saturday','Friday','Thursday','Wednesday','Tuesday','Monday','Sunday']

Using the randint function, we will generate the events in the range from 1000 to 1800.

events = [[randint(1000, 1800) for j in range(24)] for i in range(7)]

Heatmap without padding

data = [go.Heatmap(
  z = events,
  y = days,
  x = hours,
  colorscale = 'Viridis'
)]

layout = go.Layout(
  title = 'Events per weekday & time of day',
  xaxis = dict(
    tickmode = 'linear'
  )
)

fig = go.Figure(data=data, layout=layout)

py.plot(fig, filename='heatmap-without-padding')

Heatmap with padding

We are setting both horizontal and vertical padding of 5 pixels.

data = [go.Heatmap(
  z = events,
  y = days,
  x = hours,
  xgap = 5,
  ygap = 5,
  colorscale = 'Viridis'
)]

layout = go.Layout(
  title = 'Events per weekday & time of day',
  xaxis = dict(
    tickmode = 'linear'
  )
)

fig = go.Figure(data=data, layout=layout)

py.plot(fig, filename='heatmap-with-padding')