vegalite({
data: {values: cars},
"vconcat": [
{
"layer": [
{
"mark": {"type": "point", "filled": true, "opacity": .5},
"encoding": {
"x": {
"field": "Horsepower",
"type": "quantitative"
},
"y": {
"field": "Miles_per_Gallon",
"type": "quantitative"
},
"opacity": {
"condition": {
"selection": {"and": ["year_select", "origin_select"]},
"value": 1
},
"value": .3
},
"color": {
"condition": {
"selection": {"and": ["year_select", "origin_select"]},
"field": "Origin", "type": "nominal"
},
"value": "lightgrey"
}
}
},
]
},
{
"width": 330,
"height": 120,
"mark": "bar",
"selection": {
"year_select": {
"type": "multi",
"encodings": [
"x"
],
"on": "click",
"resolve": "global",
"empty": "all"
}
},
"encoding": {
"x": {
"field": "Year",
"type": "nominal",
"axis": {
"labelAngle": -40
}
},
"y": {
"aggregate": "count",
"type": "quantitative"
},
"color": {
"condition": {
"selection": {"and": ["year_select", "origin_select"]},
"field": "Origin", "type": "nominal"
},
"value": "lightgrey"
},
}
},
{
"width": 100,
"height": 160,
"mark": "bar",
"selection": {
"origin_select": {
"type": "multi",
"encodings": [
"x"
],
"on": "click",
"resolve": "global",
"empty": "all"
}
},
"encoding": {
"x": {
"field": "Origin",
"type": "nominal",
"axis": {
"labelAngle": -40
}
},
"y": {
"aggregate": "count",
"type": "quantitative"
},
"color": {
"condition": {
"selection": "origin_select",
"field": "Origin", "type": "nominal"
},
"value": "lightgrey"
},
}
}
],
"resolve": {
"legend": {
"color": "independent",
"size": "independent"
}
},
}
)