Wondering if anyone has considered making a hybrid of the TapTool and the HoverTool that would work in place of hover over for use on a mobile browser / if this would be a workable idea.
Been putting together a little swell browser, using hover tool to control linked data on seperate plots and also display data as a tooltip:
https://swellspect.herokuapp.com/ (look at the height plot).
This takes advantage of the cb_data object in the js callback:
update_ts = CustomJS(args=dict(sourcedata=sourcedata),
code="""
function degToCompass(num) {
var val = Math.floor((num / 22.5) + 0.5);
var arr = ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"];
return arr[(val % 16)].concat(" (", Math.round(num).toString(), ")");
}
function degToCompassArr(arr){
var arro = [];
for (var i = 0; i<arr.length; i++){
arro[i]=degToCompass(arr[i]);
}
return arro;
}
var y = cb_data.geometry.y;
var x = cb_data.geometry.x;
var c = Math.round(-y*24);
var data = sourcedata.get('data')
var paxis = data['paxis'];
var y2disp_ts = data['y'];
var amp = data['amp'];
var timey = data['b'];
for (i = 0; i < paxis.length; i++) {
y2disp_ts[i] = amp[c][i];
timey[i]=y;
}
var dir = data['dir'];
data['y'] = y2disp_ts;
data['hh']=amp[Math.round(-y*24)];
data['dd']=degToCompassArr(dir[Math.round(-y*24)]);
sourcedata.trigger('change');
""")
fig2_hovertool = fig2.select(type=HoverTool)
fig2_hovertool.callback = update_ts
fig2_hovertool.point_policy = "follow_mouse"
fig2_hovertool.mode = "mouse"
fig2_hovertool.tooltips=OrderedDict([
("Days Back", "$y"),
("Period", "@paxis"),
("Height", "@hh ft"),
("Direction", "@dd")
])
``
Thoughts:
-
My first idea is that could be passed to the tap tool, so one could do something similar with the 'geometry . I havn’t jumped into the source yet but would be willing to try hacking this together if there isn’t already a solution out there.
-
A second idea would be to implement tool tips for the tap tool. (Not sure how feasible this might be, but would probably rely on 1) as well).
-
What about a special mobile friendly TapNStay tool that basically wrapps the hover tool like functionality accessible to a touch screen?
-
Designers would probably suggest I go lie under a bus because such hover nonsense is counter to their ideology.
Hi Jeffrey,
Firstly - thanks for sharing your work - the site looks great.
There are quite a few holes in touch support at the moment - I have
written up an issue here: But that’s not your question. I don’t think it’s a terrible idea and
with the new Custom Models you should be able to experiment with one
yourself without having to recompile bokeh.
My other suggestion though would be to have a third small plot.
Perhaps it would live under the line chart. This would just hold
text data. When you Tap and item on the chart not only would it
update the line chart but also the text. You wouldn’t need any
CustomJS as you could just use a shared data source and have
selection take care of it. The trick is to make the non-selected
text all white / transparent and have the selected text be visible /
black (whatever you want). I did this for my Africa water map - the code is very old bokeh
code, but you should still be able get the idea. Scroll to the
bottom of the notebook:
and click on different countries to see it in action (also notice it
working with the tabs).
Please note the gray boxes are nbviewer artefacts and you wouldn’t
get that on your plot.
Hope this helps,
Sarah Bird
···
https://github.com/bokeh/bokeh/issues/2997
http://nbviewer.ipython.org/github/birdsarah/pycon_2015_bokeh_talk/blob/master/notebooks/Building%20the%20static%20visualization.ipynb
On 12/14/15 3:44 PM, Jeffrey Knowles
wrote:
Wondering if anyone has considered making a hybrid
of the TapTool and the HoverTool that would work in place of
hover over for use on a mobile browser / if this would be a
workable idea.
Been putting together a little swell browser, using hover
tool to control linked data on seperate plots and also display
data as a tooltip:
(look at the height
plot).
This takes advantage of the cb_data object in the js
callback:
update_ts
= CustomJS(args=dict(sourcedata=sourcedata),
code="""
function degToCompass(num) {
var
val = Math.floor((num / 22.5) + 0.5);
var
arr = [“N”, “NNE”, “NE”, “ENE”, “E”, “ESE”, “SE”,
“SSE”, “S”, “SSW”, “SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];
return
arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);
}
function
degToCompassArr(arr){
var
arro = ;
for
(var i = 0; i<arr.length; i++){
arro[i]=degToCompass(arr[i]);
}
return
arro;
}
var y = cb_data.geometry.y;
var x
= cb_data.geometry.x;
var c
= Math.round(-y*24);
var data = sourcedata.get('data')
var paxis = data['paxis'];
var y2disp_ts = data['y'];
var amp = data['amp'];
var timey = data['b'];
for (i = 0; i < paxis.length; i++) {
y2disp_ts[i] = amp[c][i];
timey[i]=y;
}
var dir = data['dir'];
data['y'] = y2disp_ts;
data['hh']=amp[Math.round(-y*24)];
data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);
sourcedata.trigger('change');
“”")
fig2_hovertool
= fig2.select(type=HoverTool)
fig2_hovertool.callback
= update_ts
fig2_hovertool.point_policy
= “follow_mouse”
fig2_hovertool.mode
= “mouse”
fig2_hovertool.tooltips=OrderedDict([
("Days
Back", “$y”),
("Period",
“@paxis”),
("Height",
“@hh ft”),
("Direction",
“@dd”)
])
``
Thoughts:
1) My first idea is that could be passed to the tap tool,
so one could do something similar with the 'geometry . I
havn’t jumped into the source yet but would be willing to
try hacking this together if there isn’t already a solution
out there.
2) A second idea would be to implement tool tips for the
tap tool. (Not sure how feasible this might be, but would
probably rely on 1) as well).
3) What about a special mobile friendly TapNStay tool that
basically wrapps the hover tool like functionality accessible
to a touch screen?
4) Designers would probably suggest I go lie under a bus
because such hover nonsense is counter to their ideology.
–
You received this message because you are subscribed to the Google
Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io?utm_medium=email&utm_source=footer) .
For more options, visit .
https://swellspect.herokuapp.com/
https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io
https://groups.google.com/a/continuum.io/d/optout
I should add, that for
desktop users, you could have hover
achieve the same as tap in the
same way as is done here:
···
http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-hover
That code is setting the datasource selection to be
updated based on the hover.
On 12/14/15 3:44 PM, Jeffrey Knowles
wrote:
Wondering if anyone has considered making a hybrid
of the TapTool and the HoverTool that would work in place of
hover over for use on a mobile browser / if this would be a
workable idea.
Been putting together a little swell browser, using hover
tool to control linked data on seperate plots and also display
data as a tooltip:
(look at the height
plot).
This takes advantage of the cb_data object in the js
callback:
update_ts
= CustomJS(args=dict(sourcedata=sourcedata),
code="""
function degToCompass(num) {
var
val = Math.floor((num / 22.5) + 0.5);
var
arr = [“N”, “NNE”, “NE”, “ENE”, “E”, “ESE”, “SE”,
“SSE”, “S”, “SSW”, “SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];
return
arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);
}
function
degToCompassArr(arr){
var
arro = ;
for
(var i = 0; i<arr.length; i++){
arro[i]=degToCompass(arr[i]);
}
return
arro;
}
var y = cb_data.geometry.y;
var x
= cb_data.geometry.x;
var c
= Math.round(-y*24);
var data = sourcedata.get('data')
var paxis = data['paxis'];
var y2disp_ts = data['y'];
var amp = data['amp'];
var timey = data['b'];
for (i = 0; i < paxis.length; i++) {
y2disp_ts[i] = amp[c][i];
timey[i]=y;
}
var dir = data['dir'];
data['y'] = y2disp_ts;
data['hh']=amp[Math.round(-y*24)];
data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);
sourcedata.trigger('change');
“”")
fig2_hovertool
= fig2.select(type=HoverTool)
fig2_hovertool.callback
= update_ts
fig2_hovertool.point_policy
= “follow_mouse”
fig2_hovertool.mode
= “mouse”
fig2_hovertool.tooltips=OrderedDict([
("Days
Back", “$y”),
("Period",
“@paxis”),
("Height",
“@hh ft”),
("Direction",
“@dd”)
])
``
Thoughts:
1) My first idea is that could be passed to the tap tool,
so one could do something similar with the 'geometry . I
havn’t jumped into the source yet but would be willing to
try hacking this together if there isn’t already a solution
out there.
2) A second idea would be to implement tool tips for the
tap tool. (Not sure how feasible this might be, but would
probably rely on 1) as well).
3) What about a special mobile friendly TapNStay tool that
basically wrapps the hover tool like functionality accessible
to a touch screen?
4) Designers would probably suggest I go lie under a bus
because such hover nonsense is counter to their ideology.
–
You received this message because you are subscribed to the Google
Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io?utm_medium=email&utm_source=footer) .
For more options, visit .
https://swellspect.herokuapp.com/
https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io
https://groups.google.com/a/continuum.io/d/optout
Hey Sarah,
Thanks for the suggestions! The hover is currently updating the data source as for the spectrum plot using similar custom js, so perhaps I’ll try having it display text on a different plot rather than tool tip.
The hurdle is getting cb_data.geometry (ie the tap location) for the tap, as I am doing for the hovertool. I’ll see what I can do!
Thanks!
JK
···
On Mon, Dec 14, 2015 at 5:07 PM, Sarah Bird [email protected] wrote:
I should add, that for
desktop users, you could have hover
achieve the same as tap in the
same way as is done here:
http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-hover
That code is setting the datasource selection to be
updated based on the hover.
On 12/14/15 3:44 PM, Jeffrey Knowles
wrote:
Wondering if anyone has considered making a hybrid
of the TapTool and the HoverTool that would work in place of
hover over for use on a mobile browser / if this would be a
workable idea.
Been putting together a little swell browser, using hover
tool to control linked data on seperate plots and also display
data as a tooltip:
https://swellspect.herokuapp.com/ (look at the height
plot).
This takes advantage of the cb_data object in the js
callback:
update_ts
= CustomJS(args=dict(sourcedata=sourcedata),
code="""
function degToCompass(num) {
var
val = Math.floor((num / 22.5) + 0.5);
var
arr = [“N”, “NNE”, “NE”, “ENE”, “E”, “ESE”, “SE”,
“SSE”, “S”, “SSW”, “SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];
return
arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);
}
function
degToCompassArr(arr){
var
arro = ;
for
(var i = 0; i<arr.length; i++){
arro[i]=degToCompass(arr[i]);
}
return
arro;
}
var y = cb_data.geometry.y;
var x
= cb_data.geometry.x;
var c
= Math.round(-y*24);
var data = sourcedata.get('data')
var paxis = data['paxis'];
var y2disp_ts = data['y'];
var amp = data['amp'];
var timey = data['b'];
for (i = 0; i < paxis.length; i++) {
y2disp_ts[i] = amp[c][i];
timey[i]=y;
}
var dir = data['dir'];
data['y'] = y2disp_ts;
data['hh']=amp[Math.round(-y*24)];
data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);
sourcedata.trigger('change');
""")
fig2_hovertool
= fig2.select(type=HoverTool)
fig2_hovertool.callback
= update_ts
fig2_hovertool.point_policy
= “follow_mouse”
fig2_hovertool.mode
= “mouse”
fig2_hovertool.tooltips=OrderedDict([
("Days
Back", “$y”),
("Period",
“@paxis”),
("Height",
“@hh ft”),
("Direction",
“@dd”)
])
``
Thoughts:
1) My first idea is that could be passed to the tap tool,
so one could do something similar with the 'geometry . I
havn’t jumped into the source yet but would be willing to
try hacking this together if there isn’t already a solution
out there.
2) A second idea would be to implement tool tips for the
tap tool. (Not sure how feasible this might be, but would
probably rely on 1) as well).
3) What about a special mobile friendly TapNStay tool that
basically wrapps the hover tool like functionality accessible
to a touch screen?
4) Designers would probably suggest I go lie under a bus
because such hover nonsense is counter to their ideology.
–
You received this message because you are subscribed to the Google
Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io?utm_medium=email&utm_source=footer)[https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io).
For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).
–
You received this message because you are subscribed to the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/566F67C2.3060309%40alum.mit.edu.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.
–
Jeff Knowles
The hurdle is getting cb_data.geometry (ie the tap location)
for the tap, as I am doing for the hovertool. I’ll see what I can
do!
Because you're using an image glyph? If so, then a workaround (we
don’t have hit testing on image yet) is
to add
invisible glyphs (square markers, circles, whatever) on the same
plot
and attach a hovertool to them.
···
On 12/14/15 5:31 PM, jeff knowles
wrote:
Hey Sarah,
Thanks for the suggestions! The hover is currently
updating the data source as for the spectrum plot using
similar custom js, so perhaps I’ll try having it display text
on a different plot rather than tool tip.
The hurdle is getting cb_data.geometry (ie the tap
location) for the tap, as I am doing for the hovertool. I’ll
see what I can do!
Thanks!
JK
On Mon, Dec 14, 2015 at 5:07 PM, Sarah
Bird [email protected]
wrote:
I should add, that for desktop
users, you could have
hover
achieve the same as tap in
the same way as is done here:
http://bokeh.pydata.org/en/latest/docs/user_guide/interaction.html#customjs-for-hover
That code is setting
the datasource selection to be
updated based on the hover.
On 12/14/15 3:44 PM, Jeffrey Knowles wrote:
Wondering if anyone has considered
making a hybrid of the TapTool and the HoverTool
that would work in place of hover over for use on
a mobile browser / if this would be a workable
idea.
Been putting together a little swell browser,
using hover tool to control linked data on
seperate plots and also display data as a
tooltip:
https://swellspect.herokuapp.com/
(look at the height plot).
This takes advantage of the cb_data object
in the js callback:
update_ts
=
CustomJS(args=dict(sourcedata=sourcedata),
code="""
function degToCompass(num) {
var
val = Math.floor((num / 22.5) +
0.5);
var
arr = [“N”, “NNE”, “NE”, “ENE”, “E”,
“ESE”, “SE”, “SSE”, “S”, “SSW”,
“SW”, “WSW”, “W”, “WNW”, “NW”,
“NNW”];
return
arr[(val % 16)].concat(" (",
Math.round(num).toString(), “)”);
}
function
degToCompassArr(arr){
var
arro = ;
for
(var i = 0; i<arr.length; i++){
arro[i]=degToCompass(arr[i]);
}
return
arro;
}
var y =
cb_data.geometry.y;
var x
= cb_data.geometry.x;
var c
= Math.round(-y*24);
var data =
sourcedata.get(‘data’)
var paxis =
data[‘paxis’];
var y2disp_ts =
data[‘y’];
var amp =
data[‘amp’];
var timey =
data[‘b’];
for (i = 0; i < paxis.length;
i++) {
y2disp_ts[i] = amp[c][i];
timey[i]=y;
}
var dir = data['dir'];
data['y'] = y2disp_ts;
data[‘hh’]=amp[Math.round(-y*24)];
data[‘dd’]=degToCompassArr(dir[Math.round(-y*24)]);
sourcedata.trigger('change');
""")
fig2_hovertool
=
fig2.select(type=HoverTool)
fig2_hovertool.callback
= update_ts
fig2_hovertool.point_policy
= “follow_mouse”
fig2_hovertool.mode
= “mouse”
fig2_hovertool.tooltips=OrderedDict([
("Days
Back", “$y”),
("Period",
“@paxis”),
("Height",
“@hh ft”),
("Direction",
“@dd”)
])
``
Thoughts:
1) My first idea is that could be passed to
the tap tool, so one could do something
similar with the 'geometry . I havn’t jumped
into the source yet but would be willing to
try hacking this together if there isn’t
already a solution out there.
2) A second idea would be to implement tool
tips for the tap tool. (Not sure how feasible
this might be, but would probably rely on 1) as
well).
3) What about a special mobile friendly
TapNStay tool that basically wrapps the hover
tool like functionality accessible to a touch
screen?
4) Designers would probably suggest I go lie
under a bus because such hover nonsense is
counter to their ideology.
–
You received this message because you are subscribed
to the Google Groups “Bokeh Discussion - Public”
group.
To unsubscribe from this group and stop receiving
emails from it, send an email to .
To post to this group, send email to .
To view this discussion on the web visit .
For more options, visit .
–
You received this message because you are subscribed to
the Google Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails
from it, send an email to [email protected].
To post to this group, send email to .
To view this discussion on the web visit .
–
Jeff Knowles
–
You received this message because you are subscribed to the Google
Groups “Bokeh Discussion - Public” group.
To unsubscribe from this group and stop receiving emails from it,
send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit [](https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAFd-tDbt93yUtmwFCxcUBxLHKJDndbCiUvPLv4d45QQm0ycY9g%40mail.gmail.com?utm_medium=email&utm_source=footer) .
For more options, visit .
[email protected]
[email protected]
https://groups.google.com/a/continuum.io/d/msgid/bokeh/804bbfc2-aa3d-4de8-9d23-afc93ed48030%40continuum.io
https://groups.google.com/a/continuum.io/d/optout
[email protected]
https://groups.google.com/a/continuum.io/d/msgid/bokeh/566F67C2.3060309%40alum.mit.edu
For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).
https://groups.google.com/a/continuum.io/d/msgid/bokeh/CAFd-tDbt93yUtmwFCxcUBxLHKJDndbCiUvPLv4d45QQm0ycY9g%40mail.gmail.com
https://groups.google.com/a/continuum.io/d/optout