Define Colors on repeated layers in Vega-Lite

Question

I have this definition of a Vega-Lite chart

  {
   "$schema":"https://vega.github.io/schema/vega-lite/v4.json",
   "data":{
      "values":[
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444444",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45466
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444445",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45433
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444446",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45400
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444447",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45422
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444448",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45403
         },
         {
            "stepid":"4444",
            "stepname":"Name1",
            "serialnumber":"SN3444449",
            "lowval":45000,
            "highval":45500,
            "resultdecimal":45422
         }
      ]
   },
   "repeat":{
      "layer":[
         "lowval",
         "highval",
         "resultdecimal"
      ]
   },
   "spec":{
      "mark":{
         "type":"line",
         "strokeWidth":3,
         "point":{
            "size":45,
            "filled":true
         }
      },
      "encoding":{
         "x":{
            "field":"serialnumber",
            "type":"ordinal",
            "axis":{
               "labelAngle":-70,
               "title":"Selected Tests",
               "titleFontSize":10
            }
         },
         "y":{
            "field":{
               "repeat":"layer"
            },
            "type":"quantitative",
            "axis":{
               "title":"Teststeps in selected Tests",
               "titleFontSize":10
            },
            "scale":{
               "domain":[
                  45000,
                  45500
               ]
            }
         },
         "tooltip":[
            {
               "field":"serialnumber",
               "type":"ordinal"
            },
            {
               "field":"resultdecimal",
               "type":"quantitative"
            }
         ],
         "color":{
            "datum":{
               "repeat":"layer"
            },
            "type":"nominal"
         }
      }
   },
   "config":{
      "font":"Roboto",
      "axisX":{
         "labelFontSize":9
      },
      "axisY":{
         "labelFontSize":9
      }
   }
}

The outcome is like this:

What i want to achieve is to define the colors of the lines based on the field names

if( highval) 
color = red
if( lowval) 
color = red
if (resultdecimal)
color = blue

so that the min-max is in red, the result is in blue.

If there is another way of displaying three different chart-lines and defining the values there properly, any ideas are welcome!

Answer 1

i think i found the answer:

here the vega-lite definition for conditional color

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "values": [
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444444",
      "lowval":45000,
      "highval":45500,
      "resultdecimal":45466
   
},
   {
       "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444445",
    "lowval":45000,
      "highval":45500,
      "resultdecimal":45433
   
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444446",
         "lowval":45000,
      "highval":45500,
      "resultdecimal":45400
   
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444447",
    "lowval":45000,
      "highval":45500,
      "resultdecimal":45422
   
},
   {
      "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444448",
       "lowval":45000,
      "highval":45500,
      "resultdecimal":45403
   
},
   {
        "stepid":"4444",
      "stepname":"Name1",
      "serialnumber":"SN3444449",
     "lowval":45000,
      "highval":45500,
      "resultdecimal":45422
}
]
  },
  "repeat": {
    "layer": ["lowval", "highval","resultdecimal"]
  },
  "spec": {
                  "mark":{
                  "type":"line",
                  "strokeWidth":3,
                  "point":{
                     "size":45,
                     "filled":true
                  }
               },
    "encoding": {
      "x": {
        "field": "serialnumber",
        "type": "ordinal",
            "axis":{
          "labelAngle":-70,
          "title":"Selected Tests",
          "titleFontSize":10
        }
      },
      "y": {
        "field": {"repeat": "layer"},
        "type": "quantitative",
                      "axis": {
                  "title": "Teststeps in selected Tests",
                  "titleFontSize": 10},
                  "scale":{
                        "domain":[45000,45500]
                     }

      },
        "tooltip":[
          {
            "field":"serialnumber",
            "type":"ordinal"
          },
          {
            "field":"resultdecimal",
            "type":"quantitative"
          }
                  ],
                  
      "color": {
        "datum": {"repeat": "layer"},
        "type": "nominal",
       "scale": {
        "range": ["#e7ba52", "#c7c7c7", "#e7ba52"]
      },
      "legend": {"title": "Weather type"}
      }
    }
  },
                      "config": {
                        "font": "Roboto",
                        "axisX": {
                            "labelFontSize": 9
                        },
                        "axisY": {
                            "labelFontSize": 9
                        }
                    }
}