Thursday 31 December 2020

Modify python array using graphical interaction (Bokeh or Javascript)

I have a 1-D numpy array eg.[1,0,6,3,2,1,6,4,3,2,1] which I have been able to graphically display as a histogram graph using the Bokeh Library.

I would like to be able to modify the array using graphical interaction.

Ideally I would like to be able to shift 1 value at a time.

Any ideas would be appreciated :)

Example enter image description here

import numpy as np
import pandas as pd
from bokeh.models import ColumnDataSource, Grid, LinearAxis, Plot, Quad,Range1d,HoverTool, Panel, Tabs,Legend, LegendItem,FixedTicker,NumeralTickFormatter,SingleIntervalTicker
from bokeh.plotting import figure
from bokeh.embed import components
from bokeh.io import curdoc, show

#-------------------------------------------------------------------------------------------------
# Create Data
#-------------------------------------------------------------------------------------------------
Values= np.random.randint(0,6000,800)


def Values_to_Bins(Values, Bin_size): #takes in a numpy array of values, and the Bin size
    Min_Value = np.amin(Values)
    Max_Value =np.amax(Values)
    bins = np.arange(Min_Value, Max_Value + 2 * (Bin_size), Bin_size)  # Define bin edges
    hist_array, edges = np.histogram(Values,bins=bins)  # Create 2 arrays, hist_array represents the bin counts, edges is the bin edges
    return hist_array,edges #Returns the histogram array, and edges
# -------------------------------------------------------------------------------------------------
# STEP X: Create Bokeh Histogram Plots
# -------------------------------------------------------------------------------------------------
hist_array,edges = Values_to_Bins(Values, 15)

# Create a Pandas Dataframe 
Bokeh_Bins = pd.DataFrame({'Values': hist_array, 'left': edges[:-1], 'right': edges[1:]})
Max_Initial_Bin = Bokeh_Bins['Values'].max()

# Create a column showing the extent of each interval
Bokeh_Bins['Bin_interval'] = ['%d to %d ms' % (left, right) for left, right in
                              zip(Bokeh_Bins['left'], Bokeh_Bins['right'])]

tick_vals = np.arange(Max_Initial_Bin + 1)

# Convert dataframe to column data source
src1 = ColumnDataSource(Bokeh_Bins)

plot = figure(y_range=Range1d(start=0, end=Max_Initial_Bin), sizing_mode="scale_width", width=3000, height=600,
              title="Want to create interactive Histogram data",
              x_axis_label="Time (ms)",
              y_axis_label="Number of occurances")
plot.yaxis.ticker = FixedTicker(ticks=list(tick_vals))

plot.quad(bottom=0, top='Values', left='left',
          right='right', source=src1, fill_color="#939393",
          line_color='black', fill_alpha=0.5,
          hover_fill_alpha=1.0, hover_fill_color='#00E400')

# Add hover tool for when mouse is over data
hover1 = HoverTool(tooltips=[('Timeframe', '@Bin_interval'), ('Count', '@Values')])
plot.add_tools(hover1)
original_script, original_div = components(plot)
show(plot)


from Modify python array using graphical interaction (Bokeh or Javascript)

No comments:

Post a Comment