Interactive Plot Rendering Bokeh

interactive-plot-rendering-bokeh

Summary

Render interactive mass spectrometry visualizations (chromatograms, spectra, peak maps) using the Bokeh backend through pyOpenMS-viz's Pandas DataFrame plotting API. This skill enables generation of web-ready, interactive plots suitable for exploratory analysis and interactive inspection of m/z, retention time, and intensity dimensions.

When to use

When you have mass spectrometry data in a Pandas DataFrame with columns for m/z, retention time (or ion mobility), and intensity, and you want to generate interactive (rather than static) visualizations for exploratory analysis, interactive drill-down, or deployment in web applications or Jupyter notebooks.

When NOT to use

• Input data is not in Pandas DataFrame format — use data loading/ingestion skill first
• You require 3D peak map visualization with true 3D rotation — use plotly backend instead (Bokeh does not support 3D peak maps per the supported plots table)
• You need static, publication-quality raster output — use matplotlib backend instead

Inputs

• Pandas DataFrame with m/z and intensity columns (1D spectrum)
• Pandas DataFrame with retention time and intensity columns (1D chromatogram)
• Pandas DataFrame with m/z, retention time, and intensity columns (2D peak map)
• Pandas DataFrame with ion mobility and intensity columns (1D mobilogram)

Outputs

• Interactive Bokeh plot object (peakmap, spectrum, chromatogram, or mobilogram)
• Renderable HTML-backed visualization with pan/zoom/hover interactivity
• Optional marginal plots (chromatogram/spectrum subplots)

How to apply

Load mass spectrometry data into a Pandas DataFrame with required columns (x: m/z or retention time, y: intensity, z: intensity for 2D peak maps). Install pyOpenMS-viz via pip. Call df.plot(x='column_name', y='column_name', kind='peakmap'|'spectrum'|'chromatogram'|'mobilogram', backend='ms_bokeh') to render an interactive Bokeh plot. Optionally set add_marginals=True to display marginal chromatograms and spectra alongside the main plot. The Bokeh backend automatically provides interactive features including pan, zoom, hover tooltips, and save capabilities without additional configuration.

Related tools

• pyOpenMS-viz (Core library providing the DataFrame.plot() extension method and Bokeh backend integration for mass spectrometry visualization) — https://github.com/OpenMS/pyopenms_viz
• Pandas (Data container (DataFrame) and plotting API entry point)
• bokeh (Underlying interactive visualization library generating HTML/JavaScript plots with pan/zoom/hover capabilities)
• Python (Execution environment for pyOpenMS-viz and Pandas)

Examples

ms_data.plot(x='m/z', y='retention_time', z='intensity', kind='peakmap', backend='ms_bokeh', add_marginals=True)

Evaluation signals

• Bokeh plot object is generated without errors and is displayable in Jupyter notebooks or web applications
• Interactive controls (pan, zoom, hover tooltip showing m/z, retention time, intensity) respond correctly to user input
• When add_marginals=True is set, marginal plots (chromatogram and spectrum) render alongside the main peakmap plot
• Plot dimensions and axis labels match the input DataFrame columns (x, y, z as specified)
• For 2D peak maps, heatmap intensities scale correctly across the m/z × retention time grid

Limitations

• Bokeh backend does not support 3D peak map visualization; use plotly backend for 3D rotation capability
• Performance may degrade with very large DataFrames (millions of points); consider downsampling or aggregating before rendering
• Marginal plots (add_marginals=True) are currently available for peakmap plots; support may vary for other plot kinds

Evidence

• [other] Integration capability: "Multiple backends supported including matplotlib, bokeh, and plotly"
• [readme] Plot types supported: "PeakMap 2D | x, y, z | peakmap | ✓ | ✓ | ✓"
• [readme] DataFrame-centric API: "Flexible plotting API that interfaces directly with Pandas DataFrames"
• [readme] Bokeh interactivity: "Support for multiple plotting backends: matplotlib (static), bokeh and plotly (interactive)"
• [readme] Use cases: "Suitable for use in scripts, Jupyter notebooks, and web applications"
• [other] Workflow from source card: "Call the DataFrame.plot() method with x and y parameters specifying the m/z and retention time column names, kind='peakmap', and backend='ms_bokeh'"