Chinese · Online Demo · Case Study · Screenshots · Local Setup

HPLC Data Visualizer

Browser-based HPLC chromatogram visualization for faster, cleaner lab presentation figures.

Overview

HPLC Data Visualizer helps pharmaceutical sciences and natural products researchers turn raw HPLC chromatogram data into presentation-ready figures with less manual formatting. Instead of repeatedly importing data into Origin or similar desktop tools, users can upload files in a browser, compare samples, adjust figure styling, and export SVG figures.

The app is designed for a focused lab workflow: fast chromatogram visualization, multi-sample comparison, and consistent figure preparation for meetings and research discussions.

Key Features

• Upload multiple HPLC data files and render chromatograms in the browser.
• Currently supports generic .csv files and Hitachi .ctx files.
• Load built-in example chromatograms directly from the web interface.
• Download example CSV files as a ZIP for testing the upload workflow.
• Generate stacked waterfall plots for multi-sample comparison.
• Reorder sample display order from the sidebar.
• Switch between built-in color palettes for different presentation styles.
• Adjust line width, stacking distance, visible X-axis range, and sample-label font size.
• Show sample names directly at the left or right edge of each curve.
• Toggle legend and Y-axis display for cleaner presentation figures.
• Mark retention times by clicking on chromatogram curves.
• Highlight selected peak regions with box selection.
• Export presentation-ready SVG figures through a visible download button or the Plotly toolbar.
• Switch between Chinese, English, and Japanese interfaces.

Demo

Online demo:

https://hplc-data-visualizer.streamlit.app/

Screenshots

Example SVG export:

Usage

1. Open the web app.
2. Upload one or more HPLC data files, or load the built-in example data.
3. Adjust stacking, color palette, line width, sample labels, axes, and visible range from the sidebar.
4. Optionally mark retention times or highlight peak regions.
5. Export the final chart as an SVG figure for presentations or reports.

Adoption

This project has been used by members of my pharmaceutical sciences / natural products research lab. Figures generated by the app have been used in group meetings and research presentations.

User feedback has focused on practical workflow improvements, especially saving time, reducing repetitive formatting, and making multi-sample chromatogram comparisons easier to prepare.

More details are available in the case study.

Tech Stack

• Python
• Streamlit
• pandas
• Plotly
• CSV / CTX data parsing
• Browser-based SVG export

Roadmap

Planned or potential improvements:

• Support additional vendor-specific HPLC export formats.
• Add more robust data validation and parsing error messages.
• Improve peak integration workflows and exportable peak metadata.
• Add project/session saving for repeated figure preparation.
• Explore a more productized version for research groups or small labs.

Local Setup

Install dependencies:

pip install -r requirements.txt

Run the app:

streamlit run web_app.py

Then open the local Streamlit URL shown in the terminal.

License

MIT License

Contact

For questions, bugs, or suggestions, please use GitHub Issues.