Order nominal axis values in vega-lite

1
votes

I have a vega-lite layered bar graph to compare pre and post likert scale survey results. The x-axis has the likert options but these are ordered in alphabetical order. Can the order of x-axis values be ordered? e.g. "strongly disagree, disagree, neural, agree, strongly agree"?

Example vega-lite code:

{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A bar chart showing the US population distribution of     age groups and gender in 2000.",
"data": { 
  "values": [
    {"type":"pre", "answer":"Strongly Disagree", "total":15},
    {"type":"post", "answer":"Strongly Disagree", "total":30},
    {"type":"pre", "answer":"Disagree", "total":15},
    {"type":"post", "answer":"Disagree", "total":30},
    {"type":"pre", "answer":"Neutral", "total":15},
    {"type":"post", "answer":"Neutral", "total":30},
    {"type":"pre", "answer":"Neutral", "total":15},
    {"type":"post", "answer":"Neutral", "total":30},
    {"type":"pre", "answer":"Agree", "total":15},
    {"type":"post", "answer":"Agree", "total":30},
    {"type":"pre", "answer":"Strongly Agree", "total":20},
    {"type":"post", "answer":"Strongly Agree", "total":40}
  ]
},
"mark": "bar",
"encoding": {
    "x": {
      "field": "answer", "type": "nominal"
    },
    "y": {
      "field": "total", "type": "quantitative",
      "axis": {"title": "% Counts"},
      "stack": "none"
    },
    "color": {
      "field": "type", "type": "nominal",
      "axis": {"title": "Answer"},
      "scale": {"range": ["#e377c2","#1f77b4"]}
    },
    "opacity": {"value": 0.7}
}
}
1
vega-lite

1 Answers

4
votes

You can use x.scale.domain for that purpose. Other sort methods are described here.

Here is the spec that works using vega 3.0.0-beta.34 and vega-lite 2.0.0-beta.4:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.json",
  "description": "A bar chart showing the US population distribution of age groups and gender in 2000.",
  "data": {
    "values": [{
      "type": "pre",
      "answer": "Strongly Disagree",
      "total": 15
    }, {
      "type": "post",
      "answer": "Strongly Disagree",
      "total": 30
    }, {
      "type": "pre",
      "answer": "Disagree",
      "total": 15
    }, {
      "type": "post",
      "answer": "Disagree",
      "total": 30
    }, {
      "type": "pre",
      "answer": "Neutral",
      "total": 15
    }, {
      "type": "post",
      "answer": "Neutral",
      "total": 30
    }, {
      "type": "pre",
      "answer": "Neutral",
      "total": 15
    }, {
      "type": "post",
      "answer": "Neutral",
      "total": 30
    }, {
      "type": "pre",
      "answer": "Agree",
      "total": 15
    }, {
      "type": "post",
      "answer": "Agree",
      "total": 30
    }, {
      "type": "pre",
      "answer": "Strongly Agree",
      "total": 20
    }, {
      "type": "post",
      "answer": "Strongly Agree",
      "total": 40
    }]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "answer",
      "type": "nominal",
      "scale": {
        "domain": [
          "Strongly Disagree", 
          "Disagree", 
          "Neutral", 
          "Agree", 
          "Strongly Agree"
        ]
      },
      "axis": { "title": "Answer" }
    },
    "y": {
      "field": "total",
      "type": "quantitative",
      "axis": {
        "title": "% Counts"
      },
      "stack": "none"
    },
    "color": {
      "field": "type",
      "type": "nominal",
      "scale": {
        "range": ["#e377c2", "#1f77b4"]
      }
    },
    "opacity": {
      "value": 0.7
    }
  }
}