multi5.vl

{
    "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
    "data": {
        "url": "https://vega.github.io/vega-lite/data/seattle-weather.csv"
    },
    "description": "A dashboard with cross-highlighting",
    "title": "Seattle Weather, 2012-2015",
    "vconcat": [
        {
            "encoding": {
                "color": {
                    "condition": {
                        "field": "weather",
                        "scale": {
                            "domain": [
                                "sun",
                                "fog",
                                "drizzle",
                                "rain",
                                "snow"
                            ],
                            "range": [
                                "#e7ba52",
                                "#c7c7c7",
                                "#aec7ea",
                                "#1f77b4",
                                "#9467bd"
                            ]
                        },
                        "selection": "myBrush",
                        "title": "Weather",
                        "type": "nominal"
                    },
                    "value": "#cfdebe"
                },
                "size": {
                    "field": "precipitation",
                    "scale": {
                        "domain": [
                            -1,
                            50
                        ]
                    },
                    "type": "quantitative"
                },
                "x": {
                    "axis": {
                        "format": "%b",
                        "title": "Date"
                    },
                    "field": "date",
                    "timeUnit": "monthdate",
                    "type": "temporal"
                },
                "y": {
                    "axis": {
                        "title": "Maximum Daily Temperature (C)"
                    },
                    "field": "temp_max",
                    "scale": {
                        "domain": [
                            -5,
                            40
                        ]
                    },
                    "type": "quantitative"
                }
            },
            "height": 300,
            "mark": "point",
            "selection": {
                "myBrush": {
                    "encodings": [
                        "x"
                    ],
                    "type": "interval"
                }
            },
            "transform": [
                {
                    "filter": {
                        "selection": "myClick"
                    }
                }
            ],
            "width": 600
        },
        {
            "encoding": {
                "color": {
                    "condition": {
                        "field": "weather",
                        "scale": {
                            "domain": [
                                "sun",
                                "fog",
                                "drizzle",
                                "rain",
                                "snow"
                            ],
                            "range": [
                                "#e7ba52",
                                "#c7c7c7",
                                "#aec7ea",
                                "#1f77b4",
                                "#9467bd"
                            ]
                        },
                        "selection": "myClick",
                        "type": "nominal"
                    },
                    "value": "#acbf98"
                },
                "x": {
                    "aggregate": "count",
                    "type": "quantitative"
                },
                "y": {
                    "field": "weather",
                    "type": "nominal"
                }
            },
            "mark": "bar",
            "selection": {
                "myClick": {
                    "encodings": [
                        "color"
                    ],
                    "type": "multi"
                }
            },
            "transform": [
                {
                    "filter": {
                        "selection": "myBrush"
                    }
                }
            ],
            "width": 600
        }
    ]
}