same encoding, different plot

[lutzbickhardt]

consider this code (I tested it in the online editor, screenshot attached)

The goal is to have the latest data used as a kind of legend (I derived this from an example)

a) why would the first plot show the data at each data point and not (as in the second plot) just at y = max(time)?
b) what would I have to do if I wanted all the texts at the right boarder (not as in the case of a, b at the time of their last entry ?
c) what do I do to also have the symbol legend in the second plot?

Sorry, I am just starting to use vega.

{
    "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
    "description": "A simple multi line chart with embedded data.",
    "height": 400,
    "width": 600,
    "autosize": {"resize": true, "type": "fit", "contains": "content"},

    "data": {
        "values":[
            {"time": "2023-01-11 17:14:02", "data": 75.7, "symbol": "A"},
            {"time": "2023-01-11 17:14:02", "data": 1,    "symbol": "B"},
            {"time": "2023-01-11 17:14:02", "data": 10,   "symbol": "C"},
            {"time": "2023-01-11 17:14:02", "data": 75.9, "symbol": "D"},

            {"time": "2023-01-11 17:14:00", "data": -5.9, "symbol": "a"},


            {"time": "2023-01-11 17:14:00", "data": 10.1, "symbol": "b"},

            {"time": "2023-01-11 17:14:08", "data": 62.2, "symbol": "A"},
            {"time": "2023-01-11 17:14:08", "data": 31.4, "symbol": "B"},
            {"time": "2023-01-11 17:14:08", "data": 57.8, "symbol": "C"},
            {"time": "2023-01-11 17:14:08", "dat


            {"time": "2023-01-11 17:14:14", "data": 35.3, "symbol": "A"},
            {"time": "2023-01-11 17:14:14", "data": 85.7, "symbol": "B"},
            {"time": "2023-01-11 17:14:14", "data": 72.5, "symbol": "C"},
            {"time": "2023-01-11 17:14:14", "data": 69,   "symbol": "D"},

            {"time": "2023-01-11 17:14:18", "data": -12.9, "symbol": "a"},
            {"time": "2023-01-11 17:14:18", "data": 13.1,  "symbol": "b"},

            {"time": "2023-01-11 17:14:20", "data": 35.2, "symbol": "A"},
            {"time": "2023-01-11 17:14:20", "data": 86.5, "symbol": "B"},
            {"time": "2023-01-11 17:14:20", "data": 58.2, "symbol": "C"},
            {"time": "2023-01-11 17:14:20", "data": 71.4, "symbol": "D"}
    ]},
   
    "vconcat": [{
    "layer": [
        {                 
            "mark": "line",
            "encoding": {
                "x":      {"field": "time",   "type": "temporal",       "axis": {"title": "LocalTime"}},
                "y":      {"field": "data",   "type": "quantitative",   "axis": {"title": "Temperature [°C]"}},
                "color":  {"field": "symbol", "type": "nominal",        "scale": {"dx": 30}}
            }
        },
        {              
            "layer": [
                {   
                    "encoding": {
                        "x":        {"aggregate": "max",                "field": "time",    "type": "temporal"},
                        "y":        {"aggregate": {"argmax": "time"},   "field": "data",    "type": "quantitative"},
                        "color":    {                                   "field": "symbol",  "type": "nominal"}
                    },
                    "layer": [
                        {
                            "mark": "circle"
                        }, 
                        {
                            "mark":     {"type": "text", "align": "left", "dx": 4},
                            "encoding": {"text": {"field":"data", "type": "quantitative"}}
                        }
                    ]
                }
            ]
        }
    ]
    },
    {     
    "layer": [
        {
            "mark": "line",
            "encoding": {
                "x":        {"field": "time",   "type": "temporal",       "axis": {"title": "LocalTime"}},
                "y":        {"field": "data",   "type": "quantitative",   "axis": {"title": "Temperature [°C]"}},
                "color":    {"field": "symbol", "type": "nominal" }
            }
        },
        {
            "encoding": {
                    "x":        {"aggregate": "max",                "field": "time",    "type": "temporal"},
                    "y":        {"aggregate": {"argmax": "time"},   "field": "data",    "type": "quantitative"},
                    "color":    {                                   "field": "symbol",  "type": "nominal" }
            },
            "layer": [
                {
                    "mark": "circle"
                }, 
                {
                    "mark":     {"type": "text", "align": "left", "dx": 4},
                    "encoding": {"text": {"field": "symbol", "type": "nominal"}}
                }
            ]
        }
    ]
}
]}