Team Members: Eric Whitmire

Canvas-based rendering techniques enable smooth updates of spectrogram and line plot components, independent of the data rate. (left) A

Abstract

Designing real-time visualizations for streaming sensor data is a tedious part of any engineer's workflow, particular when data updates thousands of times per second. However, such visualizations are critical for exploratory analysis, debugging, and monitoring signal quality. This project explores optimized rendering techniques for web-based visualizations of streaming sensor data. By leveraging incremental rendering and efficient canvas translations, the developed plots can handle millions of points while maintaining 60 Hz updates. Two types of plots are implemented for this project, scrolling line plots and scrolling spectrograms. Both arbitrary signal sizes and customizable axes and legends. Semantic zoom for line plots and geometric zoom for spectrograms allows additional exploration of the data. The components are designed to be operate with minimal coupling to the data source, enabling rapid prototyping of web-based sensor dashboards.

For more information, see the paper or poster.

Demos

Streaming Signals

This demo synthesizes 72 unique signals, each with a target update rate of 500 Hz (actual speed may vary with CPU load). The most recent 1000 points are shown. The signals are split among 9 plots and rendered smoothly at 60 Hz. You can brush to zoom into a particular region of the plot. Double cilck to return to normal zoom.

Streaming Spectrogram

This demo streams audio either from a microphone or a sample audio file using the Web Audio API. The spectrogram shows frequency on the vertical axis and sample # (time) on the horizontal axis. Altogether, nearly 5M points are shown at once. You can brush to geometrically zoom in to the plot. Double cilck to return to normal zoom.

Sensor Dashboard

This shows a dashboard for an active research project. It monitors a device that produces 9 sensor values at 500 hertz. It illustrates how spectrograms and line plots can be combined with minimal code.

USB Monitor

This demo shows a line plot for raw data streaming from a USB device. This demo uses a custom protocol for a specialized research device, but it can be easily adapted to plot data from an Arduino or other device.

Benchmarks

The following web pages were used to profile various aspects of this work and other visualization libraries. The actual profiling is not automated and these exampels are provided as references only.