Introduction to Bokeh

from bokeh.plotting import figure
from bokeh.io import output_notebook, show
output_notebook()

from numpy import linspace
x = linspace(-10,10,100)
y = x**3
y1 = x**2
y2 = x

fig = figure(width=500,height=500) 
fig.circle(x,y,size=6,color="red",alpha=0.5) #Here we will call the circle glyph
fig.square(x,y1,size=6,color="green",alpha=0.5)
fig.triangle(x,y2,size=6,color="purple",alpha=0.5)
show(fig)

from bokeh.sampledata.autompg import autompg
print(autompg)

grouped = autompg.groupby("yr") #Pandas Dataframe
mpg = grouped.mpg #Pandas Series
avg,std = mpg.mean(),mpg.std()
print("Average mpg: {} / Std Dev mpg: {}".format(avg,std))

years = list(grouped.groups)
print(years)

american = autompg[autompg["origin"]==1]
japanese = autompg[autompg["origin"]==3]
german = autompg[autompg["origin"]==2]

print(american)
print(japanese)
print(german)

fig = figure(title="MPG by Year (US, Germany, Japan)")

fig.vbar(x=years,bottom=avg-std, top=avg+std,width=0.8,fill_alpha=0.2,line_color=None,legend_label="MPG +/- 1 Stddev")

fig.square(x=japanese["yr"],y=japanese["mpg"],size=10,alpha=0.5,color="green",legend_label="Japanese")
fig.diamond(x=american["yr"],y=american["mpg"],size=10,alpha=0.5,color="red",legend_label="American")
fig.circle(x=german["yr"],y=german["mpg"],size=10,alpha=0.5,color="blue",legend_label="German")

show(fig)

from bokeh.models import ColumnDataSource

data = {'x_values': [1, 2, 3, 4, 5],
        'y_values': [6, 7, 2, 3, 6]} #Note that the structure of the data is in a dictionary format with strings type headers

source = ColumnDataSource(data=data) #The dictionary type is coverted into a ColumnDataSource

p = figure() 
p.circle(x='x_values', y='y_values', source=source)
show(p)

from bokeh.layouts import gridplot #Import gridplot library
print(type(autompg))

source = ColumnDataSource(autompg) #Convert the autompg dataframe into a Column Data Source
print(type(source))

options = dict(plot_width=300, plot_height=300,
               tools="pan,wheel_zoom,box_zoom,box_select,lasso_select")

fig1 = figure(title="MPG by Year", **options)  #Create the first figure
fig2 = figure(title="HP vs. Displacement", **options) #Create the second figure
fig3 = figure(title="MPG vs. Displacement", **options) #Create the third figure

#Single and double asterik variables permit the passing of multiple arguments (*) or keyword=arguments (**)
#Reference: https://stackoverflow.com/questions/36901/what-does-double-star-asterisk-and-star-asterisk-do-for-parameters

fig1.circle("yr", "mpg", color="blue", source=source) #Circle plot first figure
fig2.circle("hp", "displ", color="green", source=source) #Circle plot second figure
fig3.circle("mpg", "displ", size="cyl", line_color="red", fill_color=None, source=source) #Modified circle plot third figure

fig = gridplot([[ fig1, fig2, fig3]], toolbar_location="right") #Place figures into the grid and locate the toolbar

show(fig)

from bokeh.models import ColumnDataSource, CDSView, IndexFilter
from bokeh.plotting import figure, output_file, show

source = ColumnDataSource(data = dict(x = list(range(1,11)), y = list(range(2,22,2)))) #Generate data

view = CDSView(source=source, filters = [IndexFilter([0, 2, 4,6])]) #Adjust the view of the data applied on the figure

fig = figure(title = 'Line Plot example', x_axis_label = 'x', y_axis_label = 'y')
fig.circle(x = "x", y = "y", size = 10, source = source, view = view, legend_label = 'filtered') #Apply the view
fig.line(x="x", y="y", source=source, legend_label='unfiltered') #The view is not applied here
show(fig)

from bokeh.models import ColumnDataSource, CDSView, BooleanFilter
from bokeh.plotting import figure, show
from bokeh.sampledata.unemployment1948 import data

source = ColumnDataSource(data) #Convert the Unemployment dataframe to a ColumnSourceData 

booleans = [True if int(year) >= 1980 else False for year in source.data['Year']] #Using an if statement list comprehension

print (booleans)

view1 = CDSView(source = source, filters=[BooleanFilter(booleans)]) #Use the BooleanFilter instead of the IndexFilter

p = figure(title = "Unemployment data", x_axis_label = 'Year', y_axis_label='Percentage')# x_range = (1980,2020)
p.circle(x = 'Year', y = 'Annual', source = source, view = view1, color = 'red')
p.line(x = 'Year', y = 'Annual', source = source, color = 'blue')
show(p)

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

output_file("js_on_change.html")

x = [x*0.005 for x in range(0, 200)]
y = x

source = ColumnDataSource(data=dict(x=x, y=y))

plot = Figure(plot_width=400, plot_height=400)
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6)


callback = CustomJS(args=dict(source=source), code="""
    var data = source.data;    
    var f = cb_obj.value; 
    console.log(cb_data);
    console.log(cb_obj);
    var x = data['x'];
    var y = data['y'];
    for (var i = 0; i < x.length; i++) {
        y[i] = Math.pow(x[i], f);
    }
    source.change.emit();
""")

slider = Slider(start=0.1, end=4, value=1, step=.1, title="power")
slider.js_on_change('value', callback)

layout = column(plot,slider)

show(layout)