CODEWITHSUNDEEP
pythonhistogrambokehinteractive
A.Papa
A.Papa

Reputation: 486

Interactive Plot of Data frame: Drop Down menu to select columns to Display (Bokeh)

I am trying to use Bokeh library for the first time but I find the documentation not so straightforward.

I have a dataframe df:

A   B   C
1   4   6
2   3   5
3   2   4
4   1   3

I would like to create a histogram with Boken with an widget integrated in order for the user to select a column (A B or and C) to display.

I have written the below:

import pandas as pd

d= {'A': [1, 2,3,4], 'cB': [4,3,2,1], 'C' : [6,5,4,3]}

df = pd.DataFrame(data=d)

names = ["A","B", "C"]

from bokeh.io import output_file, show
from bokeh.layouts import widgetbox
from bokeh.models.widgets import MultiSelect
from bokeh.io import curdoc

# drop table
curdoc().clear() 
# create drop down  #define witget

output_file("multi_select.html")
Field =  MultiSelect(title="Features:", value=["A"],
                           options=names)
show(widgetbox(Field))



from bokeh.charts import Histogram, output_file, show
from bokeh.layouts import row, layout
from bokeh.models.sources import ColumnDataSource
curdoc().clear()
source = ColumnDataSource(df)

hist = Histogram(df, values="A", title="A", plot_width=400) #not sure why I cannot use source instead of df

output_file('hist.html')
show(hist)

So now I need to connect the plot with the widget.

I tried the below but it does not seem to work.

hist = Histogram(df, values={'Field'}, title={'Field'}, plot_width=400)

Any other solution not using the bokeh library is welcome, I run the code with Spyder editor and I use IE to visualize results.

Upvotes: 1

Views: 4084

Answers (2)

Space Impact
Space Impact

Reputation: 13255

Use this code you will able to interact with columns. I am using latest versions of Pandas, Numpy and Bokeh. In new update Bokeh.charts is deprecated.

import pandas as pd
import numpy as np

#Pandas version 0.22.0
#Bokeh version 0.12.10
#Numpy version 1.12.1

from bokeh.io import output_file, show,curdoc
from bokeh.models import Quad
from bokeh.layouts import row, layout,widgetbox
from bokeh.models.widgets import Select,MultiSelect
from bokeh.plotting import ColumnDataSource,Figure,reset_output,gridplot

d= {'A': [1,1,1,2,2,3,4,4,4,4,4], 'B': [1,2,2,2,3,3,4,5,6,6,6], 'C' : [2,2,2,2,2,3,4,5,6,6,6]}
df = pd.DataFrame(data=d)
names = ["A","B", "C"]

#Since bokeh.charts are deprecated so using the new method using numpy histogram
hist,edge = np.histogram(df['A'],bins=4)
#This is the method you need to pass the histogram objects to source data here it takes edge values for each bin start and end and hist gives count.
source = ColumnDataSource(data={'hist': hist, 'edges_rt': edge[1:], 'edges_lt':edge[:-1]})

plot = Figure(plot_height = 300,plot_width = 400)
#The quad is used to display the histogram using bokeh.
plot.quad(top='hist', bottom=0, left='edges_lt', right='edges_rt',fill_color="#036564", 
          line_color="#033649",source = source)

#When you change the selection it will this function and changes the source data so that values are updated.
def callback_menu(attr, old, new):

    hist,edge = np.histogram(df[menu.value],bins=4)
    source.data={'hist': hist,'edges_rt': edge[1:], 'edges_lt': edge[:-1]}

#These are interacting tools in the final graph
menu = MultiSelect(options=names,value= ['A','B'], title='Sensor Data')
menu.on_change('value', callback_menu)
layout = gridplot([[widgetbox(menu),plot]])
curdoc().add_root(layout)

Once you save the file use the following command in the Anaconda prompt in the same directory to start bokeh server so that you can interact with the graph.

bokeh serve --show Python_Program_Name.py

Once you run the graph and select look like this Output

Upvotes: 2

A.Papa
A.Papa

Reputation: 486

So I still did not manage to use bokeh with callback function and dataframe. However, I found a really simple alternative, when working with Jupiter,

import matplotlib.pyplot as pl
hue = ["A", "B"]
@interact (col= ["A", "B", "C"])
def plot(col):
    pl.figure()
    pl.hist( df[col]) 
    pl.show()

plot(col)

Upvotes: 2

Related Questions