Plotly_Create_Heatmap.md

Template request | Bug report | Generate Data Product

Tags: #plotly #chart #heatmap #dataviz #snippet #operations #image #html

Author: Florent Ravenel

Description: This notebook provides an example of how to create a heatmap using the Plotly library.

Input

Import libraries

import naas
import plotly.graph_objects as go
import plotly.express as px
import pandas as pd

Variables

title = "Heatmap"

# Output paths
output_image = f"{title}.png"
output_html = f"{title}.html"

Get data

data = [
    [54.25, 65, 52, 51, 49],
    [20, 16, 60, 80, 30],
    [30, 60, 51, 59, 20],
    [40, 30, 12, 25, 20],
]
df = pd.DataFrame(data)
df

Model

Create Heatmap

config = {"displayModeBar": False}


def update_layout(
    fig,
    title=None,
    plot_bgcolor=None,
    width=1200,
    height=800,
    showlegend=None,
    margin=None,
):
    fig.update_layout(
        title=title,
        plot_bgcolor=plot_bgcolor,
        width=width,
        margin=margin,
        height=height,
        showlegend=showlegend,
    )
    return fig


def heatmap(
    df,
    x,
    y,
    x_label,
    y_label,
    color,
    colorscale=[[0, "#d94228"], [0.5, "#d94228"], [0.5, "#5ee290"], [1.0, "#5ee290"]],
    title=None,
    margin=None,
):
    fig = go.Figure()
    fig = px.imshow(df, labels=dict(x=x_label, y=y_label, color=color), x=x, y=y)
    fig.update_xaxes(side="top")
    fig.update_traces(xgap=5, selector=dict(type="heatmap"))
    fig.update_traces(ygap=5, selector=dict(type="heatmap"))
    fig.update_traces(
        dict(showscale=False, coloraxis=None, colorscale=colorscale),
        selector={"type": "heatmap"},
    )
    fig = update_layout(fig, title=title, margin=margin)
    fig.show(config=config)
    return fig


fig = heatmap(
    df,
    x=["Global", "Americas", "EMEA", "Asia", "Oceania"],
    y=["Product 1", "Product 2", "Product 3", "Product 4"],
    x_label="Business lines",
    y_label="Products",
    color="Sales",
    title=title,
    margin=dict(l=0, r=0, t=150, b=50),
)

Output

Export in PNG and HTML

fig.write_image(output_image, width=1200)
fig.write_html(output_html)

Generate shareable assets

link_image = naas.asset.add(output_image)
link_html = naas.asset.add(output_html, {"inline": True})

# -> Uncomment the line below to remove your assets
# naas.asset.delete(output_image)
# naas.asset.delete(output_html)