Search code examples
data-visualizationvega-lite

Clamping y-axis when layering aggregated charts in vega-lite


This is a follow up from a previous question for which I built a test case in a (hopefully now public) notebook and noticed the following behavior:

At the end of the notebook, in the section bugs you will notice that y-axis of the max_precipitation of the layered chart using is clamped to 10.

I tried changing the domain but the bars do not go above 10.

Here the code example in vega-lite's editor reproduced below:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": "Top Months by Mean Precipitation",
  "data": {"url": "data/seattle-weather.csv"},
  "transform": [
    {"timeUnit": "month", "field": "date", "as": "month_date"},
    {
      "aggregate": [
        {"op": "mean", "field": "precipitation", "as": "mean_precipitation"},
        {"op": "max", "field": "precipitation", "as": "max_precipitation"}
      ],
      "groupby": ["month_date"]
    },
    {
      "window": [{"op": "row_number", "as": "rank"}],
      "sort": [{"field": "mean_precipitation", "order": "descending"}]
    }
  ],
  "encoding": {
    "x": {
      "field": "month_date",
      "type": "ordinal",
      "timeUnit": "month",
      "title": "month (descending by max precip)",
      "sort": {
        "field": "max_precipitation",
        "op": "average",
        "order": "descending"
      }
    }
  },
  "layer": [
    {
      "mark": {"type": "bar"},
      "encoding": {
        "y": {
          "field": "max_precipitation",
          "type": "quantitative",
          "title": "precipitation (mean & max)"
        }
      }
    },
    {
      "mark": "tick",
      "encoding": {
        "y": {"field": "mean_precipitation", "type": "quantitative"},
        "color": {"value": "red"},
        "size": {"value": 15}
      }
    }
  ]
}

Please help me understand what I am doing wrong?


Solution

  • It appears that the precipitation column is being parsed as strings rather than as numbers. You can specify the parsing format for the column using :

    "data": {
      "url": "data/seattle-weather.csv",
      "format": {"parse": {"precipitation": "number"}}
    },
    

    The result is here:

    enter image description here