Issues adding annotations to heatmap in subplot

📊 Plotly Python
1

I would like to add annotations to the heatmap to simulate a confusion matrix, but with colors. I tried using Figure Factory’s “create_annotated_heatmap”, but I couldn’t add it as a subplot. I would like to add annotations to the graphics_object heatmap.

Thanks!

Note: none of the names/titles for the graphs make sense yet, I just have them as placeholders.

Here is the code:

confidence = 0.91
Accuracy = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
Learning = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
FScore = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

fig = go.Figure()
fig = make_subplots(rows=2, cols=2,
specs=[[{“type”: “pie”}, {“type”: “scatter”}],[{“type”: “heatmap”}, {“type”: “scatter”}]],
subplot_titles=(“Confidence Score”, “Algorithm Accuracy”, “Learning Over Time”, “F-Score”))

names = [“Confidence”, “Doubt”]

pie_chart_values =[confidence, 1-confidence]

#pie chart
fig.add_trace(go.Pie(values = pie_chart_values,name = ‘Gaps0’, labels = names,
marker = dict(colors = [‘darkblue’, ‘royalblue’]),
outsidetextfont = dict(color = ‘#ffffff’,
size = 20),
insidetextfont = dict(color = [’#ffffff’, ‘#ffffff’],
size = 20)),
row = 1, col=1
)

#accuracy graph
fig.add_trace(go.Scatter(
x=Accuracy,
y=[5, 15, 10, 10, 5, 0, 10, 10, 15, 5, 5, 10, 20, 15, 5],
name=‘Gaps’,
mode = ‘lines’,
line = dict(width = 10,
color = ‘#0458de’),
),
row=1, col=2
)

##////
##////
##////

#Confusion Matrix

z = [[200, 450],[648, 2]] ##bottom
x = [‘True’, ‘False’]
y = [‘False’, ‘True’]
z_text = [[str(y) for y in x] for x in z]

fig.add_trace(go.Heatmap(z=z, x=x, y=y, text=z_text,
showscale = False,
name = ‘Heatmap’,
colorscale=‘Blues’,
hoverlabel = dict(bgcolor = ‘white’)),
row=2, col=1
)

##////
##////
##////

#F-Score
fig.add_trace(go.Scatter(
x=FScore,
y=[5, 15, 10, 10, 5, 0, 10, 10, 15, 5, 5, 10, 20, 15, 5],
mode = ‘lines’,
name = “Accruacy Estimate”,
line = dict(width = 10,
color = ‘#68b0f2’)
),
row=2, col=2
)

for annotation in fig[‘layout’][‘annotations’]:
annotation[‘y’] = annotation[‘y’] +0.05

fig[‘layout’][‘annotations’][0][‘font’].update(color=’#ffffff’,
size = 24)
fig[‘layout’][‘annotations’][1][‘font’].update(color=’#ffffff’,
size = 24)
fig[‘layout’][‘annotations’][2][‘font’].update(color=’#ffffff’,
size = 24)
fig[‘layout’][‘annotations’][3][‘font’].update(color=’#ffffff’,
size = 24)

fig[‘layout’][‘legend’].update(bgcolor = ‘#ffffff’,
font = dict(color=’#000000’,
size = 16))

fig.update_layout(paper_bgcolor = ‘#5a678c’,
plot_bgcolor = ‘#5a678c’)

fig.update_xaxes(tickfont=dict(color=‘white’, size=14))
fig.update_yaxes(tickfont=dict(color=‘white’, size=14))

fig.write_html(‘tmp.html’, auto_open=True)

2

Hi @sebas156

Take a look at this answer: [How to create annotated heatmaps in subplots? - #23 by empet], that explains how are updated subplots of annotated heatmap

1 Like
3

Thanks! I actually solved it doing something similar to that solution, although it does feel like my solution is weird. I ended up using the figure factory one anyways, and just specifying where to put the annotations for the layout at the end.

Note: I changed the scatter to a scatter3d from the previous question, and renamed a few things.

Here’s the code for reference.

import pandas as pn
import numpy as np
import plotly.graph_objects as go
from plotly.subplots import make_subplots
import plotly.express as px
import plotly.figure_factory as ff
from PIL import Image
from colour import Color
import plotly.io as pio

import webbrowser
chrome_path=“C:\Program Files (x86)\Google\Chrome\Application\chrome.exe”
webbrowser.register(‘chrome’, None, webbrowser.BackgroundBrowser(chrome_path))
pio.renderers.default = ‘chrome’

confidence = 0.91
Accuracy = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
Learning = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
FScore = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]

fig = go.Figure()
fig = make_subplots(rows=2, cols=2,

specs=[[{“type”: “pie”}, {“type”: “scatter3d”}], [{“type”: “heatmap”}, {“type”: “scatter”}]],
subplot_titles=(“Confidence Score”, “PCA-Reduced Data”, “Confusion Matrix”, “Learning Over Time”))

names = [“Confidence”, “Doubt”]

pie_chart_values =[confidence, 1-confidence]

#pie chart
fig.add_trace(go.Pie(values = pie_chart_values,name = ‘Gaps0’, labels = names,
marker = dict(colors = [‘darkblue’, ‘royalblue’]),
outsidetextfont = dict(color = ‘#ffffff’,
size = 20),
insidetextfont = dict(color = [’#ffffff’, ‘#ffffff’],
size = 20)
),
row = 1, col=1
)

df = px.data.iris()
xTemp = [0,1,2,3,4,5]
yTemp = [0,1,2,3,4,5]
zTemp = [0,1,2,3,4,5]

fig.add_trace(go.Scatter3d( x = df[‘sepal_width’],
y = df[‘sepal_length’],
z = df[‘petal_length’],
name = “PCA Data Plot”,
mode =‘markers’,
marker = dict(
size = 12,
color = df[‘petal_width’],
colorscale =‘Viridis’,
opacity = 0.8)
),
row=1, col=2
)

#Confusion Matrix

z = [[200, 450],[648, 2]] ##bottom

x = [‘True Positive’, ‘True Negative’]
y = [‘Predicted Negative’, ‘Predicted Positive’]

z_text = [[str(y) for y in x] for x in z]

fig2 = ff.create_annotated_heatmap(z=z, ysrc = ‘y2’, xsrc = ‘x2’)

fig.add_trace(go.Heatmap(z=z, x=x, y=y,
showscale = False,
name = ‘Heatmap’,
colorscale=‘Blues’,
hoverlabel = dict(bgcolor = ‘white’),
),
row=2, col=1
)

#F-Score
fig.add_trace(go.Scatter(
x=FScore,
y=[5, 15, 10, 10, 5, 0, 10, 10, 15, 5, 5, 10, 20, 15, 5],
mode = ‘lines’,
name = “Accruacy Estimate”,
line = dict(width = 10,
color = ‘#68b0f2’),
))
),
row=2, col=2
)

for annotation in fig[‘layout’][‘annotations’]:
annotation[‘y’] = annotation[‘y’] +0.05

fig[‘layout’][‘annotations’][0][‘font’].update(color=’#ffffff’,
size = 24)
fig[‘layout’][‘annotations’][1][‘font’].update(color=’#ffffff’,
size = 24)
fig[‘layout’][‘annotations’][2][‘font’].update(color=’#ffffff’,
size = 24)
fig[‘layout’][‘annotations’][3][‘font’].update(color=’#ffffff’,
size = 24)

fig[‘layout’][‘legend’].update(bgcolor = ‘#ffffff’,
font = dict(color=’#000000’,
size = 16))

fig2.layout.annotations[0].update(xref = ‘x1’, yref = ‘y1’, font = dict(color = ‘black’, size = 16))
fig2.layout.annotations[1].update(xref = ‘x1’, yref = ‘y1’, font = dict(color = ‘white’, size = 16))
fig2.layout.annotations[2].update(xref = ‘x1’, yref = ‘y1’, font = dict(color = ‘white’, size = 16))
fig2.layout.annotations[3].update(xref = ‘x1’, yref = ‘y1’, font = dict(color = ‘black’, size = 16))

fig.layout.annotations = fig.layout.annotations + fig2.layout.annotations
print(fig.layout.annotations)

fig.update_layout(paper_bgcolor = ‘#5a678c’,
plot_bgcolor = ‘#5a678c’,
)

fig.update_scenes(xaxis = dict(backgroundcolor= ‘#5a678c’),
yaxis = dict(backgroundcolor= ‘#5a678c’),
zaxis = dict(backgroundcolor= ‘#5a678c’))

fig.update_xaxes(tickfont=dict(color=‘white’, size=14))
fig.update_yaxes(tickfont=dict(color=‘white’, size=14))

fig.write_html(‘tmp.html’, auto_open=True)