I have a concat view in vega-lite (kibana) where the first bar plot serves as a selection for the other plots. So if I click in one bar of the bar plot, all other visualizations change accordingly.I also have a dropdown with the same goal.
I would like to have a dynamic title (or text mark) that shows the y label of the bar that I just clicked (or the name in the dropdown). So far I managed to do so, however if there are no selections for the bar, all labels will appear in the same title, which is not great.
I thought that maybe initializing the parameter with a certain value would solve the issue, but if I click in between bars, all values appear and I have the same issue with the title. Furthermore, I would like all bars to be always visible, and just change the opacity of the bar that is clicked.
Below you can find a simplified version of what I mean,
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
"data": {"url": "data/weather.csv"},
"hconcat": [
{
"mark": "bar",
"encoding": {
"y": {"field": "location", "type": "nominal"},
"x": {"aggregate": "mean", "field": "precipitation"},
"opacity":{"condition":{"param":"click","value":0.2},"value":0.7}
},
"params":[{
"name":"click",
"select":{"type":"point","encodings":["y"], "on":"click"},
"bind":{"input":"select","options":["New York", "Seattle"]},
"value":{"y":"Seattle"}
},
{
"name":"highlight",
"select":{"type":"point"}
}
],
"transform":[{"filter":{"param":"click"}}]
},
{"layer":[{
"transform":[{"filter":{"param":"click"}}],
"mark":"bar",
"mark":{"type":"text","dy":-50, "dx":30, "fontSize":20},
"encoding":{"text":{"field":"location","type":"nominal"}}
}]},
{
"mark": "point",
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
},
"transform":[{"filter":{"param":"click"}}]
}
]
}
As usual, any help will be more than welcome!
Following are the changes required:
click params
like if someone clicks on empty space, then nearest
bar will be selected and changed values for opacity
.Refer the editor or the below code:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "Two horizonally concatenated charts that show a histogram of precipitation in Seattle and the relationship between min and max temperature.",
"data": {"url": "data/weather.csv"},
"hconcat": [
{
"mark": "bar",
"encoding": {
"y": {"field": "location", "type": "nominal"},
"x": {"aggregate": "mean", "field": "precipitation"},
"opacity": {
"condition": {"param": "click", "value": 0.7, "empty": false},
"value": 0.2
}
},
"params": [
{
"name": "click",
"select": {
"type": "point",
"encodings": ["y"],
"on": "click",
"clear": false,
"nearest": true
},
"bind": {"input": "select", "options": ["New York", "Seattle"]},
"value": "Seattle"
},
{"name": "highlight", "select": {"type": "point"}}
]
},
{
"mark": "point",
"title": {"text": {"expr": "click_location"}},
"encoding": {
"x": {"field": "temp_min", "bin": true},
"y": {"field": "temp_max", "bin": true},
"size": {"aggregate": "count"}
},
"transform": [{"filter": {"param": "click"}}]
}
]
}