plotly.jsのheatmapグラフ

<div id="plot"></div>

<script>
const x = [0.20403972570131645, 0.4916764106252982, 0.77931309554928]
const y = [0.16395561645008805, 0.4571736709682602, 0.7503917254864324]
const z = [
    [0.0, 0.0, 1.0],
    [1.0, 0.0, 2.0],
    [2.0, 2.0, 2.0]
]

const trace = {
    type: "heatmap",
    x: x,
    y: y,
    z: z,
    colorscale: "Viridis"
}

const layout = {
    title: {text: "heatmap sample"},
    xaxis: {
        title: {
            text: "X",
            font: {size: 24}
        },
        tickfont: {size: 24},
    },
    yaxis: {
        title: {
            text: "Y",
            font: {size: 24}
        },
        tickfont: {size: 24},
    },
}

Plotly.newPlot("plot", [trace], layout);
</script>

def heatmap_data():
    x = np.random.random(10).tolist()
    y = np.random.random(10).tolist()
    H, xedges, yedges = np.histogram2d(x, y, bins=(3, 3))

    xcenters = ((xedges[:-1] + xedges[1:]) / 2).tolist()
    ycenters = ((yedges[:-1] + yedges[1:]) / 2).tolist()

    print(xcenters)
    print(ycenters)
    print(H.T.tolist())