Блог

Я пытаюсь создать интерактивное нормальное распределение в Боке, где вы можете манипулировать значениями mu и сигмы, чтобы увидеть, как это влияет на график.

Обе мои блесны прекрасно работают независимо друг от друга, но изменение одной сбрасывает другую. Может кто-нибудь указать, что я делаю не так?

Я не особенно разбираюсь в javascript. Сначала я попытался создать этот интерактивный сюжет, используя только Python, и это было успешно. Проблема в том, что его нужно запускать через боке, используя bokeh serve ... в моем терминале.

Я переписал код для использования обратных вызовов JS, чтобы сохранить его как отдельный html-файл, но теперь у меня возникли проблемы с подключением всех частей.

Любая помощь будет очень признательна. Код размещен ниже.

 import numpy as np

from scipy.stats import norm
from bokeh.io import curdoc
from bokeh.layouts import column, row
from bokeh.models import ColumnDataSource, Spinner, Slider, TextInput, CustomJS
from bokeh.plotting import figure, show, output_file, save

# Set up data
sig = .5
mu = .1
x = np.arange(-3, 3, 0.001)
y = norm.pdf(x, mu, sig)
source = ColumnDataSource(data=dict(x=x, y=y))


# Set up plot
plot = figure(height=400, width=400, title="Normal Distribution",
              tools="crosshair,pan,reset,save,wheel_zoom",
              x_range=[-2, 2], y_range=[0, 1])

plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)

callbackmu = CustomJS(args=dict(source=source, sig2=sig2), code="""
var data = source.data;
var input = cb_obj.value;
var s = sig2.value;

function fff (x, mu, sigma) {
    var num = Math.exp(-Math.pow((x - mu), 2) / (2 * Math.pow(sigma, 2)))
    var denom = sigma * Math.sqrt(2 * Math.PI)
    return num / denom
};

var a = input;

var x = data['x'];
var y = data['y'];

for (var i = 0; i < x.length; i  ) {
    y[i] = fff (x[i], a, s);
}

source.change.emit();
""")

callbacksig = CustomJS(args=dict(source=source, mu2=mu2), code="""
var data = source.data;
var input = cb_obj.value;
var m = mu2.value;
console.log(mu2)
function fff (x, mu, sigma) {
    var num = Math.exp(-Math.pow((x - mu), 2) / (2 * Math.pow(sigma, 2)))
    var denom = sigma * Math.sqrt(2 * Math.PI)
    return num / denom
};

var a = input;

var x = data['x'];
var y = data['y'];

for (var i = 0; i < x.length; i  ) {
    y[i] = fff (x[i], m, a);
}

source.change.emit();
""")
 
mu2 = Spinner(title="mu", value=mu, low=-2.0, high=2.0, step=0.1)
mu2.js_on_change('value', callbackmu)

sig2 = Spinner(title='sig', value=sig, low=.01, high=1, step=.01)
sig2.js_on_change('value', callbacksig)

layout = column(mu2, sig2, plot)

show(layout)
 

Я придурок.

Я поставил задания spinner перед заданиями обратного вызова, и теперь все работает.