Interactive Data Visualization + Bokeh

Interactive data visualization allows users to directly manipulate and explore data representations, enabling deeper insights than static plots. It involves features like zooming, panning, filtering, hovering for details, and dynamically updating views based on user input, fostering a more engaging and effective data exploration experience.

Bokeh is an open-source Python library that provides elegant and versatile graphics for web browsers. It stands out in the realm of interactive visualization due to its ability to create highly interactive plots, dashboards, and data applications. Unlike libraries that produce static images, Bokeh renders plots as JSON objects that are then consumed by a JavaScript client, allowing for rich client-side interactivity without requiring a Bokeh server for basic interactions.

Key features of Bokeh for interactive visualization include:

1. Built-in Tools: Plots come with standard interactive tools like pan, zoom, box select, lasso select, hover, save, and reset, which are automatically available to the user.
2. Widgets: Bokeh provides a range of UI widgets such as sliders, dropdowns, buttons, checkboxes, and text inputs, which can be linked to plot properties or underlying data.
3. Callbacks: These are functions (Python or JavaScript) that execute in response to user actions (e.g., changing a slider value, selecting points). Callbacks enable dynamic updates to plots or other widgets, either on the client side (with JavaScript) or server side (with Python).
4. Linking Plots: Multiple plots can be linked together, so actions in one plot (e.g., zooming, selecting) reflect in others, facilitating multi-dimensional data exploration.
5. Bokeh Server: For more complex, data-intensive interactivity or when Python logic needs to run on the server in response to client actions, the Bokeh Server can be used. It provides a way to build interactive web applications that connect front-end UI events to back-end Python code.

Bokeh's output can be standalone HTML files, embedded into Jupyter notebooks, or served as fully interactive web applications via the Bokeh server. This makes it a powerful tool for creating exploratory data analysis tools, interactive reports, and dashboards that can be easily shared and consumed in a web environment.

import numpy as np
from bokeh.plotting import figure, show
from bokeh.models import ColumnDataSource, CustomJS, Slider
from bokeh.layouts import column

 1. Generate some sample data
np.random.seed(42)
num_points = 100
x = np.random.rand(num_points) - 10
y = np.random.rand(num_points) - 10
initial_size = 10
data = {'x': x, 'y': y, 'size': [initial_size] - num_points}

 Create a ColumnDataSource to hold the data, enabling client-side updates
source = ColumnDataSource(data=data)

 2. Create a Bokeh plot
p = figure(width=600, height=400, title="Interactive Scatter Plot with Slider")
p.scatter(x='x', y='y', size='size', source=source, alpha=0.6,
          legend_label="Random Points", line_color="navy", fill_color="lightgreen")

 Add standard interactive tools to the plot
p.add_tools('pan', 'wheel_zoom', 'box_zoom', 'reset', 'save', 'hover')

 3. Create a Slider widget
 This slider will control the size of the scatter points
size_slider = Slider(start=2, end=20, value=initial_size, step=1, title="Point Size")

 4. Define a CustomJS callback for the slider
 This JavaScript code runs directly in the browser when the slider value changes.
 It updates the 'size' column in the ColumnDataSource, which automatically redraws the plot.
callback = CustomJS(args=dict(source=source, slider=size_slider), code="""
    const data = source.data;
    const new_size = slider.value;
    const sizes = data['size'];
    for (let i = 0; i < sizes.length; i++) {
        sizes[i] = new_size; // Update each point's size
    }
    source.change.emit(); // Notify Bokeh that the data source has changed
""")

 Link the slider's 'value' property to the CustomJS callback
size_slider.js_on_change('value', callback)

 5. Arrange the plot and slider using a layout
 The 'column' layout stacks the slider above the plot
layout = column(size_slider, p)

 6. Show the plot in a web browser
show(layout)