altair
altair copied to clipboard
altair-viz
Issue with resolve_scale and faceted heatmap
Hello everyone!
I am trying to visualize the data using a heatmap but I wanted to separate the variables from the y-axis into meaningful categories. But for some reason it doesn't work for the Y axis but it does for the X axis. I will use the data from the heatmap example.
I will create 3 mock groups as an example using pd.cut.
import altair as alt
import numpy as np
import pandas as pd
# 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()})
bins= [-6, 0, 2, 6]
source['bins'] = pd.cut(source['x'], bins, labels=range(len(bins) - 1))
alt.Chart(source).mark_rect().encode(
x='x:O',
y='y:O',
color='z:Q',
column=alt.Column("bins:O",
title=None,
header=alt.Header(labelFontSize=0))
).resolve_scale(
x="independent"
).configure_facet(
spacing=5
)
It works as intended, but if I try to do the same with the y axis, which in my case is what I need it doesn't work.
bins= [-6, 0, 2, 6]
source['bins'] = pd.cut(source['y'], bins, labels=range(len(bins) - 1))
alt.Chart(source).mark_rect().encode(
x='x:O',
y='y:O',
color='z:Q',
row=alt.Row("bins:O",
title=None,
header=alt.Header(labelFontSize=0))
).resolve_scale(
y="independent"
).configure_facet(
spacing=5
)
Do you have any idea why this is happening? or do you have any workaround for this issue?
Thanks!
I don't know the error you are facing, but did you try changing this part: column=alt.Row(), into row=alt.Row()?
Yeah sorry, I updated that! for some reason the first one produces the plot and the second one not. It looks as if there is some kind of problem with resolve_scale y='independent' in heatmaps. If I remove the resolve scale it works as expected, but if I try to remove the empty rows with the resolve scale y independent it creates a blank plot.
.
Hm. I've no computer at hand, but could you try opening it in the Vega Editor? (last item in menu, if you click on the three dots top right of the Altair chart). It might be an issue that is resolved in a newer version of Vega-Lite.
row="independent" also doesn't work is it?
I also get an empty plot using the vega editor, no error, no nothing, it just doesn't plot anything.
{
"config": {
"view": {"continuousWidth": 400, "continuousHeight": 300},
"facet": {"spacing": 5}
},
"data": {"name": "data-09204afb9c8067bc5594cd5b0314667f"},
"mark": "rect",
"encoding": {
"color": {"field": "z", "type": "quantitative"},
"row": {
"field": "bins",
"header": {"labelFontSize": 0},
"title": null,
"type": "ordinal"
},
"x": {"field": "x", "type": "ordinal"},
"y": {"field": "y", "type": "ordinal"}
},
"resolve": {"scale": {"y": "independent"}},
"$schema": "https://vega.github.io/schema/vega-lite/v5.2.0.json",
"datasets": {
"data-09204afb9c8067bc5594cd5b0314667f": [
{"x": -5, "y": -5, "z": 50, "bins": 0},
{"x": -4, "y": -5, "z": 41, "bins": 0},
{"x": -3, "y": -5, "z": 34, "bins": 0},
{"x": -2, "y": -5, "z": 29, "bins": 0},
{"x": -1, "y": -5, "z": 26, "bins": 0},
{"x": 0, "y": -5, "z": 25, "bins": 0},
{"x": 1, "y": -5, "z": 26, "bins": 0},
{"x": 2, "y": -5, "z": 29, "bins": 0},
{"x": 3, "y": -5, "z": 34, "bins": 0},
{"x": 4, "y": -5, "z": 41, "bins": 0},
{"x": -5, "y": -4, "z": 41, "bins": 0},
{"x": -4, "y": -4, "z": 32, "bins": 0},
{"x": -3, "y": -4, "z": 25, "bins": 0},
{"x": -2, "y": -4, "z": 20, "bins": 0},
{"x": -1, "y": -4, "z": 17, "bins": 0},
{"x": 0, "y": -4, "z": 16, "bins": 0},
{"x": 1, "y": -4, "z": 17, "bins": 0},
{"x": 2, "y": -4, "z": 20, "bins": 0},
{"x": 3, "y": -4, "z": 25, "bins": 0},
{"x": 4, "y": -4, "z": 32, "bins": 0},
{"x": -5, "y": -3, "z": 34, "bins": 0},
{"x": -4, "y": -3, "z": 25, "bins": 0},
{"x": -3, "y": -3, "z": 18, "bins": 0},
{"x": -2, "y": -3, "z": 13, "bins": 0},
{"x": -1, "y": -3, "z": 10, "bins": 0},
{"x": 0, "y": -3, "z": 9, "bins": 0},
{"x": 1, "y": -3, "z": 10, "bins": 0},
{"x": 2, "y": -3, "z": 13, "bins": 0},
{"x": 3, "y": -3, "z": 18, "bins": 0},
{"x": 4, "y": -3, "z": 25, "bins": 0},
{"x": -5, "y": -2, "z": 29, "bins": 0},
{"x": -4, "y": -2, "z": 20, "bins": 0},
{"x": -3, "y": -2, "z": 13, "bins": 0},
{"x": -2, "y": -2, "z": 8, "bins": 0},
{"x": -1, "y": -2, "z": 5, "bins": 0},
{"x": 0, "y": -2, "z": 4, "bins": 0},
{"x": 1, "y": -2, "z": 5, "bins": 0},
{"x": 2, "y": -2, "z": 8, "bins": 0},
{"x": 3, "y": -2, "z": 13, "bins": 0},
{"x": 4, "y": -2, "z": 20, "bins": 0},
{"x": -5, "y": -1, "z": 26, "bins": 0},
{"x": -4, "y": -1, "z": 17, "bins": 0},
{"x": -3, "y": -1, "z": 10, "bins": 0},
{"x": -2, "y": -1, "z": 5, "bins": 0},
{"x": -1, "y": -1, "z": 2, "bins": 0},
{"x": 0, "y": -1, "z": 1, "bins": 0},
{"x": 1, "y": -1, "z": 2, "bins": 0},
{"x": 2, "y": -1, "z": 5, "bins": 0},
{"x": 3, "y": -1, "z": 10, "bins": 0},
{"x": 4, "y": -1, "z": 17, "bins": 0},
{"x": -5, "y": 0, "z": 25, "bins": 0},
{"x": -4, "y": 0, "z": 16, "bins": 0},
{"x": -3, "y": 0, "z": 9, "bins": 0},
{"x": -2, "y": 0, "z": 4, "bins": 0},
{"x": -1, "y": 0, "z": 1, "bins": 0},
{"x": 0, "y": 0, "z": 0, "bins": 0},
{"x": 1, "y": 0, "z": 1, "bins": 0},
{"x": 2, "y": 0, "z": 4, "bins": 0},
{"x": 3, "y": 0, "z": 9, "bins": 0},
{"x": 4, "y": 0, "z": 16, "bins": 0},
{"x": -5, "y": 1, "z": 26, "bins": 1},
{"x": -4, "y": 1, "z": 17, "bins": 1},
{"x": -3, "y": 1, "z": 10, "bins": 1},
{"x": -2, "y": 1, "z": 5, "bins": 1},
{"x": -1, "y": 1, "z": 2, "bins": 1},
{"x": 0, "y": 1, "z": 1, "bins": 1},
{"x": 1, "y": 1, "z": 2, "bins": 1},
{"x": 2, "y": 1, "z": 5, "bins": 1},
{"x": 3, "y": 1, "z": 10, "bins": 1},
{"x": 4, "y": 1, "z": 17, "bins": 1},
{"x": -5, "y": 2, "z": 29, "bins": 1},
{"x": -4, "y": 2, "z": 20, "bins": 1},
{"x": -3, "y": 2, "z": 13, "bins": 1},
{"x": -2, "y": 2, "z": 8, "bins": 1},
{"x": -1, "y": 2, "z": 5, "bins": 1},
{"x": 0, "y": 2, "z": 4, "bins": 1},
{"x": 1, "y": 2, "z": 5, "bins": 1},
{"x": 2, "y": 2, "z": 8, "bins": 1},
{"x": 3, "y": 2, "z": 13, "bins": 1},
{"x": 4, "y": 2, "z": 20, "bins": 1},
{"x": -5, "y": 3, "z": 34, "bins": 2},
{"x": -4, "y": 3, "z": 25, "bins": 2},
{"x": -3, "y": 3, "z": 18, "bins": 2},
{"x": -2, "y": 3, "z": 13, "bins": 2},
{"x": -1, "y": 3, "z": 10, "bins": 2},
{"x": 0, "y": 3, "z": 9, "bins": 2},
{"x": 1, "y": 3, "z": 10, "bins": 2},
{"x": 2, "y": 3, "z": 13, "bins": 2},
{"x": 3, "y": 3, "z": 18, "bins": 2},
{"x": 4, "y": 3, "z": 25, "bins": 2},
{"x": -5, "y": 4, "z": 41, "bins": 2},
{"x": -4, "y": 4, "z": 32, "bins": 2},
{"x": -3, "y": 4, "z": 25, "bins": 2},
{"x": -2, "y": 4, "z": 20, "bins": 2},
{"x": -1, "y": 4, "z": 17, "bins": 2},
{"x": 0, "y": 4, "z": 16, "bins": 2},
{"x": 1, "y": 4, "z": 17, "bins": 2},
{"x": 2, "y": 4, "z": 20, "bins": 2},
{"x": 3, "y": 4, "z": 25, "bins": 2},
{"x": 4, "y": 4, "z": 32, "bins": 2}
]
}
}
That seems like an issue with Vega-Lite. Could you open an issue at there repo? You can link to this issue as well.
If you provide a url like the following, it will be easier for them to inspect:
Open the Chart in the Vega Editor
#streamlit/streamlit#5064
I found this issue, and aparently the problem is the interaction between resolve and autosize. Adding .properties(height=100) solves the issue.
Closing this as nothing can be done on the Altair side. After the vega-lite issue has been fixed this will automatically be included in a following altair release.
