Sandvik Coromant · visual analytics
Thousands of sensor traces, drawn on the GPU
A legacy SVG chart re-architected into a WebGL2 and Canvas engine that overlays 1000+ series per plot and opens 14-hour recordings, with comparison tools built on top.
- 1000+lines per subplot
- 14 hlongest recording opened in the viewer
- 4rendering stacks benchmarked before building
- 11languages the features ship in
The problem
The report viewer drew with D3 and SVG: one DOM node per line. That was fine for a single short cut and fell over for what engineers actually wanted, which was many long, high-rate recordings overlaid and compared, on a touch screen next to the machine.
Measure first
Before writing the renderer I benchmarked the options: Canvas2D, deck.gl, WebGL2 and WebGPU; JSON against binary transport and SharedArrayBuffer between Blazor and the browser; and decimation methods (LTTB, min–max) for when there are more samples than pixels. The measurements, not preference, picked WebGL2.
The engine
- GPU lines, Canvas overlay. WebGL2 draws the data; a Canvas layer on top handles labels, hover and selection, so interaction never waits on the GPU path.
- Work off the main thread. Interpolation moved into Web Workers, and the Blazor↔JavaScript interop was cut down to what each frame needs.
- A mock data generator stress-tests the renderer with recordings bigger than any real one.
- TypeScript throughout, migrated from the original JavaScript.
What was built on it
A multi-recording compare tool with statistical bands, kernel density estimates, points of interest and unsupervised outlier detection (k-means, Isolation Forest), plus a virtualised metadata dashboard, batch editing and recording concatenation, all localised into 11 languages.