Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Zoom only x or y axis with mouse wheel when using Chart.interactive()? #1512

Closed
trllrgn opened this issue May 16, 2019 · 9 comments
Closed

Comments

@trllrgn
Copy link

trllrgn commented May 16, 2019

Is there a way to detect whether the mouse is over the x axis or y axis and zoom (i.e. change scales) only on this axis with Chart.interactive()?

I found the documentation and understand that I can use bind_x=False or bind_y=False in order to stop zooming in x or y, respectively. The documentation also mentions that:

name:string
The selection name to use for the axes scales. This name should be unique among all selections within the chart.

which may refer to what I need, but I could not find an example.
Is what I'm looking for possible? Thanks.

@jakevdp
Copy link
Collaborator

jakevdp commented May 16, 2019

No, there's currently no way to do that in Vega-Lite or Altair. The relevant feature request is here: vega/vega-lite#1657

@trllrgn
Copy link
Author

trllrgn commented May 17, 2019

Thanks for the info.

@ejain
Copy link
Contributor

ejain commented Sep 13, 2020

To prevent zooming e.g. along the y axis you can specify:

.interactive(
  bind_y = False
)

The linked Vega-Lite issue seems unrelated, something about legends?

@jakevdp
Copy link
Collaborator

jakevdp commented Sep 13, 2020

The reason the linked issue is relevant is because that's what discusses the feature in question: interactive scales and legends. Note that the original question is not about disabling y zooming everywhere, which can be done with bind_y, but rather disabling it when your mouse is hovering over the x-axis.

@LombardoAndrea195
Copy link

LombardoAndrea195 commented May 18, 2021

Is it possible to do the following issue? I would like to have to possibility to select an interval but if I do this I don't want that the x axis change. Instead when I made the zoom I would like to do that. I 've thought to do that through a combobox and when for example interval combobox is validate I can fix the axis in order to do a selection otherwise If it's not I've the possibility to make an operation of zoom analyzing the details. It's an idea but I don't know if it's work because I'm a beginner of this new library can some one could help me in develop it? Thanks a lot

interval = alt.selection_interval()
zoom = alt.selection_interval(bind='scales', encodings=['x'])
#slider = alt.binding_range(min=0, max=29, step=1, name='cutoff:')
#selector = alt.selection_single(name="VALUE", fields=['cutoff'],bind=slider, init={'cutoff': 0})
scatter=alt.Chart(pd_df).mark_line().encode(
    alt.X('@timestamp:T', title='TIMESTAMP'),
    alt.Y('VALUE:Q', title='VALUE'),   color=alt.condition(interval, 'VALUE:O', alt.value('lightgray')),
  tooltip = ['VALUE:O', alt.Tooltip('@timestamp:T', format = '%Y-%m-%d %H:%M')]
).add_selection(
    zoom,interval
).interactive(bind_y=False)

@jakevdp
Copy link
Collaborator

jakevdp commented May 18, 2021

One thing you can do is set it so that one of the selections requires holding the shift key. There are some examples of this in the docs: Composing Multiple Selections

@LombardoAndrea195
Copy link

LombardoAndrea195 commented May 23, 2021

@jakevdp Thanks for the fast reply, I manage to respond now due to the fact before I didn't understand the logical of this implementation.(I've found out a step on github or stackoverflow where you did this issue for someone).
I've another issue. I would like to represent in the time has before the number of events that occur in a day. I can make you an example suppose the example below:

input_dropdown = alt.binding_select(options=[list(pd_df_time['_SIDE'].unique())])
selection = alt.selection_single(fields=['_SIDE'], bind=input_dropdown, name='FIELD: ')


#shape
selection_SERIAL_NUMBER = alt.selection_multi(fields=['_SIDE :N'],bind='legend')
shape_SERIAL_NUMBER  = alt.condition(selection_SERIAL_NUMBER ,alt.Shape('_SIDE:N'), alt.value('lightblue'))

color = alt.condition(selection,alt.Color('count(@timeEvent):N'),alt.value('lightblue'))

interaction1 = alt.selection_interval(bind='scales', on="[mousedown[event.altKey], mouseup] > mousemove", translate="[mousedown[event.altKey], mouseup] > mousemove!",
    zoom="wheel![event.altKey]"
)

interactionY = alt.selection_interval(bind='scales', encodings=['x'],on="[mousedown[event.shiftKey], mouseup] > mousemove",translate="[mousedown[event.shiftKey], mouseup] > mousemove!",
    zoom="wheel![event.shiftKey]")
ScatterTime=alt.Chart(pd_df_time).mark_bar().encode(x=alt.X('yearmonthdate(@timestamp):T', title='TIMESTAMP'),
                                                               y=alt.Y('count(@timeEvent):Q', title='count()'), 
                                                               color=color,tooltip = ['hoursminutesseconds(@timeEvent):T',
                                                            alt.Tooltip('@timestamp:T', format = '%Y-%m-%d %H:%M'),'SERIAL NUMBER:N']
).add_selection(interaction1,interactionY,selection,selection_Operation).resolve_scale(  x='independent').transform_filter(selection)


ScatterTime.properties(width=1000)

For helping you to detect what I'm really searching about, I would like to visualize the number of times that in a day I've that event. I suppose that the logic could work but something doesn't because I've seen for example that in a day specific I've a count() of 2 but the serial number is one. I would like to inform you that the value is a time T but in this case I'm not interested on the content on the value but only if it is or not because I've defined a value time t that describe when finish the cycle of work. So more easily I want to evaluate the number of cycle in a day.

@joelostblom
Copy link
Contributor

I'm closing this as it is already tracked in VL and there is nothing to do from the altair side of things. See vega/vega-lite#1657

@grauscher
Copy link

One thing you can do is set it so that one of the selections requires holding the shift key. There are some examples of this in the docs: Composing Multiple Selections

I finally was able to zoom independently on x and y-axis!
Hope this code might help anyone interested on doing this:

xzoom = alt.selection_interval(encodings=['x'], bind="scales", zoom="wheel![event.shiftKey]")
yzoom = alt.selection_interval(encodings=['y'], bind="scales", zoom="wheel![event.altKey]")

chart.add_params(xzoom, yzoom)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants