SpectraView

Interactive React component for vibrational spectroscopy (IR, Raman, NIR).

Features

• High-performance rendering — Canvas 2D with LTTB downsampling (10K+ points at 60fps), SVG for axes and annotations
• Zoom and pan — Mouse wheel zoom, click-drag pan, double-click reset, keyboard shortcuts (+/−/Esc)
• Reversed x-axis — Standard IR wavenumber convention (high → low)
• Peak detection — Automatic peak picking with prominence filtering
• Snap crosshair — Hover readout that snaps to nearest data point with spectrum color indicator
• Region selection — Shift+drag to select wavenumber regions interactively
• Annotations — Positioned text labels with anchor lines on the chart
• Multi-format parsing — JCAMP-DX, CSV/TSV, JSON, and SPC (Thermo/Galactic binary)
• Multi-spectrum overlay — Compare spectra with automatic color assignment and legend
• Stacked display — View multiple spectra in vertically separated panels
• Spectral processing — Baseline correction (rubber-band), normalization (min-max, area, SNV), Savitzky-Golay smoothing, 1st/2nd derivatives
• Spectrum comparison — Difference, addition, scaling, Pearson correlation, residuals, grid interpolation
• Export — PNG, SVG, CSV, JSON with range filtering and precision control
• Data table — Sortable tabular view of spectrum values with region highlighting
• Minimap — Overview navigator showing viewport position within full spectrum
• Tooltip — Multi-spectrum hover tooltip with nearest peak indicator
• Undo/redo — Generic history hook for state management
• Drag-and-drop — Built-in drop zone for loading spectrum files
• Responsive — Optional auto-sizing to fill container width
• Accessible — ARIA labels, keyboard navigation, screen reader support
• Themes — Light and dark mode
• TypeScript — Full type definitions included
• Tiny bundle — ~48KB ESM / ~51KB CJS (no Plotly dependency)

Installation

npm install spectraview

Quick Start

import { SpectraView } from "spectraview";

const spectrum = {
  id: "1",
  label: "Sample IR",
  x: new Float64Array([4000, 3500, 3000, 2500, 2000, 1500, 1000, 500]),
  y: new Float64Array([0.1, 0.3, 0.8, 0.2, 0.5, 0.9, 0.4, 0.1]),
  xUnit: "cm⁻¹",
  yUnit: "Absorbance",
};

function App() {
  return <SpectraView spectra={[spectrum]} reverseX />;
}

Loading Files

SpectraView supports drag-and-drop file loading out of the box:

import { SpectraView, useSpectrumData } from "spectraview";

function App() {
  const { spectra, loadFile } = useSpectrumData();

  return (
    <SpectraView
      spectra={spectra}
      reverseX
      enableDragDrop
      onFileDrop={(files) => files.forEach(loadFile)}
    />
  );
}

Or parse files manually:

import { parseJcamp, parseCsv, parseJson, parseSpc } from "spectraview";

const spectra = await parseJcamp(jcampText);   // JCAMP-DX (.dx, .jdx)
const spectrum = parseCsv(csvText);             // CSV/TSV
const spectra = parseJson(jsonText);            // JSON
const spectra = parseSpc(arrayBuffer);           // SPC binary (.spc)

Peak Detection

import { SpectraView, usePeakPicking } from "spectraview";

function App() {
  const spectra = [/* your spectra */];
  const peaks = usePeakPicking(spectra, {
    prominence: 0.05,
    minDistance: 10,
    maxPeaks: 20,
  });

  return (
    <SpectraView
      spectra={spectra}
      peaks={peaks}
      onPeakClick={(peak) => console.log("Clicked:", peak.x)}
      reverseX
    />
  );
}

Spectral Processing

Apply common preprocessing transformations:

import {
  baselineRubberBand,
  normalizeMinMax,
  normalizeArea,
  normalizeSNV,
  smoothSavitzkyGolay,
  derivative1st,
  derivative2nd,
} from "spectraview";

const corrected = baselineRubberBand(spectrum.y);    // Rubber-band baseline correction
const normed = normalizeMinMax(spectrum.y);           // Scale to [0, 1]
const areaNormed = normalizeArea(spectrum.x, spectrum.y); // Unit area normalization
const snv = normalizeSNV(spectrum.y);                 // Standard Normal Variate
const smoothed = smoothSavitzkyGolay(spectrum.y, 7);  // SG smoothing (window=7)
const dy = derivative1st(spectrum.x, spectrum.y);     // 1st derivative
const d2y = derivative2nd(spectrum.x, spectrum.y);    // 2nd derivative

Or use the useNormalization hook for reactive transformations:

import { useNormalization, SpectraView } from "spectraview";

function App() {
  const [mode, setMode] = useState("none");
  const { spectra: processed, modeLabel } = useNormalization({
    spectra: rawSpectra,
    mode, // "none" | "min-max" | "area" | "snv" | "baseline" | "smooth" | "derivative"
  });

  return <SpectraView spectra={processed} reverseX />;
}

