Developing custom data visualizations for a biometric system
Background
From 2015 to 2020, I designed and developed web applications for a medical-grade wearable device, using React, Redux and SVG.
Problem
Our system captured high-resolution physiological data—up to 1,000 samples per second—and displayed it to users in novel ways. We needed a visualization library that supported unconventional designs.
Solution
I selected D3, a library for manipulating and transforming data into visual components. With D3, I could do things that weren't possible with traditional charting libraries, such as creating irregular scales. And with D3's extensive set of utilities, I could work with data at all levels of resolution, from daily to hourly to sub-second:
The code
To visualize resting posture, as shown in the first screenshot above, I plotted 1-minute posture samples across two dimensions, the coronal plane (x) and the sagittal plane (y), and exaggerated the area of interest (+/-45 degrees in both planes) using an irregular scale:
Conclusion
D3 was an excellent choice for creating non-standard, proprietary data visualizations. For conventional charting, I like ECharts, but for the crazy stuff I'll stick with D3!