基于Plotly实现区间填充式类热图的技术需求

我有一个3列的多行多样本数据集，需要绘制类热图，但要求颜色填充覆盖连续位置区间，而非仅离散位置点。

原始数据集 #

Name    position    category
Sample1 15500   1
Sample1 15800   2
Sample1 16200   2
Sample1 17200   3
Sample1 17400   3
Sample1 17700   3
Sample1 18300   2
Sample1 20010   2
Sample1 22120   1
Sample1 30000   3
Sample2 15880   1
Sample2 16200   1
Sample2 16900   3
Sample2 18200   3
Sample2 18500   2
Sample2 20400   1
Sample2 21300   2
Sample2 24800   3
Sample2 26000   1
Sample2 30000   3

原有尝试（仅显示离散点） #

最初尝试将数据转为透视表后用px.imshow绘制，但得到的图表只在离散位置点显示颜色，无法实现连续区间填充：

import pandas as pd
import numpy as np
import plotly.express as px
import plotly.graph_objects as go
    
sample_pivot=sample.pivot_table(columns="position" , index= "Name", values="category")
fig = px.imshow(sample_pivot)
fig.update_xaxes(range=[1, 35000])
fig.show() 

区间填充需求示例 #

以Sample1为例，期望的颜色区间为：

• 1-15500 --> 深蓝色
• 15501-16200 --> 橙红色
• 16201-17700 --> 黄色
• 17701-20010 --> 橙红色
• 20011-22120 --> 深蓝色
• 22121-30000 --> 黄色

解决方案：构造区间数据后用Plotly矩形填充 #

要实现连续区间的颜色填充，需先为每个样本生成完整的位置区间及对应类别，再用Plotly添加矩形色块。

步骤1：预处理数据，生成区间 #

对每个样本的位置排序，计算每个类别的起始和结束位置：

import pandas as pd
import plotly.graph_objects as go

# 假设数据已加载到sample变量中（可通过pd.read_csv读取）
# sample = pd.read_csv("your_data_file.csv", sep="\t")

# 按样本名称和位置排序
sample_sorted = sample.sort_values(by=["Name", "position"])

# 计算每个区间的起始位置：上一个位置+1，第一个区间起始为1
sample_sorted["start_pos"] = sample_sorted.groupby("Name")["position"].shift(1).fillna(0).astype(int) + 1
# 区间结束位置为当前记录的position
sample_sorted["end_pos"] = sample_sorted["position"]

# 处理每个样本的最后一个区间，将结束位置设为35000（与原x轴范围一致）
last_rows = sample_sorted.groupby("Name").tail(1)
sample_sorted.loc[last_rows.index, "end_pos"] = 35000

步骤2：定义类别与颜色映射 #

color_map = {
    1: "darkblue",
    2: "orangered",
    3: "yellow"
}

步骤3：绘制区间色块 #

创建Plotly图表，为每个区间添加矩形，并配置坐标轴和图例：

fig = go.Figure()

# 为每个样本分配y轴位置，保证每个样本在y轴上占据独立区块
samples = sample_sorted["Name"].unique()
y_pos = {sample: idx for idx, sample in enumerate(samples)}

# 遍历所有区间，添加对应颜色的矩形
for _, row in sample_sorted.iterrows():
    fig.add_shape(
        type="rect",
        x0=row["start_pos"],
        x1=row["end_pos"],
        y0=y_pos[row["Name"]] - 0.4,
        y1=y_pos[row["Name"]] + 0.4,
        fillcolor=color_map[row["category"]],
        line_width=0  # 隐藏矩形边框
    )

# 配置坐标轴样式
fig.update_layout(
    xaxis_title="Position",
    yaxis_title="Sample",
    yaxis=dict(
        tickmode="array",
        tickvals=list(y_pos.values()),
        ticktext=list(y_pos.keys())
    ),
    xaxis=dict(range=[0, 35000])
)

# 添加图例，对应类别与颜色
for cat, color in color_map.items():
    fig.add_trace(go.Scatter(
        x=[None], y=[None],
        mode="markers",
        marker=dict(size=12, color=color),
        name=f"Category {cat}"
    ))

fig.show()

内容的提问来源于stack exchange，提问作者Empyrean rocks