Slider to change arrow orientation?

Community Support
1

Hi,
I’m trying to create a plot were the orientation of a arrow is changed by a slider.

However the orientation of the slider is not changer.

Can any one help me?

Here is my code:

import numpy as np

import matplotlib.pyplot as plt

from bokeh.layouts import row, widgetbox

from bokeh.models import CustomJS, Slider, Div

from bokeh.plotting import figure, output_file, show, ColumnDataSource

from bokeh.models import Arrow, OpenHead, NormalHead, VeeHead

xmin=-10

xmax=10

ymin=-10

ymax=10

deltax=xmax-xmin+1

beta=0.8

x = np.linspace(xmin,xmax,deltax)

xst1=[xmin,xmax]

yst1=[xminbeta,xmaxbeta]

source = ColumnDataSource( data=dict(xst1=xst1, yst1=yst1 ) )

plot = figure(y_range=(-10, 10),x_range=(-10, 10), plot_width=800, plot_height=800)

callback = CustomJS(code="""

var beta = beta.value;

if (!String.prototype.format) {

String.prototype.format = function() {

var args = arguments;

return this.replace(/{(\d+)}/g, function(match, number) {

return typeof args[number] != ‘undefined’

? args[number]

: match

;

});

};

}

para.text = “

Slider Values

Slider beta : {0}

”.format(beta);

“”")

para = Div(text="

Slider Values:

Slider beta: {0}

".format(beta))

beta_slider = Slider(title=“beta (Continuous)”, start=-1, end=1, value=beta, step=0.1, callback=callback, callback_policy=“continuous”)

beta_slider.js_on_change(‘value’, callback)

#plot.line(‘xst1’, ‘yst1’, source=source, line_width=1, color=“blue”, line_alpha=0.8)

xs=xmin

ys=xmin*beta_slider.value

xf=xmax

yf=xmax*beta_slider.value

plot eixo ct

plot.add_layout(Arrow(end=OpenHead(line_color=“blue”, line_width=2),x_start=xs, y_start=ys, x_end=xf, y_end=yf))

callback.args[‘para’] = para

callback.args[“beta”] = beta_slider

layout = row( plot, widgetbox(beta_slider,para))

output_file(“space-time-diagram.html”, title=“space_time_diagram.py example”)

show(layout)

2

Hi,

Nothing in this code is attempting to update the arrow's orientation. Can you provide example code for what you tried to do to update the arrow that did not work?

Thanks,

Bryan

···

On Apr 20, 2017, at 11:42, Rodrigo Alves Dias <[email protected]> wrote:

Hi,
I'm trying to create a plot were the orientation of a arrow is changed by a slider.
However the orientation of the slider is not changer.
Can any one help me?

Here is my code:

import numpy as np
import matplotlib.pyplot as plt

from bokeh.layouts import row, widgetbox
from bokeh.models import CustomJS, Slider, Div
from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import Arrow, OpenHead, NormalHead, VeeHead

xmin=-10
xmax=10

ymin=-10
ymax=10

deltax=xmax-xmin+1

beta=0.8
x = np.linspace(xmin,xmax,deltax)

xst1=[xmin,xmax]
yst1=[xmin*beta,xmax*beta]

source = ColumnDataSource( data=dict(xst1=xst1, yst1=yst1 ) )

plot = figure(y_range=(-10, 10),x_range=(-10, 10), plot_width=800, plot_height=800)

callback = CustomJS(code="""
    var beta = beta.value;
    if (!String.prototype.format) {
      String.prototype.format = function() {
        var args = arguments;
        return this.replace(/{(\d+)}/g, function(match, number) {
          return typeof args[number] != 'undefined'
            ? args[number]
            : match
          ;
        });
      };
    }
    para.text = "<h1>Slider Values</h1><p>Slider beta : {0}<p>".format(beta);
""")

para = Div(text="<h1>Slider Values:</h1><p>Slider beta: {0} <p>".format(beta))

beta_slider = Slider(title="beta (Continuous)", start=-1, end=1, value=beta, step=0.1, callback=callback, callback_policy="continuous")

beta_slider.js_on_change('value', callback)

#plot.line('xst1', 'yst1', source=source, line_width=1, color="blue", line_alpha=0.8)

xs=xmin
ys=xmin*beta_slider.value

xf=xmax
yf=xmax*beta_slider.value

# plot eixo ct
plot.add_layout(Arrow(end=OpenHead(line_color="blue", line_width=2),x_start=xs, y_start=ys, x_end=xf, y_end=yf))

callback.args['para'] = para
callback.args["beta"] = beta_slider

layout = row( plot, widgetbox(beta_slider,para))
output_file("space-time-diagram.html", title="space_time_diagram.py example")
show(layout)

--
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/74f407d5-ddd3-4829-9052-4cf6f63bc951%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

3

Hi Bryan,

Here is the code that I do.

This code works well. However the two lines blue and brown I want to change by arrows.

And the label of this arrows ct’(m) and x’(m) I want to then follow the arrows when I change beta.

import numpy as np

import matplotlib.pyplot as plt

from bokeh.layouts import row, widgetbox

from bokeh.models import CustomJS, Slider

from bokeh.plotting import figure, output_file, show, ColumnDataSource

from bokeh.models import Arrow, OpenHead, NormalHead, VeeHead

xmin=-10

xmax=10

ymin=-10

ymax=10

deltax=xmax-xmin+1

beta=0.1

x = np.linspace(xmin,xmax,deltax)

y = beta*x

y1 =x/beta

source = ColumnDataSource(data=dict(x=x, y=y, y1=y1,x1=-x))

plot = figure(y_range=(-10, 10),x_range=(-10, 10), plot_width=800, plot_height=800)

plot eixo ct

plot.add_layout(Arrow(end=OpenHead(line_color=“black”, line_width=3),x_start=0, y_start=-10, x_end=0, y_end=10))

plot.text( [-2], [ymax-1], text=[“ct(ano-luz)”], text_color=“black”, text_align=“center”, text_font_size=“15pt”)

plot eixo x

plot.add_layout(Arrow(end=OpenHead(line_color=“black”, line_width=3),x_start=-10, y_start=0, x_end=10, y_end=0))

plot.text( [xmax-1.5], [-1], text=[“x(ano-luz)”], text_color=“black”, text_align=“center”, text_font_size=“15pt”)

plot eixo luz

plot.line(‘x’, ‘x’, source=source, line_width=1, color=“red”, line_alpha=0.8)

plot.text( [xmax-1], [ymax-1], text=[“eixo luz”], text_color=“red”, text_align=“center”, text_font_size=“10pt”)

plot.line(‘x’, ‘x1’, source=source, line_width=1, color=“red”, line_alpha=0.8)

plot.text( [xmin+1], [ymax-1], text=[“eixo luz”], text_color=“red”, text_align=“center”, text_font_size=“10pt”)

callback = CustomJS(args=dict(source=source), code=“”"

var data = source.data;

var beta = beta.value;

x = data[‘x’]

y = data[‘y’]

y1 = data[‘y1’]

for (i = 0; i < x.length; i++) {

x[i] = -10+i

y[i] = beta*(-10+i);

}

for (i = 0; i < x.length; i++) {

y1[i] = (-10+i)/beta;

}

source.trigger(‘change’);

“”")

beta_slider = Slider(start=-1, end=1, value=0.1, step=.1, title=“Beta”, callback=callback)

callback.args[“beta”] = beta_slider

plot eixo x’

plot.line(‘x’, ‘y’, source=source, line_width=3, color=“brown”, line_alpha=0.6)

plot.text( [xmax-2], [beta_slider.value*xmax-1], text=[“x’(ano-luz)”], text_color=“brown”, text_align=“center”, text_font_size=“15pt”)

plot eixo ct’

plot.line(‘x’, ‘y1’, source=source, line_width=3, color=“blue”, line_alpha=0.8)

plot.text( [beta_slider.value*xmax], [ymax-1], text=[“ct’(ano-luz)”], text_color=“blue”, text_align=“center”, text_font_size=“15pt”)

layout = row( plot, widgetbox(beta_slider))

output_file(“space-time-diagram.html”, title=“space_time_diagram.py example”)

show(layout)

···

2017-04-22 18:36 GMT-03:00 Bryan Van de ven [email protected]:

Hi,

Nothing in this code is attempting to update the arrow’s orientation. Can you provide example code for what you tried to do to update the arrow that did not work?

Thanks,

Bryan

On Apr 20, 2017, at 11:42, Rodrigo Alves Dias [email protected] wrote:

Hi,

I’m trying to create a plot were the orientation of a arrow is changed by a slider.

However the orientation of the slider is not changer.

Can any one help me?

Here is my code:

import numpy as np

import matplotlib.pyplot as plt

from bokeh.layouts import row, widgetbox

from bokeh.models import CustomJS, Slider, Div

from bokeh.plotting import figure, output_file, show, ColumnDataSource

from bokeh.models import Arrow, OpenHead, NormalHead, VeeHead

xmin=-10

xmax=10

ymin=-10

ymax=10

deltax=xmax-xmin+1

beta=0.8

x = np.linspace(xmin,xmax,deltax)

xst1=[xmin,xmax]

yst1=[xminbeta,xmaxbeta]

source = ColumnDataSource( data=dict(xst1=xst1, yst1=yst1 ) )

plot = figure(y_range=(-10, 10),x_range=(-10, 10), plot_width=800, plot_height=800)

callback = CustomJS(code=“”"

var beta = beta.value;

if (!String.prototype.format) {

  String.prototype.format = function() {

    var args = arguments;

    return this.replace(/{(\d+)}/g, function(match, number) {

      return typeof args[number] != 'undefined'

        ? args[number]

        : match

      ;

    });

  };

}

para.text = "<h1>Slider Values</h1><p>Slider beta : {0}<p>".format(beta);

“”")

para = Div(text=“

Slider Values:

Slider beta: {0}

”.format(beta))

beta_slider = Slider(title=“beta (Continuous)”, start=-1, end=1, value=beta, step=0.1, callback=callback, callback_policy=“continuous”)

beta_slider.js_on_change(‘value’, callback)

#plot.line(‘xst1’, ‘yst1’, source=source, line_width=1, color=“blue”, line_alpha=0.8)

xs=xmin

ys=xmin*beta_slider.value

xf=xmax

yf=xmax*beta_slider.value

plot eixo ct

plot.add_layout(Arrow(end=OpenHead(line_color=“blue”, line_width=2),x_start=xs, y_start=ys, x_end=xf, y_end=yf))

callback.args[‘para’] = para

callback.args[“beta”] = beta_slider

layout = row( plot, widgetbox(beta_slider,para))

output_file(“space-time-diagram.html”, title=“space_time_diagram.py example”)

show(layout)

–

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/74f407d5-ddd3-4829-9052-4cf6f63bc951%40continuum.io.

For more options, visit 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/F6154E09-0B61-410D-A677-16D4B30EF01E%40continuum.io.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.

–

Atenciosamente,
Prof. Dr. Rodrigo Alves Dias
(32) 9984-5746
Link curriculo lattes:
http://lattes.cnpq.br/3479575257091790
UFJF-Juiz de Fora - Física - ICE

4

Arrows have their own data source property:

  annotations — Bokeh 3.3.2 Documentation

You can provide and explicitly it in the same way you are doing for the line glyphs. Or, if you provide the arrow coordinates as list literals, then that data will go in a .source that gets automatically created for you (which again, you can update the same way you update the line glyphs)

Thanks

Bryan

···

On Apr 22, 2017, at 16:51, Rodrigo Alves Dias <[email protected]> wrote:

Hi Bryan,

Here is the code that I do.
This code works well. However the two lines blue and brown I want to change by arrows.
And the label of this arrows ct'(m) and x'(m) I want to then follow the arrows when I change beta.

import numpy as np
import matplotlib.pyplot as plt
from bokeh.layouts import row, widgetbox
from bokeh.models import CustomJS, Slider
from bokeh.plotting import figure, output_file, show, ColumnDataSource
from bokeh.models import Arrow, OpenHead, NormalHead, VeeHead

xmin=-10
xmax=10

ymin=-10
ymax=10

deltax=xmax-xmin+1

beta=0.1
x = np.linspace(xmin,xmax,deltax)
y = beta*x
y1 =x/beta

source = ColumnDataSource(data=dict(x=x, y=y, y1=y1,x1=-x))

plot = figure(y_range=(-10, 10),x_range=(-10, 10), plot_width=800, plot_height=800)

# plot eixo ct
plot.add_layout(Arrow(end=OpenHead(line_color="black", line_width=3),x_start=0, y_start=-10, x_end=0, y_end=10))
plot.text( [-2], [ymax-1], text=["ct(ano-luz)"], text_color="black", text_align="center", text_font_size="15pt")

# plot eixo x
plot.add_layout(Arrow(end=OpenHead(line_color="black", line_width=3),x_start=-10, y_start=0, x_end=10, y_end=0))
plot.text( [xmax-1.5], [-1], text=["x(ano-luz)"], text_color="black", text_align="center", text_font_size="15pt")

# plot eixo luz
plot.line('x', 'x', source=source, line_width=1, color="red", line_alpha=0.8)
plot.text( [xmax-1], [ymax-1], text=["eixo luz"], text_color="red", text_align="center", text_font_size="10pt")
plot.line('x', 'x1', source=source, line_width=1, color="red", line_alpha=0.8)
plot.text( [xmin+1], [ymax-1], text=["eixo luz"], text_color="red", text_align="center", text_font_size="10pt")

callback = CustomJS(args=dict(source=source), code="""
    var data = source.data;
    var beta = beta.value;
    x = data['x']
    y = data['y']
    y1 = data['y1']
    
    for (i = 0; i < x.length; i++) {
        x[i] = -10+i
        y[i] = beta*(-10+i);
    }
    
    for (i = 0; i < x.length; i++) {
        y1[i] = (-10+i)/beta;
    }
    
    source.trigger('change');
""")

beta_slider = Slider(start=-1, end=1, value=0.1, step=.1, title="Beta", callback=callback)
callback.args["beta"] = beta_slider

# plot eixo x'
plot.line('x', 'y', source=source, line_width=3, color="brown", line_alpha=0.6)

plot.text( [xmax-2], [beta_slider.value*xmax-1], text=["x'(ano-luz)"], text_color="brown", text_align="center", text_font_size="15pt")

# plot eixo ct'
plot.line('x', 'y1', source=source, line_width=3, color="blue", line_alpha=0.8)
plot.text( [beta_slider.value*xmax], [ymax-1], text=["ct'(ano-luz)"], text_color="blue", text_align="center", text_font_size="15pt")

layout = row( plot, widgetbox(beta_slider))

output_file("space-time-diagram.html", title="space_time_diagram.py example")

show(layout)

2017-04-22 18:36 GMT-03:00 Bryan Van de ven <[email protected]>:
Hi,

Nothing in this code is attempting to update the arrow's orientation. Can you provide example code for what you tried to do to update the arrow that did not work?

Thanks,

Bryan

> On Apr 20, 2017, at 11:42, Rodrigo Alves Dias <[email protected]> wrote:
>
> Hi,
> I'm trying to create a plot were the orientation of a arrow is changed by a slider.
> However the orientation of the slider is not changer.
> Can any one help me?
>
> Here is my code:
>
> import numpy as np
> import matplotlib.pyplot as plt
>
> from bokeh.layouts import row, widgetbox
> from bokeh.models import CustomJS, Slider, Div
> from bokeh.plotting import figure, output_file, show, ColumnDataSource
> from bokeh.models import Arrow, OpenHead, NormalHead, VeeHead
>
>
> xmin=-10
> xmax=10
>
> ymin=-10
> ymax=10
>
> deltax=xmax-xmin+1
>
> beta=0.8
> x = np.linspace(xmin,xmax,deltax)
>
> xst1=[xmin,xmax]
> yst1=[xmin*beta,xmax*beta]
>
> source = ColumnDataSource( data=dict(xst1=xst1, yst1=yst1 ) )
>
> plot = figure(y_range=(-10, 10),x_range=(-10, 10), plot_width=800, plot_height=800)
>
> callback = CustomJS(code="""
> var beta = beta.value;
> if (!String.prototype.format) {
> String.prototype.format = function() {
> var args = arguments;
> return this.replace(/{(\d+)}/g, function(match, number) {
> return typeof args[number] != 'undefined'
> ? args[number]
> : match
> ;
> });
> };
> }
> para.text = "<h1>Slider Values</h1><p>Slider beta : {0}<p>".format(beta);
> """)
>
> para = Div(text="<h1>Slider Values:</h1><p>Slider beta: {0} <p>".format(beta))
>
> beta_slider = Slider(title="beta (Continuous)", start=-1, end=1, value=beta, step=0.1, callback=callback, callback_policy="continuous")
>
> beta_slider.js_on_change('value', callback)
>
> #plot.line('xst1', 'yst1', source=source, line_width=1, color="blue", line_alpha=0.8)
>
> xs=xmin
> ys=xmin*beta_slider.value
>
> xf=xmax
> yf=xmax*beta_slider.value
>
>
> # plot eixo ct
> plot.add_layout(Arrow(end=OpenHead(line_color="blue", line_width=2),x_start=xs, y_start=ys, x_end=xf, y_end=yf))
>
> callback.args['para'] = para
> callback.args["beta"] = beta_slider
>
>
> layout = row( plot, widgetbox(beta_slider,para))
> output_file("space-time-diagram.html", title="space_time_diagram.py example")
> show(layout)
>
>
>
>
> --
> 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/74f407d5-ddd3-4829-9052-4cf6f63bc951%40continuum.io\.
> For more options, visit 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/F6154E09-0B61-410D-A677-16D4B30EF01E%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.

--
Atenciosamente,
Prof. Dr. Rodrigo Alves Dias
(32) 9984-5746
Link curriculo lattes:
http://lattes.cnpq.br/3479575257091790
UFJF-Juiz de Fora - Física - ICE

--
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/CAL_gu0O6uMM1-uOtxtrdnF-9T27W-UjnLAUs%3D2jhQ-mZsj_Erw%40mail.gmail.com\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.