Add fill/strokeOpacity and strokeWidth channels to support interaction design #4259
Conversation
…mple The conditional rule support for these channels are important for interaction design.
(Also useful for interaction design)
…nteraction with bars)
kanitw
force-pushed
the
kw/fillstrokeopacity
branch
from
dacc1a7
to
ab3f0f5
Compare
| "test": { | ||
| "and": [ | ||
| {"selection": "select"}, | ||
| "length(data(\"select_store\"))" |
There was a problem hiding this comment.
Note that this is a cheat by directly accessing the underlying data store to check if the selection is not empty. I think we might wanna expose this as a type of predicate in the future.
There was a problem hiding this comment.
Don't we have a way to change the selection to be empty or everything when nothing is selected by the user?
There was a problem hiding this comment.
We do, but it doesn't work for this case since we need the opacity to be 1 when the "select" selection is empty but the strokeWidth to be 0 when the "select" selection is empty.
There was a problem hiding this comment.
Nope, that totally doesn't make sense. There should be only one selection for clicking that gets applied to different encoding channels differently.
kanitw
changed the title
There was a problem hiding this comment.
Another simple design is to change the opacity/darkness on hover. See https://schasins.com/blog/when-do-cs-researchers-peak.html
| "type": "bar", | ||
| "fill": "#4C78A8", | ||
| "stroke": "black", | ||
| "cursor": "pointer" |
There was a problem hiding this comment.
I think this should be the default. Let's not add it manually just here, okay?
There was a problem hiding this comment.
I disagree. I don't know when that default gonna land. You can undo that in a separate PR.
There was a problem hiding this comment.
Okay, please create an issue and link to this example then.
There was a problem hiding this comment.
lol you already created it a few months ago. #4155
There was a problem hiding this comment.
Haha, shows how much I want it.
| "test": { | ||
| "and": [ | ||
| {"selection": "select"}, | ||
| "length(data(\"select_store\"))" |
There was a problem hiding this comment.
Don't we have a way to change the selection to be empty or everything when nothing is selected by the user?
That doesn't work if you want to handle both hovering to highlight (soft selection) AND clicking to do (hard) selection. |
Also added an example of an interactive bar chart with highlighting on hover and selecting on click. (Inspired by Tableau's interaction style.)
Note that I also added cursor: pointer after capturing the video.