Spectrum Comparison

import {
  differenceSpectrum,
  addSpectra,
  scaleSpectrum,
  correlationCoefficient,
  residualSpectrum,
  interpolateToGrid,
} from "spectraview";

const diff = differenceSpectrum(spectrumA, spectrumB);  // A - B
const sum = addSpectra(spectrumA, spectrumB);            // A + B
const scaled = scaleSpectrum(spectrum, 2.5);             // Scale Y by factor
const r = correlationCoefficient(spectrumA, spectrumB);  // Pearson r ∈ [-1, 1]
const resid = residualSpectrum(spectrumA, spectrumB);    // |A - B|

// Align spectra to a common X grid before comparison
const aligned = interpolateToGrid(spectrumB, spectrumA.x);

Data Export

import {
  spectrumToCsv,
  multiSpectraToCsv,
  spectrumToJson,
  downloadString,
  generateSvg,
  downloadSvg,
} from "spectraview";

// CSV export with options
const csv = spectrumToCsv(spectrum, {
  delimiter: ",",
  precision: 4,
  xRange: [1000, 2000],
  includeHeader: true,
});

// Multi-spectrum CSV (shared X column)
const multiCsv = multiSpectraToCsv([spectrumA, spectrumB]);

// JSON export
const json = spectrumToJson(spectrum, { xRange: [1000, 2000] });

// Trigger browser download
downloadString(csv, "spectrum.csv", "text/csv");

API Reference

<SpectraView />

Prop	Type	Default	Description
spectra	Spectrum[]	required	Array of spectra to display
width	number	800	Width in pixels
height	number	400	Height in pixels
reverseX	boolean	false	Reverse x-axis (IR convention)
showGrid	boolean	true	Show grid lines
showCrosshair	boolean	true	Show hover crosshair
showToolbar	boolean	true	Show zoom controls
showLegend	boolean	true	Show spectrum legend
legendPosition	"top" | "bottom"	"bottom"	Legend placement
displayMode	"overlay" | "stacked"	"overlay"	Multi-spectrum display mode
responsive	boolean	false	Auto-size to container width
theme	"light" | "dark"	"light"	Color theme
peaks	Peak[]	[]	Peak markers to display
regions	Region[]	[]	Highlighted regions
annotations	Annotation[]	[]	Text annotations on the chart
snapCrosshair	boolean	true	Snap crosshair to nearest data point
xLabel	string	auto	X-axis label override
yLabel	string	auto	Y-axis label override
margin	Partial<Margin>	—	Custom chart margins
enableDragDrop	boolean	false	Enable drag-and-drop file loading
enableRegionSelect	boolean	false	Enable Shift+drag region selection
className	string	—	Custom CSS class
canvasRef	RefObject<HTMLCanvasElement>	—	Ref to canvas element (for export)
onPeakClick	(peak: Peak) => void	—	Peak click callback
onViewChange	(view: ViewState) => void	—	Zoom/pan change callback
onCrosshairMove	(x: number, y: number) => void	—	Crosshair move callback
onToggleVisibility	(id: string) => void	—	Legend visibility toggle callback
onFileDrop	(files: File[]) => void	—	File drop callback
onRegionSelect	(region: Region) => void	—	Region selection callback

Sub-Components

For advanced composition, individual layers are exported:

import {
  SpectrumCanvas,
  AxisLayer,
  PeakMarkers,
  RegionSelector,
  Crosshair,
  Toolbar,
  Legend,
  DropZone,
  AnnotationLayer,
  Minimap,
  Tooltip,
  DataTable,
  StackedView,
  ExportMenu,
} from "spectraview";

Hooks

Hook	Description
useSpectrumData()	File loading and spectrum state management
useZoomPan(options)	Zoom/pan behavior backed by d3-zoom
usePeakPicking(spectra, options)	Automatic peak detection
useExport()	PNG, CSV, JSON export functions
useRegionSelect(options)	Interactive Shift+drag region selection
useResizeObserver()	Container resize observation for responsive sizing
useKeyboardNavigation(options)	Keyboard shortcuts (+/−/Esc for zoom/reset)
useNormalization(options)	Reactive spectral normalization/processing
useHistory(options)	Generic undo/redo with configurable depth

Keyboard Shortcuts

Key	Action
+ or =	Zoom in
-	Zoom out
Escape	Reset zoom

Companion: SpectraKit (Python)

SpectraView pairs with SpectraKit, a Python library for spectral data processing:

• SpectraKit — Process spectra: baseline correction, normalization, despiking, similarity
• SpectraView — View spectra: interactive visualization in the browser

pip install pyspectrakit  # Process in Python
npm install spectraview   # View in the browser

Browser Support

Chrome, Firefox, Safari, Edge (last 2 versions).

Contributing

See CONTRIBUTING.md.

License

MIT — Tubhyam Karthikeyan