UI Components
Heatmap

Heatmap

2D grid visualization with custom color scales. Maps scalar values to colors across a grid, making it ideal for spatial data like thermal arrays, pressure distributions, and sensor matrices.

Category: charts · Maturity: beta

Installation

npx @plexus/cli add heatmap-chart

Usage

import { HeatmapChart } from '@plexus/ui'
 
function ThermalView({ grid }) {
  return (
    <HeatmapChart
      data={grid}
      rows={32}
      cols={32}
      colorScale="inferno"
      min={20}
      max={100}
      xAxis={{ label: 'Column' }}
      yAxis={{ label: 'Row' }}
      width={600}
      height={600}
    />
  )
}

Performance

SpecValue
Max data points100,000+
Target FPS60
Typical memory~60 MB
RendererWebGPU (WebGL2 fallback)

Aerospace Use Cases

  • Thermal imaging — Visualize temperature distribution across PCBs, heat sinks, or structural panels
  • Pressure arrays — Display pressure sensor matrices from wind tunnel tests or surface pressure taps
  • Vibration mapping — Show vibration intensity across a structural grid during resonance testing

Related Components