rangesliderを使用して時系列グラフを作成する

Question

スライダーをドラッグするときに表示されるグラフの部分は、スライダー上にあるものだけを作成しようとしています。たとえば、下のグラフを見ると、スライダが1990に設定されていれば、1990年から2016年までの線のみが表示されます。plotlyの実例が見つかりましたが、Bokehで実行できるかどうかを確認したいと考えました。

p = figure(width = 900, height = 450) 
p.xaxis.axis_label = 'Year' 
p.yaxis.axis_label = 'Aggregated Number of Degrees in Education' 

source = ColumnDataSource(df) 
fill_source = ColumnDataSource(data=dict(x=[],y=[])) 

# Create objects for each line that will be plotted 
stem = p.line('year', 'stem', line_color='#8dd3c7', line_width=3, source=source) 
stem = p.circle('year', 'stem', line_color='#8dd3c7', line_width=3, source=source) 
sped = p.line('year', 'sped', line_color='#fdb462', line_width=3, source=source) 
elem = p.line('year', 'elem', line_color='#bebada', line_width=3, source=source) 
elem = p.square('year', 'elem', line_color='#bebada', line_width=3, source=source) 
other = p.line('year', 'other', line_color='#fb8072', line_width=4, source=source) 
aggtotal = p.line('year', 'aggtotal', line_dash=[4,4,], line_color='#80b1d3', line_width=3, source=source) 

yaxis = p.select(dict(type=Axis, layout="left"))[0] 
yaxis.formatter.use_scientific = False  
legend = Legend(items=[("STEM", [stem]) 
         ,("SPED" , [sped]) 
         ,("Elementary", [elem]) 
         ,("Other", [other]) 
         ,("Total Education Graduates", [aggtotal])], location=(0, 0)) 
p.add_tools(HoverTool(tooltips=[("Date", "@year")])) 
p.add_layout(legend, 'right')  

callback_test = CustomJS(args=dict(source=source,fill_source=fill_source), code=""" 
var data = source.data; 
var fill_data = fill_source.data; 
var s_val = cb_obj.value; 
fill_data['x']=[]; 
fill_data['y']=[]; 
for (i = 0; i < s_val; i++) { 
    fill_data['y'][i].push(data['y'][i]); 
    fill_data['x'][i].push(data['x'][i]);   
    } 
fill_source.trigger('change'); 
""") 

sped_slider = Slider(start=1984, end= 2016, value=1, step=1,title="Year",callback=callback_test) 
callback_test.args["sped"] = sped_slider 
layout = row(p,widgetbox(sped_slider)) 

これはスライダーをレンダリングするが、それは何もしないと、私はどこここから行くのか分からない：

これは、これまでのところ、私のコードです。

Answer 1

あなたのコールバックコードにはいくつかの問題があります。たとえば、次のようにあなたの配列の長さと一致していない（1990年かもしれない）0からs_valへ

• あなたがループi。
• あなたのグリフが列'stem'などを参照する...しかしfill_sourceは、列'x'と'y'
• あなたのグリフがソースとしてsourceを参照していますがfill_sourceにイベントを変更し、トリガーがあります。

これはすべて修正されている可能性がありますが、はるかに簡単な方法があります。コールバックの範囲を調整します。例えば。あなたのコールバックを次のように置き換えてください：

x_range = p.x_range 
callback_test = CustomJS(args=dict(x_range=x_range), code=""" 
    var start = cb_obj.value; 
    x_range.start = start; 
    x_range.change.emit(); 
""") 

イベントトリガーへの変更に注意してください。あなたのバージョンは動作しますが、私はそれが非難されると思います。また

：

• このラインcallback_test.args["sped"] = sped_sliderあなたはまだスライダーの間にレイアウトの問題を抱えているとしているあなたは伝説
• との競合のレンダリングを避けるためにfigure(...)でtoolbar_location='above'を追加することができ
• 必要はありませんさまざまな方法で固定することができる凡例（スライダの下にスライダと凡例をcolumnに入れてからプロットの右側に追加するなど）