Dash annotated heatmap

Dash Python
1

Hi! I’ve just started re-writing my app from MATLAB to Dash. Dash is awesome! Sorry for the newbie question, but I’m having trouble with the annotated heatmap from figure factory. The basic Heatmap works with no problem. Here is a simplified code sample from my app:

html.Div([
dcc.Graph(
id=‘StyleBox’,
figure={
‘data’: [go.Heatmap(
z=[[1.0,2.0,3.0],
[4.0,5.0,6.0],
[7.0,8.0,9.0]],
)],
‘layout’: go.Layout(title= go.layout.Title(text = ‘Style Box’),
height=300,
paper_bgcolor= ‘whitesmoke’,
),
}
),
],className = ‘six columns’),

it produces a heatmap as expected:

style%20box%20go
style%20box%20go746×634 10.8 KB

However if I try using the annotated heatmap, the graph is blank:
figure={
‘data’: [ff.create_annotated_heatmap(
z=[[1.0,2.0,3.0],
[4.0,5.0,6.0],
[7.0,8.0,9.0]],
)],

image
image686×583 6.8 KB

Thanks for your help!

2

Welcome to Dash! Try figure=ff.create_annotated_heatmap(...)

3

Thanks so much - that works! But with that syntax, how do I add layout attributes?

4

ff.create_annotated_heatmap and all of the px. methods return a figure, which you can update with stuff like fig['layout] = {<your layout>} or fig['layout']['title'] = 'my title' or fig.update_layout(...).

I’d recommend reading through this (new) tutorial which covers it in detail: https://plot.ly/python/creating-and-updating-figures/

1 Like
5

I was just coming back to give an update that I had found the answer…
This post was helpful to me as well : Annotated Heatmap Sorting

I appreciate you being so patient with the newbie questions. It’s so frustrating to get stuck on some dumb syntax issue for hours.

BTW, I think I’m in love with the Dash Datatable :slight_smile:

6

That’s definitely no fun. Thanks for sticking with it!

7

Hi,

i am trying to graph an annotated heatmap as well with the below code:
dcc.Graph(
id=‘heatmap’,
figure={
‘data’:[ff.create_annotated_heatmap(z=[arr1,arr2,arr3,arr4,arr5,arr6], x=[‘3B1M’,‘1M2M’,‘2M3M’,‘3M6M’,‘6M9M’,‘9M1Y’],
y=[‘EUR’,‘GBP’,‘JPY’,‘CHF’,‘NOK’,‘DKK’], colorscale=[[0, ‘red’], [1, ‘green’]])
],
‘layout’: {
‘title’: ‘Heatmap’
}
})

However, when i run it, nothing gets plotted.
The arr1, etc are pandas.core.series.Series type.

The code works when plotting it in jupyter notebook but not DASH. Below is the code that works:
y=[‘EUR’, ‘GBP’, ‘JPY’,‘CHF’,‘NOK’,‘DKK’]
x=[‘3B1M’,‘1M2M’,‘2M3M’,‘3M6M’,‘6M9M’,‘9M1Y’]
z=[arr1, arr2, arr3,arr4,arr5,arr6]
colorscale = [[0, ‘red’], [1, ‘green’]]
fig = ff.create_annotated_heatmap(z, x=x, y=y, colorscale=colorscale)
fig.show()

11

if there are lots of data points, then the annotated text overlap with each other, is there a way to show only portion of it, but be able to use drag the image to see the other part.

12

@dewshrs

You can define a slider that updates the axis range, to see a horizontal part of the heatmap, at each step:
https://plotly.com/~empet/15573/.

1 Like
13

thank you, will try that, is it possible to rename the slider so that it only shows number but not step1, step2,…

14

In the definition of each step you can set a label that is shorter than f'step{k}'.

15

thank you, it worked, and is it possible to pass exact colors for each value instead of colorscale in annotated heatmaps?

16

nevermind, I figured it out.

17

@dewshrs

Heatmap has no attribute, color, but you can use a discrete colorscale, instead See this discussion on how to define it: https://community.plotly.com/t/colors-for-discrete-ranges-in-heatmaps/7780.

18

In the heatmap, I have patches of same color, is it possible to create a custom legend for that?

19

@dewshrs Heatmap has an attached colorbar (when showscale=True), not a legend, for pointing out how z-values are colormapped You can show on the colorbar the values that are mapped on the same patch. Here
https://plotly.com/~empet/15229/heatmap-with-a-discrete-colorscale/#/ you can see how the colorbar is defined as well its tickvals and ticktext.

20

is it possible to only change the size of the heatmap but, keep the color bar same ?

21

Heatmap size is set via layout['width'] and layout['height'], while the colorbar height by colorbar['len']= h, with h in (0,1].

22

but if the height of heatmap is decreased, then the the height of colorbar also decreases even if you put 1, since its based on plot width. And another question, is it possible to plot two separate heatmaps of different layout sizes, side by side, or top and bottom?

23
1 Like