Custom axis sort (vega-lite)?

463 views
Skip to first unread message

juliett...@gmail.com

unread,
Aug 25, 2017, 2:51:50 PM8/25/17
to vega-js
Is it possible to manually sort an axis in vega-lite? I.e., not ascending or descending, but for example {"sort": [fieldA, fieldB, fieldD, fieldC]}?

Thanks.

Kanit Wongsuphasawat

unread,
Aug 25, 2017, 3:44:50 PM8/25/17
to juliett...@gmail.com, vega-js
Hi ,

As mention in the sort documentation, you can specify custom sort order by providing custom scale domain:

{field:..., type: ..., "scale": {"domain": ["a", "b", "c"]}}

Note that we're actively updating the docs for our 2.0 release, so a lot of pages will be improved (if they haven't) in the next few weeks.  

Best,
Kanit


On Fri, Aug 25, 2017 at 11:51 AM <juliett...@gmail.com> wrote:
Is it possible to manually sort an axis in vega-lite? I.e., not ascending or descending, but for example {"sort": [fieldA, fieldB, fieldD, fieldC]}?

Thanks.

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

juliett...@gmail.com

unread,
Aug 25, 2017, 4:01:09 PM8/25/17
to vega-js, juliett...@gmail.com
I am trying to sort it so the color order (bottom to top/top to bottom doesn't matter) is "None", "Minor", "Medium", "Substantial".
However, this currently doesn't change that, it is currently still alphabetical with Medium on top and Substantial on the bottom. How do I fix that? 

Thanks for your help.

{
"data": { "url": "data/birdstrikes.json"},
"mark": "bar",
"encoding": {
"x": {
"field": "Wildlife__Species", "type": "ordinal",
"scale": {"rangeStep": 17}
},
"y": {
"aggregate": "count", "field": "Wildlife__Species", "type": "quantitative",
"axis": {"title": "count"}
},
"color": {
"field": "Effect__Amount_of_damage", "scale": {"domain": ["None", "Minor", "Medium", "Substantial"]}
}
}
}

Kanit Wongsuphasawat

unread,
Aug 25, 2017, 4:34:26 PM8/25/17
to juliett...@gmail.com, vega-js
If you want to order the color in the legend, then scale.domain works in the latest Vega-Lite version. 

Here is a screenshot from the online editor (backup link)

image.png

If you want to sort the stack order of the marks, you can see a workaround here:  https://github.com/vega/vega-lite/issues/1734#issuecomment-263481177.

Best,
Kanit
Reply all
Reply to author
Forward
0 new messages