multiline.json

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "values": "<DVC_METRIC_DATA>"
    },
    "transform": [
        {"fold": ["cpu_train_times", "dpu_train_times"]}
    ],
    "title": "<DVC_METRIC_TITLE>",
    "facet": {
        "field": "rev",
        "type": "nominal"
    },
    "spec": {
        "width": 300,
        "height": 300,
        "layer" : [
            {
                "encoding": {
                    "x": {
                        "field": "<DVC_METRIC_X>",
                        "type": "quantitative",
                        "title": "<DVC_METRIC_X_LABEL>"
                    },
                    "y": {
                        "field": "value",
                        "type": "quantitative",
                        "title": "<DVC_METRIC_Y_LABEL>",
                        "scale": {
                            "zero": false
                        }
                    },
                    "color": {
                        "field": "key",
                        "type": "nominal"
                    }
                },
                "layer": [
                    {"mark": "line"},
                    {
                        "selection": {
                            "label": {
                                "type": "single",
                                "nearest": true,
                                "on": "mouseover",
                                "encodings": ["x"],
                                "empty": "none",
                                "clear": "mouseout"
                            }
                        },
                        "mark": "point",
                        "encoding": {
                            "opacity": {
                                "condition": {
                                    "selection": "label",
                                    "value": 1
                                },
                                "value": 0
                            }
                        }
                    }
                ]
            },
            {
                "transform": [{"filter": {"selection": "label"}}],
                "layer": [
                    {
                        "mark": {"type": "rule", "color": "gray"},
                        "encoding": {
                            "x": {
                                "field": "<DVC_METRIC_X>",
                                "type": "quantitative"
                            }
                        }
                    },
                    {
                        "encoding": {
                            "text": {
                                "type": "quantitative",
                                "field": "value"
                            },
                            "x": {
                                "field": "<DVC_METRIC_X>",
                                "type": "quantitative"
                            },
                            "y": {
                                "field": "value",
                                "type": "quantitative"
                            }
                        },
                        "layer": [
                            {
                                "mark": {
                                    "type": "text",
                                    "align": "left",
                                    "dx": 5,
                                    "dy": -5
                                },
                                "encoding": {
                                    "color": {
                                        "type": "nominal",
                                        "field": "rev"
                                    }
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    }
}