Create repetitive line chart in vega-lite

Question

I am trying to create 3 line chart on same dashboard. I used 'repeat' and getting result, but i can't modify y-axis.

this is what i currently get

but I need have y-axis which calculated as rank *60 - since each datapoint in data array is bucket with step of 60. and p25,p50 and p75 are percentiles of data array in dataset. Here is approx view i need

here is my code

   {
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  


"data": {
    "values":[
     {"x":"22-05", "p25":0.375, "p50":1.65, "p75":9.875,"data":[0, 0.125, 0.375, 1.625, 9.875, 11.25, 12.5, 65.625]},
     {"x":"22-06", "p25":0.405, "p50":1.675, "p75":9.675,"data":[0, 0.125, 0.405, 1.675, 9.675, 12.25, 12.8, 66.4]},
     {"x":"22-07", "p25":0.355, "p50":2.3, "p75":11.25,"data":[0.2, 0.2, 0.355, 2.3, 9.3, 11.25, 12.5, 65.625]}
  ]
},
  "transform": [
    {"calculate": "datum.data", "as": "d"},
    {"flatten": ["d"]},
    {"window": [{
      "op":"rank","field": "d", "as": "perc"
    }], "groupby": ["x"],
    "frame": [null,0]},
    {"calculate": "(datum.perc-1)*60", "as": "buckets"}
    
  ],
 "repeat": {"layer": ["p25", "p50","p75"]},
  
  "spec": {
    "width":400,
    "mark": {"type":"line", "point":true},
    "encoding": {
      "x": {"field": "x", "type": "nominal",  "title": "Dates","axis":{"labelAngle":0, "titleFontSize":14,"titleFontWeight":700,"titleFont":"Google Sans" } },
      "y": {
       "field": {"repeat": "layer"},"title":null,
        "type": "quantitative",
        
      },
      "color": {"datum": {"repeat": "layer"}, "scale":{"range":["blue","green","orange"]},"type": "nominal", "legend":{"labelExpr":"datum.label =='p25'?'25th percentile':datum.label=='p50'?'50th percentile':'75th percentile'"}}
    },
    
 }
  
   
   }

Answer 1

Here I have flattened the p25, p50, p75 and multiplied by 60. Maybe this could be a starting point for you.

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "width": 300,
  "height": 200,
  "data": {
    "values": [
      {"x": "22-05", "p25": 0.375, "p50": 1.65, "p75": 9.875},
      {"x": "22-06", "p25": 0.405, "p50": 1.675, "p75": 9.675},
      {"x": "22-07", "p25": 0.355, "p50": 2.3, "p75": 11.25}
    ]
  },
  "transform": [
    {"fold": ["p25", "p50", "p75"], "as": ["y", "val"]},
    {"calculate": "datum.val", "as": "val1"},
    {"calculate": "((datum.val)-0) * 60", "as": "val2"},
    {
      "calculate": "{'p25': '25th percentile', 'p50': '50th percentile', 'p75': '75th percentile'}[datum.y]",
      "as": "y_label"
    }
  ],
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {"field": "x"},
    "y": {
      "field": "val2",
      "type": "quantitative",
      "axis": {"format": ".2f", "title": "Value"}
    },
    "color": {"field": "y", "legend": {"title": "Percentile"}},
    "tooltip": [
      {"field": "x", "title": "X"},
      {"field": "y_label", "title": "Percentile"},
      {"field": "val1", "title": "Value 1", "format": ".2f"},
      {"field": "val2", "title": "Value 2", "format": ".2f"}
    ]
  },
  "config": {}
}