Scientific Analysis Demo

Advanced scientific visualization combining statistical charts, measurement uncertainty, and machine learning capabilities—all rendered natively with WebGL for maximum performance.

Box Plot shows median, quartiles (Q1/Q3), and range. Essential for comparing distributions.

Features Demonstrated

📦 Box Plot (Statistical Distribution)

Box plots provide a standardized way to display data distribution based on five-number summary:

Component	Description
Min	Minimum value (lower whisker)
Q1	First quartile (25th percentile)
Median	Middle value (50th percentile)
Q3	Third quartile (75th percentile)
Max	Maximum value (upper whisker)

chart.addSeries({
  id: 'treatment-response',
  type: 'boxplot',
  data: {
    x: [1, 2, 3, 4, 5],        // Group positions
    low: [10, 15, 20, 25, 30], // Min values
    open: [20, 25, 30, 35, 40], // Q1 values
    median: [30, 35, 40, 45, 50],
    close: [40, 45, 50, 55, 60], // Q3 values
    high: [50, 55, 60, 65, 70]   // Max values
  },
  style: {
    color: '#00f2ff',
    barWidth: 0.6
  }
})

📊 Error Bars (Measurement Uncertainty)

Error bars visualize the uncertainty or variability in measurements. Velo Plot supports:

• Symmetric errors: Single ±error value
• Asymmetric errors: Separate positive and negative errors
• Directional: Show only positive or negative errors
• Customizable caps: Toggle and size the end caps

chart.addSeries({
  id: 'enzyme-kinetics',
  type: 'scatter',
  data: {
    x: substrateConcData,
    y: velocityData,
    yError: standardDeviations  // Symmetric error
  },
  style: {
    color: '#ff6b6b',
    pointSize: 8,
    errorBars: {
      visible: true,
      color: '#ff6b6b',
      width: 1.5,
      capWidth: 6,
      direction: 'both',  // 'both' | 'positive' | 'negative'
      opacity: 0.7
    }
  }
})

Asymmetric Errors

data: {
  x: values,
  y: measurements,
  yErrorMinus: lowerBounds,
  yErrorPlus: upperBounds
}

🧠 ML Integration (Signal Processing)

The ML Integration plugin provides native statistical functions without external dependencies:

import { PluginMLIntegration } from 'velo-plot/plugins/ml-integration'

// Initialize plugin
chart.use(PluginMLIntegration())

// Use native stats
const mean = chart.ml.stats.mean(data)
const std = chart.ml.stats.standardDeviation(data)
const fft = chart.ml.stats.fft(signalData)
const r = chart.ml.stats.correlation(series1, series2)

Available Functions

Function	Description
fft(data)	Fast Fourier Transform (DFT implementation)
mean(data)	Arithmetic mean
standardDeviation(data)	Population standard deviation
correlation(x, y)	Pearson correlation coefficient

Use Cases

Enzyme Kinetics (Michaelis-Menten)

Analyze enzyme-substrate binding with the Michaelis-Menten model:

$$V = \frac{V_{max} \cdot [S]}{K_m + [S]}$$

The demo generates synthetic data following this equation with added Gaussian noise.

Clinical Trials (Dose-Response)

Visualize sigmoidal dose-response curves common in pharmacology:

$$E = \frac{E_{max}}{1 + (EC_{50}/C)^{Hill}}$$

Electrochemical Sensors

Calibration curves for biosensors showing linear range and saturation behavior.

Performance

All visualizations are rendered using WebGL for hardware-accelerated performance:

• Box Plots: Rendered as GL_TRIANGLES (boxes) + GL_LINES (whiskers)
• Error Bars: Rendered as GL_LINES with optional caps
• Scatter/Line: Standard WebGL point/line rendering

This approach enables smooth interaction with thousands of data points and real-time updates.

API Reference

BoxPlot Series Options

interface BoxPlotData {
  x: Float32Array;      // X positions
  low: Float32Array;    // Minimum values
  open: Float32Array;   // Q1 values
  median: Float32Array; // Median values
  close: Float32Array;  // Q3 values
  high: Float32Array;   // Maximum values
}

Error Bar Style Options

interface ErrorBarStyle {
  visible?: boolean;
  color?: string;
  width?: number;
  capWidth?: number;
  opacity?: number;
  direction?: 'both' | 'positive' | 'negative';
  showCaps?: boolean;
}

Related

• Regression Analysis - Curve fitting and model selection
• ML Integration Plugin - Full ML capabilities
• Advanced Analysis - FFT and signal processing