interaction7.vl

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "url": "https://vega.github.io/vega-lite/data/cars.json"
    },
    "description": "Drag the sliders to highlight points",
    "encoding": {
        "x": {
            "field": "Horsepower",
            "type": "quantitative"
        },
        "y": {
            "field": "Miles_per_Gallon",
            "type": "quantitative"
        }
    },
    "layer": [
        {
            "encoding": {
                "color": {
                    "condition": {
                        "field": "Origin",
                        "selection": "CylYr",
                        "type": "nominal"
                    },
                    "value": "grey"
                }
            },
            "mark": "circle",
            "selection": {
                "CylYr": {
                    "bind": {
                        "Cylinders": {
                            "input": "range",
                            "max": 8,
                            "min": 3,
                            "name": "Cylinders ",
                            "step": 1
                        },
                        "Year": {
                            "input": "range",
                            "max": 1981,
                            "min": 1969,
                            "name": "Year ",
                            "step": 1
                        }
                    },
                    "fields": [
                        "Cylinders",
                        "Year"
                    ],
                    "init": {
                        "Cylinders": 4,
                        "Year": 1977
                    },
                    "type": "single"
                }
            }
        },
        {
            "encoding": {
                "color": {
                    "field": "Origin",
                    "type": "nominal"
                },
                "size": {
                    "value": 100
                }
            },
            "mark": "circle",
            "transform": [
                {
                    "filter": {
                        "selection": "CylYr"
                    }
                }
            ]
        }
    ],
    "transform": [
        {
            "as": "Year",
            "calculate": "year(datum.Year)"
        }
    ]
}