Bokeh JavaScript Callbacks
Bokeh adalah sebuah library Python yang memungkinkan Anda untuk membuat visualisasi interaktif yang menarik. Salah satu fitur yang sangat kuat dari Bokeh adalah kemampuan untuk menggunakan JavaScript callbacks. Callbacks memungkinkan Anda untuk menjalankan kode JavaScript saat terjadi interaksi dengan plot, seperti mengklik pada titik data, menggerakkan slider, atau memilih area pada plot.
Berikut adalah beberapa cara umum untuk menggunakan callbacks dalam Bokeh:
1. Click Events:
Anda dapat menggunakan callbacks untuk merespons klik pada titik data di plot. Berikut adalah contoh cara menambahkan callback untuk menampilkan informasi tentang titik data yang diklik:
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS
source = ColumnDataSource(data={'x': [1, 2, 3], 'y': [4, 5, 6]})
p = figure(title="Click to display information")
p.circle('x', 'y', source=source)
callback = CustomJS(args=dict(source=source), code="""
const indices = cb_data.index.indices;
const x = source.data.x[indices[0]];
const y = source.data.y[indices[0]];
alert("You clicked on point: (x=" + x + ", y=" + y + ")");
""")
p.on_event('tap', callback)
show(p)
Kode ini akan menampilkan pesan alert dengan koordinat titik data yang diklik.
2. Slider Events:
Callbacks juga dapat digunakan untuk merespons perubahan slider. Berikut adalah contoh cara menggunakan callback untuk memperbarui data plot berdasarkan nilai slider:
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS, Slider
source = ColumnDataSource(data={'x': [1, 2, 3], 'y': [4, 5, 6]})
p = figure(title="Slider to update plot")
p.circle('x', 'y', source=source)
slider = Slider(start=0, end=10, value=5, step=1, title="Slider Value")
callback = CustomJS(args=dict(source=source, slider=slider), code="""
source.data.y = [slider.value * x for x in source.data.x];
source.change.emit();
""")
slider.js_on_change('value', callback)
show(p, slider)
Kode ini akan mengubah nilai Y pada plot setiap kali nilai slider diubah.
3. Range Events:
Callbacks dapat digunakan untuk merespons perubahan pada area plot yang terlihat. Berikut adalah contoh cara menggunakan callback untuk menampilkan koordinat area yang dipilih:
from bokeh.plotting import figure, show
from bokeh.models import CustomJS, Range1d
p = figure(title="Select area to display coordinates")
p.circle([1, 2, 3], [4, 5, 6])
callback = CustomJS(args=dict(x_range=p.x_range, y_range=p.y_range), code="""
const x_start = x_range.start;
const x_end = x_range.end;
const y_start = y_range.start;
const y_end = y_range.end;
alert("Selected area: x=[" + x_start + ", " + x_end + "], y=[" + y_start + ", " + y_end + "]");
""")
p.x_range.js_on_change('start', callback)
p.x_range.js_on_change('end', callback)
p.y_range.js_on_change('start', callback)
p.y_range.js_on_change('end', callback)
show(p)
Kode ini akan menampilkan pesan alert dengan koordinat area yang dipilih saat pengguna menggerakkan mouse di plot.
Kesimpulan:
Bokeh JavaScript callbacks merupakan alat yang sangat kuat untuk membuat visualisasi interaktif. Dengan menggunakan callbacks, Anda dapat menambah interaktivitas dan kemampuan untuk berinteraksi dengan data Anda dalam plot Bokeh.