vega-lite
vega-lite copied to clipboard
vega
Cannot hover marks under a brush
For example, given a new example I add for https://github.com/vega/vega-lite/pull/3146, I cannot trigger a brushed point to be blue even though the condition for hover comes first.
{
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"description": "Drag out a rectangular brush to highlight points.",
"data": {"url": "data/cars.json"},
"selection": {
"brush": {
"type": "interval"
},
"hoverbrush": {
"type": "multi", "on": "mouseover",
"nearest": true,
"empty": "none"
}
},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"},
"color": {
"condition": [
{"selection": "hoverbrush", "value": "blue"},
{"selection": "brush", "value": "skyblue"}
],
"value": "grey"
}
}
}
A more important issue would be that even with just one condition and brush (e.g., the brush.vl.json), we cannot hover a data point to see tooltip.
Yes, this is a limitation of Vega's event handling (see vega/vega-scenegraph#53). Marks that render on top of others capture events and do not propagate them down.
Before we close this enitrely, I wonder if it makes sense to have an option to show brush below points? The fact is that we cant hover to enable tooltip is quite hurting
A couple of points:
(1) I would be uncomfortable if implementation limitations impacted language level concerns. That strikes me as a case of the tail wagging the dog.
(2) If the brush was rendered below points, that would interfere with the ability to smoothly drag the brush. If a drag event was initiated over a mark, or if a drag moved over a mark, the brush would no longer be draggable. That feels like a worse violation of user expectations than this limitation. With that said, perhaps we should explicitly document this behavior as a current limitation given that we will now support an array of conditional value definitions.
(1) I would be uncomfortable if implementation limitations impacted language level concerns. That strikes me as a case of the tail wagging the dog.
It depends on whether there is a case where users would want the brush to be under the points. Perhaps not, so I think this is a fair point.
If a drag event was initiated over a mark, or if a drag moved over a mark, the brush would no longer be draggable.
Yeah, this is definitely annoying.
If the brush was rendered below points, that would interfere with the ability to smoothly drag the brush.
(Minor note) Given that the drag depends on window.mousemove, I'm not sure how is this a problem. I just tried moving the brush in the output layer in the output Vega spec and it seems fine.
With that said, perhaps we should explicitly document this behavior as a current limitation given that we will now support an array of conditional value definitions.
Yeah, let's just document the limitations for now. This seems like a very corner case anyway.
(Minor note) Given that the drag depends on window.mousemove, I'm not sure how is this a problem. I just tried moving the brush in the output layer in the output Vega spec and it seems fine.
Dragging is initiated on a transparent brush mark rendered on top of all marks. If this brush mark didn’t exist (and instead dragging was triggered by the background mark), users would experience an inconsistent drag start experience.
+1 on this being an important bug. As an umbrella solution for tooltip issues, I'm curious if there's a way to provide a sort of callback function for tooltips with the selected data point. I don't have much knowledge of Vega's internals so this might not be feasible.
For this particular request, the way the above idea could help is that one could then setup an external function that provides tooltip text for a brushed area based on a previously-listened-to brushed signal listened to by the user code (which is already possible). This would allow one to generate tooltip text based on the set of brushed datapoints however the user sees fit.
Just fyi, here is the documentation for Vega tooltip handlers: https://vega.github.io/vega/docs/api/view/#view_tooltip. Tooltips can also be implemented in Vega itself but the handler is great for html tooltips and it's also what we use for the Vega tooltip plugin.
+1 on the lack of tooltips (or the ability to select a point) when using a brush being an important bug, rather than a niche case. An example of how I would be using the tooltips when using a brush is in the image below: the brush selects the time window, and by hovering over the points I can inspect individual points through the tooltip.
As I am only interested in "brushing" the lower panel - is it in any way possible to limit the overlay of the brush to the lower panel?
Outside of that, fantastic to be able to make these visualizations in <20 lines.
(oz/view! {:vconcat [{:width 1400
:height 500
:layer [{:data {:values (slurp "observables/world-110m.json") :format {:type "topojson" :feature "countries"}}
:projection {:scale 650 :center [25 52] :clipExtent [[0 0] [1400 500]]}
:mark {:type "geoshape" :fill "lightgrey" :stroke "grey"}}
{:data {:values plague-db}
:transform [{:filter {:selection "brush"}}]
:projection {:scale 650 :center [25 52] :clipExtent [[0 0] [1400 500]]}
:encoding {:longitude {:field :longitude}
:latitude {:field :latitude}}
:mark {:type "circle" :fill "black" :tooltip {:content "data"}}}]}
{:width 1400
:height 200
:params [{:name "brush" :select {:type "interval" :encodings ["x"]}}]
:data {:values plague-db}
:encoding {:x {:field :year :type "quantitative"} :y {:aggregate "count"}}
:mark {:type "bar"}}]}
:port 3333)
