使用 callback/widget 指定范围绘制正态分布

Question

我正在尝试绘制一个正态分布，您可以在其中指定范围。我需要 return 这个作为 html。我使用了 this example 中的一些代码。我需要做什么才能使回调正常工作？现在，当我在浏览器中检查开发人员工具时，出现 list not defined 错误。

import numpy as np
import scipy.stats

from bokeh.layouts import column
from bokeh.models import CustomJS, Slider
from bokeh.plotting import figure, output_file, show, ColumnDataSource

output_file("slider2.html")
N = 500;a = 0;b = 1
x = list(np.linspace(a, b, N))
z = list(scipy.stats.norm.pdf(x,abs(b-a)/2,abs(b-a)/6))
source = ColumnDataSource(data=dict(x=x,z=z))

plot = figure(plot_width=400, plot_height=400)
plot.line('x', 'z', source=source, line_width=2, line_alpha=0.3)

callback = CustomJS(args=dict(source=source), code="""
    var d2 = source.get('data');
    var b = cb_obj.get('value')
    d2['x'] = list(np.linspace(a, b, N))
    d2['z'] = scipy.stats.norm.pdf(x,abs(b-a)/2,abs(b-a)/6);
    source.change.emit();
""")

slider = Slider(start=1, end=10, value=1, step=.1, title="upper limit", callback=callback)
layout = column(slider, plot)
show(layout)

Answer 1

经过一些修补，我设法得到了我想要的结果。

总结上面的讨论：CustomJS 代码必须用纯 Javascript 编写。因此，使用任何 python 函数都会导致 html 文件中出现错误。但是可以使用 Javascript 函数。

callback = CustomJS(args=dict(source=source), code="""
   var d2 = source.get('data');
   var b = cb_obj.get('value')
   for (i = 0; i < 1000; i++) {
      x[i]=Math.random()*b
   }
   x.sort(function(a, b){return a - b})
   source.data['x']=x
   z=d2['z']  
   var first=(1/Math.sqrt(2*Math.PI*Math.pow(b/6,2)))
   for (i = 0; i < x.length; i++) {
      z[i] = first*(Math.exp(-Math.pow((x[i]-(b/2))/(b/6),2)));
   }
   source.trigger('change');
""")

使用 callback/widget 指定范围绘制正态分布

Plot a normal distribution using a callback/widget to specify the range

javascript

python

bokeh