Help with Vega-lite line chart

[Karlstens]

I’m struggling to get my head around how to draw a line chart in Vega-lite that displays multiple fields. I can get one field working, but am hoping someone can post an example of syntax required to do something like this (example from random values in Google Sheets);

Appreciate any help on this. Reading through the Vega-lite documentation is leaving me cross-eyed.

Extra points to show how a line can change colour as its value gets highter or lower.

EDIT:
Ok, making progress… point data in 3 different graphs. Now to see if I can layer them.

{
  "title": "Data",
  "repeat": ["Value A", "Value B", "Value C"],
   "columns": 1,
  "spec": {
    "mark": "line",
      "point": true,
    "encoding": {
      "x": {"field": {"repeat": "repeat"}, "bin": true},
      "y": {"aggregate": "count", "type": "quantitative" }
    }
  }
}

[Karlstens]

OK, I have made some progress. If I place all data in one values column, then tag it with a type column and add a colour switch, things start to work.

{
  "title": "Data",
    "mark": "line",
    "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": "Data_Value", "type": "quantitative"},
     "color": {"field": "Colour", "type": "nominal"}
    }
}

But as I’m not keen on pre-formatting my data, I’ll appreciate if anyone can help out with the original structure - I’ll continue to learn as time allows and will post here.

EDIT: I’m sure I’m close, in that I just have to format/layer the data with transform… just wish the doco had some simple examples to follow.

{
   "repeat": 
    {
    "layer": ["Value_A", "Value_B", "Value_C"]
    },
  "title": "Data",
    "width": 400,
    "height": 400,
    "mark": "line",
    "encoding": {
    "x": {"field": "Date", "type": "temporal"},
    "y": {"field": {"repeat": "layer","type": "quantitative"}
      }
    }
}

[Karlstens]

Omg I think I finally have this sorted…

{  "title": "Data",  
   "width": 1000,
   "height": 400,
  "repeat": {
    "layer": ["Value_A", "Value_B","Value_C"]},
  "spec": {
    "mark": "line",
    "encoding": {
      "x": {"field": "Date", "type": "temporal"},
      "y": {
        "aggregate": "mean",
        "field": {"repeat": "layer"},
        "type": "quantitative",
        "title": "Value"},
        "color": { "datum": {"repeat": "layer"}, "type": "nominal" }
    }
  }
}

[Karlstens]

Does anyone know the method of linking up line data if there’s gaps?

Example below - where you can see the Vegalite chart showing multiple line plots from my data, and the Airtable chart plot is still only limited to one (and everyone, please vote with Airtable support to see this improved!) - but note how the Vegalite data is broken and not continuous…