lookupSelection1.vl

{
    "height": 300,
    "data": {
        "url": "https://vega.github.io/vega-lite/data/stocks.csv",
        "format": {
            "parse": {
                "date": "date"
            },
            "type": "csv"
        }
    },
    "width": 650,
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "layer": [
        {
            "mark": "point",
            "selection": {
                "index": {
                    "nearest": true,
                    "init": {
                        "x": {
                            "date": 1,
                            "year": 2005,
                            "month": 1
                        }
                    },
                    "encodings": [
                        "x"
                    ],
                    "type": "single",
                    "on": "mouseover"
                }
            },
            "encoding": {
                "opacity": {
                    "value": 0
                },
                "x": {
                    "field": "date",
                    "type": "temporal",
                    "axis": null
                }
            }
        },
        {
            "transform": [
                {
                    "from": {
                        "key": "symbol",
                        "selection": "index"
                    },
                    "lookup": "symbol"
                },
                {
                    "as": "indexed_price",
                    "calculate": "datum.index && datum.index.price > 0 ? (datum.price - datum.index.price)/datum.index.price : 0"
                }
            ],
            "mark": "line",
            "encoding": {
                "color": {
                    "field": "symbol",
                    "type": "nominal"
                },
                "x": {
                    "field": "date",
                    "type": "temporal",
                    "axis": null
                },
                "y": {
                    "field": "indexed_price",
                    "type": "quantitative",
                    "axis": {
                        "format": "%"
                    }
                }
            }
        },
        {
            "transform": [
                {
                    "filter": {
                        "selection": "index"
                    }
                }
            ],
            "layer": [
                {
                    "mark": {
                        "strokeWidth": 0.5,
                        "type": "rule"
                    }
                },
                {
                    "mark": {
                        "align": "center",
                        "type": "text",
                        "fontWeight": 100
                    },
                    "encoding": {
                        "text": {
                            "field": "date",
                            "timeUnit": "yearmonth",
                            "type": "temporal"
                        },
                        "y": {
                            "value": 310
                        }
                    }
                }
            ],
            "encoding": {
                "color": {
                    "value": "firebrick"
                },
                "x": {
                    "field": "date",
                    "type": "temporal",
                    "axis": null
                }
            }
        }
    ]
}