question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Chart interaction and brush selection interfering

See original GitHub issue

I am trying to have a pannable and zoomable chart with a brush selection. If we just add interactive() to a chart, it will interfere with the brush selection and make things weird. So I thought I’d bind the scales separately with an “on” kwarg like in the user guide for multiple selections. Code below as a copy-pastable example.
However, this doesn’t behave well: even without holding the shift key, dragging will still move the chart around. Is this a vega-lite/vega issue, and is there a workaround?

from vega_datasets import data
df = data.disasters()
df.Year = pd.to_datetime(df.Year, format="%Y")

brush = alt.selection(
    type="interval",
    encodings=["x"],
    on="[mousedown[event.altKey], mouseup] > mousemove",
)

interaction = alt.selection(
    type="interval",
    bind="scales",
    on="[mousedown[event.shiftKey], mouseup] > mousemove",
)

alt.Chart(df).mark_bar().encode(
    x="Year",
    y="sum(Deaths)",
    color="Entity",
    opacity=alt.condition(brush, alt.OpacityValue(1), alt.OpacityValue(0.7)),
).add_selection(
    brush,
    interaction
)

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

3reactions
jakevdpcommented, May 25, 2020

You need to set additional properties if you want translate and zoom behavior to require a particular key to be held:

brush = alt.selection(
    type="interval",
    encodings=["x"],
    on="[mousedown[event.altKey], mouseup] > mousemove",
    translate="[mousedown[event.altKey], mouseup] > mousemove!",
    zoom="wheel![event.altKey]",
)

interaction = alt.selection(
    type="interval",
    bind="scales",
    on="[mousedown[event.shiftKey], mouseup] > mousemove",
    translate="[mousedown[event.shiftKey], mouseup] > mousemove!",
    zoom="wheel![event.shiftKey]",
)
0reactions
Luttikcommented, Jan 27, 2022

Wow if you don’t know it than who does 😆 . The link that you posted was the first link in my question too. I feel like I’ve fully explored the options presented there. The weird thing is that in the expression language there is so much stuff about calculating a value but no stuff about equality which seems like such an important element in calculation

Read more comments on GitHub >

github_iconTop Results From Across the Web

Bindings, Selections, Conditions: Making Charts Interactive
the selection() object which captures interactions from the mouse or through other inputs to effect the chart. Inputs can either be events like...
Read more >
DC.js brush to select range not working with scaleTime
The brushing behavior comes from d3, so I'd try looking at d3's ... up by right-clicking the background of the chart and selecting...
Read more >
disabling brush also disables chart click events / crossfilter-d3.js
I was able to implement bar selection by changing the scale to ordinal and adding xUnits: .x(d3.scale.ordinal().domain([0,1,2,3,4,5,6,7,8,9,10])) .
Read more >
Towards a Learning Dashboard for Community Visualization
the groups (learning communities) interact with one another and across ... means in our case, when selecting a time point on the first...
Read more >
Mondrian - Interactive Statistical Data Visualization in JAVA
Note: Deleting all selections is not limited to the current plot window. Color Brushing, Whereas selections are a more transient technique to mark...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found