Interactive Dashboard with Cross Highlight
View this example in the online editor
Vega-Lite JSON Specification
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "A dashboard with cross-highlighting.",
"data": {"url": "data/movies.json"},
"vconcat": [
{
"layer": [{
"mark": "rect",
"encoding": {
"x": {
"bin": {"maxbins": 10},
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"bin": {"maxbins": 10},
"field": "Rotten_Tomatoes_Rating",
"type": "quantitative"
},
"color": {
"aggregate": "count",
"type": "quantitative",
"legend": {
"title": "All Movies"
}
}
}
}, {
"transform": [{
"filter": {"selection": "pts"}
}],
"mark": "point",
"encoding": {
"x": {
"bin": {"maxbins": 10},
"field": "IMDB_Rating",
"type": "quantitative"
},
"y": {
"bin": {"maxbins": 10},
"field": "Rotten_Tomatoes_Rating",
"type": "quantitative"
},
"size": {
"aggregate": "count",
"type": "quantitative",
"legend": {
"title": "In Selected Category"
}
},
"color": {
"value": "#666"
}
}
}]
}, {
"width": 330,
"height": 120,
"mark": "bar",
"selection": {
"pts": {"type": "single", "encodings": ["x"]}
},
"encoding": {
"x": {"field": "Major_Genre", "type": "nominal", "axis": {"labelAngle": -40}},
"y": {"aggregate": "count", "type": "quantitative"},
"color": {
"condition": {
"selection": "pts",
"value": "steelblue"
},
"value": "grey"
}
}
}
],
"resolve": {
"legend": {
"color": "independent",
"size": "independent"
}
},
"config": {
"range": {
"heatmap": {
"scheme": "greenblue"
}
}
}
}