Search code examples
vega-lite

Static Ranges for X Axis and Counting


I'm trying to manually define ranges for vega-lite and failing. I've read through documentation trying to understand span, band, scale but not finding any examples.

For my values listed I'm just trying to count how many of each field fall into the pre defined range. Y axis is just a count of how many of each field falls into the manually defined ranges for the X axis.

For example. the ATR bar in the 1 to 15 range would have a value of 4 and 0 for the 15 to 30 range. ETO would have a value of 3 in the 1 to 15 range and 1 for the 15 to 30.

Any help would be appreciated.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"ATR": 1, "ETO": 10, "ITE": 20, "RTI": 15},
      {"ATR": 3, "ETO": 4, "ITE": 8, "RTI": 4},
      {"ATR": 8, "ETO": 23, "ITE": 1, "RTI": 6},
      {"ATR": 7, "ETO": 9, "ITE": 4, "RTI": 11}
    ]
  },
  "transform": [
      {"fold": ["ATR", "ETO", "ITE", "RTI"]}   
    ],
  "mark": "bar",
  "encoding": {
    "x": {
      "type": "quantitative",
      "scale": {
    "domain": [1,15],[15,30]
      }
    },
    "y": {"field": "value", "aggregate": "count", "type": "quantitative"},
    "color": {"field": "key", "type": "nominal"}
  }
}

I've tried understanding/plugging in various items from the vega lite documentation and working in the vega editor, but can't quite seem to get it right. If I add the "value" field to X axis, it just counts how many of each identifier has that value.

Edit: Update using Bin as suggested

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"ATR": 1, "ETO": 10, "ITE": 20, "RTI": 15},
      {"ATR": 3, "ETO": 4, "ITE": 8, "RTI": 4},
      {"ATR": 8, "ETO": 23, "ITE": 1, "RTI": 6},
      {"ATR": 7, "ETO": 9, "ITE": 4, "RTI": 11}
    ]
  },
  "transform":  [
      {"fold": ["ATR", "ETO", "ITE", "RTI"]} ,
      {
      "bin":{"binned": true, "steps": [15]},
      "field": "value"
    }  
    ],
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "value",
      "type": "ordinal"      
    },
    "y": {"aggregate": "count"},
    "xOffset":{"field": "key"},
    "color": {"field": "key", "type": "nominal"}
  }
}

Solution

  • Do you mean like this?

    enter image description here

    If so, use a label expression.

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
      "data": {
        "values": [
          {"ATR": 1, "ETO": 10, "ITE": 20, "RTI": 15},
          {"ATR": 3, "ETO": 4, "ITE": 8, "RTI": 4},
          {"ATR": 8, "ETO": 23, "ITE": 1, "RTI": 6},
          {"ATR": 7, "ETO": 9, "ITE": 4, "RTI": 11}
        ]
      },
      "transform": [
        {"fold": ["ATR", "ETO", "ITE", "RTI"]},
        {"bin": {"binned": true, "steps": [15]}, "field": "value"}
      ],
      "mark": "bar",
      "encoding": {
        "x": {"field": "value", "type": "ordinal", "axis": {
           
            "labelExpr": "datum.label==15?'0-15':'15-30'",
            "labelAngle":0
          }},
        "y": {"aggregate": "count"},
        "xOffset": {"field": "key"},
        "color": {"field": "key", "type": "nominal"}
      }
    }