Colors for discrete ranges in heatmaps

📊 Plotly Python
21

If someone is still looking this question 5 years later, here is a little bit related problem and solution.

I had NaNs and zeros as values on the heatmap scale. Having such values in the scale will squeeze the rest of the heatmap scale. E.g. if you have 101, 100.5, 100, 99.5 and then NaN/0 at the last value then the heatmap is unreadable as Plotly scales everything 101…0 instead of 101…99.

The workaround for this is to convert your value items to strings, so Plotly won’t treat them as a number. Each scale value becomes a discrete item.

image
image2298×1162 178 KB

Below is what I did. [You can find the full heatmap visualisation code here](file:///Users/moo/code/executor/docs/build/html/programming/api/execution/help/tradeexecutor.analysis.grid_search.visualise_heatmap_2d.html#tradeexecutor.analysis.grid_search.visualise_heatmap_2d)

Example Python code:

def visualise_heatmap_2d(
        result: pd.DataFrame,
        parameter_1: str,
        parameter_2: str,
        metric: str,
        color_continuous_scale='Bluered_r',
        continuous_scale: bool | None = None,
) -> Figure:
    """Draw a heatmap square comparing two different parameters.

    Directly shows the resulting matplotlib figure.

    :param parameter_1:
        Y axis

    :param parameter_2:
        X axis

    :param metric:
        Value to examine

    :param result:
        Grid search results as a DataFrame.

        Created by :py:func:`analyse_grid_search_result`.

    :param color_continuous_scale:
        The name of Plotly gradient used for the colour scale.

    :param continuous_scale:
        Are the X and Y scales continuous.

        X and Y scales cannot be continuous if they contain values like None or NaN.
        This will stretch the scale to infinity or zero.

        Set `True` to force continuous, `False` to force discreet steps, `None` to autodetect.

    :return:
        Plotly Figure object
    """

    # Reset multi-index so we can work with parameter 1 and 2 as series
    df = result.reset_index()

    # Detect any non-number values on axes
    if continuous_scale is None:
        continuous_scale = not(df[parameter_1].isna().any() or df[parameter_2].isna().any())

    # setting all column values to string will hint
    # Plotly to make all boxes same size regardless of value
    if not continuous_scale:
        df[parameter_1] = df[parameter_1].astype(str)
        df[parameter_2] = df[parameter_2].astype(str)

    df = df.pivot(index=parameter_1, columns=parameter_2, values=metric)

    # Format percents inside the cells and mouse hovers
    if metric in PERCENT_COLS:
        text = df.applymap(lambda x: f"{x * 100:,.2f}%")
    else:
        text = df.applymap(lambda x: f"{x:,.2f}")

    fig = px.imshow(
        df,
        labels=dict(x=parameter_2, y=parameter_1, color=metric),
        aspect="auto",
        title=metric,
        color_continuous_scale=color_continuous_scale,
    )

    fig.update_traces(text=text, texttemplate="%{text}")

    fig.update_layout(
        title={"text": metric},
        height=600,
    )
    return fig