Live waterfall plot
npm install react-waterfall-plotA customizable, high-performance React component for rendering real-time waterfall visualizations of frequency data.
- Real-time waveform and spectrum visualization
- Configurable frequency range (centerHz, spanHz)
- Adjustable display parameters (size, rows, color maps)
- TypeScript ready with built-in definitions
``bash`
npm install react-waterfall-plot
- React 19+
Ensure these are installed in your project.
`tsx
import Waterfall from "react-waterfall-plot"
import { useEffect, useState } from "react"
function App() {
let [data, setData] = useState(new Array(1024).fill(0))
useEffect(() => {
const timer = setInterval(() => {
setData(data.map(() => Math.random() * -100))
}, 100)
return () => clearInterval(timer)
})
return (
export default App
`
| Prop | Type | Default | Description |
|--------------------|------------|------------------|-----------------------------------------------------------------------|
| canvasId | string | waterfall-canvas | Unique canvas element ID |data
| | number[] | — | FFT bin data to render each frame |centerHz
| | number | — | Center frequency in Hz |spanHz
| | number | — | Frequency span in Hz |spectrumPercent
| | number | 20 | Percentage of canvas height devoted to the spectrum plot |minDb
| | number | -100 | Minimum dB for color mapping |maxDb
| | number` | 0 | Maximum dB for color mapping |
Contributions welcome! Please open an issue or submit a PR.
MIT