teduniq
teduniq

Reputation: 77

Separate heatmap ranges for each row in Plotly

I'm trying to build a timeseries heatmap along a 24-hour day on each day of the week, and I want to have each day be subject within its own values only. Here's what I've done in Plotly so far. enter image description here

The problem is the "highest" color only goes to the one on the 2nd row. My desired output, made in Excel, is this one:

enter image description here

Each row clearly shows its own green color since they each of them have separate conditional formatting.

My code:

import plotly.express as px
import pandas as pd

df = pd.read_csv('test0.csv', header=None)
fig = px.imshow(df, color_continuous_scale=['red', 'green'])
fig.update_coloraxes(showscale=False)
fig.show()

The csv file:

0,0,1,2,0,5,2,3,3,5,8,4,7,9,9,0,4,5,2,0,7,6,5,7
1,3,4,9,4,3,3,2,12,15,6,9,1,4,3,1,1,2,5,3,4,2,5,8
9,6,7,1,3,4,5,6,9,8,7,8,6,6,5,4,5,3,3,6,4,8,9,10
8,7,8,6,7,5,4,6,6,7,8,5,5,6,5,7,5,6,7,5,8,6,4,4
3,4,2,1,1,2,2,1,2,1,1,1,1,3,4,4,2,2,1,1,1,2,4,3
3,5,4,4,4,6,5,5,5,4,3,7,7,8,7,6,7,6,6,3,4,3,3,3
5,4,4,5,4,3,1,1,1,1,2,2,3,2,1,1,4,3,4,5,4,4,3,4

Upvotes: 2

Views: 1176

Answers (1)

teduniq
teduniq

Reputation: 77

I've solved it! I had to make the heatmaps by row and combine them.

from plotly.subplots import make_subplots
import plotly.graph_objects as go
import pandas as pd
import calendar

df = pd.read_csv('test0.csv', header=None)
# initialize subplots with vertical_spacing as 0 so the rows are right next to each other
fig = make_subplots(rows=7, cols=1, vertical_spacing=0)
# shift sunday to first position
days = list(calendar.day_name)
days = days[-1:] + days[:-1]

for index, row in df.iterrows():
    row_list = row.tolist()
    sub_fig = go.Heatmap(
        x=list(range(0, 24)), # hours
        y=[days[index]], # days of the week
        z=[row_list], # data
        colorscale=[
            [0, '#FF0000'],
            [1, '#00FF00']
        ],
        showscale=False
    )
    # insert heatmap to subplot
    fig.append_trace(sub_fig, index + 1, 1)

fig.show()

Output:

enter image description here

Upvotes: 2

Related Questions