Altair: 'bin-linear' not working as expected for piecewise color palettes

[LukeMathWalker]

I have been working on a heatmap for service availability: we'd like to be able to set breakpoints and use a different color palette in each segment of the color range (e.g. green to yellow between 100 and 99, yellow to red between 99 and 80, etc.).

'bin-linear' type and domain/range with more than 2 items seem to be the way to achieve it, but we observed a weird behaviour.

This is the minimal code example:

import altair as alt
import pandas as pd
import numpy as np

# Compute x^2 + y^2 across a 2D grid
x, y = np.meshgrid(range(-5, 5), range(-5, 5))
z = x ** 2 + y ** 2

# Convert this grid to columnar data expected by Altair
source = pd.DataFrame({'x': x.ravel(),
                     'y': y.ravel(),
                     'z': z.ravel()})

alt.Chart(source).mark_rect().encode(
    alt.Color('z:Q', scale=alt.Scale(domain=[0, 25, 49, 50], 
                                     range=["black", "red", "yellow", "green"], 
                                     type='bin-linear')),
    x='x:O',
    y='y:O',
).save("bug.html")

If I open "bug.html", I see:

My "breakpoints" have not been honored. If I select "Open in Vega Editor" in the HTML page, instead, I get:

My breakpoints work correctly!

Any idea what might be the cause of this behaviour difference?

[jakevdp]

This is an issue in Vega-Lite 2, which has been fixed in Vega-Lite 3. Vega-Lite 3 is not yet released, which is why Altair does not yet use it. However, the vega-editor is running on the Vega-Lite 3 pre-release, which is why your spec works properly there.

Once Vega-Lite 3 is released and we update Altair to version 3, then your code will work as expected. Until then, there's no workaround that I know of.

[LukeMathWalker]

Ok, that's good to know! Thanks for looking into it :)
Do they distribute release candidates of Vega-Lite 3? Because a workaround might be to import the new unstable version instead of the old one, if nothing has to change in the JSON input.

[jakevdp]

They do distribute release candidates, but since Altair's Python data structures are generated from the vega-lite spec, things are not guaranteed to work if you generate an Altair chart using a different version of Vega-Lite than the one you use to display it. We have an Altair 3 candidate in the works at #1249