Forum Discussion
Deneb data not aligned with column after custom sorting order
Hi all,
I'm new to Deneb and can't seem to figure out how to keep my data aligned with my column after applying a custom sorting order of the columns.
For example for the specification below, where I intentionally have no data for the "b2" column on row "a1".
{
"data": {
"values": [
{"a": "a1", "b": "b1", "c": "x", "p": "0.14"},
{"a": "a1", "b": "b1", "c": "y", "p": "0.60"},
{"a": "a1", "b": "b1", "c": "z", "p": "0.03"},
{"a": "a1", "b": "b3", "c": "x", "p": "0.11"},
{"a": "a1", "b": "b3", "c": "y", "p": "0.58"},
{"a": "a1", "b": "b3", "c": "z", "p": "0.79"},
{"a": "a2", "b": "b1", "c": "x", "p": "0.83"},
{"a": "a2", "b": "b1", "c": "y", "p": "0.87"},
{"a": "a2", "b": "b1", "c": "z", "p": "0.67"},
{"a": "a2", "b": "b2", "c": "x", "p": "0.97"},
{"a": "a2", "b": "b2", "c": "y", "p": "0.84"},
{"a": "a2", "b": "b2", "c": "z", "p": "0.90"},
{"a": "a2", "b": "b3", "c": "x", "p": "0.97"},
{"a": "a2", "b": "b3", "c": "y", "p": "0.84"},
{"a": "a2", "b": "b3", "c": "z", "p": "0.90"},
{"a": "a3", "b": "b1", "c": "x", "p": "0.57"},
{"a": "a3", "b": "b1", "c": "y", "p": "0.35"},
{"a": "a3", "b": "b1", "c": "z", "p": "0.49"},
{"a": "a3", "b": "b2", "c": "x", "p": "0.57"},
{"a": "a3", "b": "b2", "c": "y", "p": "0.35"},
{"a": "a3", "b": "b2", "c": "z", "p": "0.49"},
{"a": "a3", "b": "b3", "c": "x", "p": "0.99"},
{"a": "a3", "b": "b3", "c": "y", "p": "0.80"},
{"a": "a3", "b": "b3", "c": "z", "p": "0.37"}
]
},
"width": 60,
"height": {"step": 8},
"spacing": 5,
"mark": "bar",
"encoding": {
"y": {"field": "c", "type": "ordinal", "axis": null},
"x": {
"field": "p",
"type": "quantitative",
"axis": {"format": "%"},
"title": null
},
"color": {
"field": "c",
"type": "nominal",
"legend": {"orient": "bottom", "titleOrient": "left"},
"title": "settings"
},
"row": {"field": "a", "title": "Factor A", "header": {"labelAngle": 0}},
"column": {
"field": "b",
"sort": ["b3", "b2", "b1"],
"title": "Factor B"
}
}
}The visual looks like this:
It draws the a1b3 data at the a1b2 spot, and thus showing the wrong data in the a1b2 spot. When the custom sort is removed for the column the visual looks like this.
Can someone explain why this happens or how to fix it?
I'm currently away from my computer for a few more days, but I took a quick look on Vega Editor and I would have thought that this is correct. I had a very quick skim through the generated Vega spec and this seems to make sense as to what it should be doing. The problem is the same if I move the row/column channels into a top-level facet channel and then put the rest into a spec object.
This could potentially be something to raise as a bug for Vega-Lite.
Anonymous - can you work around by using a date column representing the month (that returns the first day of the month and year) rather than a column for the month name and sort and then use "timeUnit": "month" and an ordinal type scale for the column channel?
6 Replies
Hey Anonymous, this is a strange one. Unfortunately I don't have time right now to dive into the underlying Vega to try to figure out why this is happening, but I was able to get this working by simply specifying that the sort should be in descending order, instead of explicity stating the order by listing the values (see spec below). This works in this scenario, but I'm still unsure why it's not correctly showing the facet when the values for the order are specified.
{ "$schema": "https://vega.github.io/schema/vega-lite/v5.json", "data": { "values": [ {"a": "a1", "b": "b1", "c": "x", "p": "0.14"}, {"a": "a1", "b": "b1", "c": "y", "p": "0.60"}, {"a": "a1", "b": "b1", "c": "z", "p": "0.03"}, {"a": "a1", "b": "b3", "c": "x", "p": "0.11"}, {"a": "a1", "b": "b3", "c": "y", "p": "0.58"}, {"a": "a1", "b": "b3", "c": "z", "p": "0.79"}, {"a": "a2", "b": "b1", "c": "x", "p": "0.83"}, {"a": "a2", "b": "b1", "c": "y", "p": "0.87"}, {"a": "a2", "b": "b1", "c": "z", "p": "0.67"}, {"a": "a2", "b": "b2", "c": "x", "p": "0.97"}, {"a": "a2", "b": "b2", "c": "y", "p": "0.84"}, {"a": "a2", "b": "b2", "c": "z", "p": "0.90"}, {"a": "a2", "b": "b3", "c": "x", "p": "0.97"}, {"a": "a2", "b": "b3", "c": "y", "p": "0.84"}, {"a": "a2", "b": "b3", "c": "z", "p": "0.90"}, {"a": "a3", "b": "b1", "c": "x", "p": "0.57"}, {"a": "a3", "b": "b1", "c": "y", "p": "0.35"}, {"a": "a3", "b": "b1", "c": "z", "p": "0.49"}, {"a": "a3", "b": "b2", "c": "x", "p": "0.57"}, {"a": "a3", "b": "b2", "c": "y", "p": "0.35"}, {"a": "a3", "b": "b2", "c": "z", "p": "0.49"}, {"a": "a3", "b": "b3", "c": "x", "p": "0.99"}, {"a": "a3", "b": "b3", "c": "y", "p": "0.80"}, {"a": "a3", "b": "b3", "c": "z", "p": "0.37"} ] }, "width": 60, "height": {"step": 8}, "spacing": 5, "mark": "bar", "encoding": { "y": {"field": "c", "type": "ordinal", "axis": null}, "x": { "field": "p", "type": "quantitative", "axis": {"format": "%"}, "title": null }, "color": { "field": "c", "type": "nominal", "legend": {"orient": "bottom", "titleOrient": "left"}, "title": "settings" }, "row": {"field": "a", "title": "Factor A","type": "ordinal", "header": {"labelAngle": 0}}, "column": { "field": "b", "sort": "descending", "type": "ordinal", "title": "Factor B" } } }Hey giammariam, Thanks for the reply! Unfortunatly this won't work for what I'm trying to accomplish. Instead of the example labels here I want to sort the month names by month number which is also when this issue occurs. Simply sorting alphabetically does fix the aligning issue but it's not the order I want ofcourse 😅
