Developing custom data visualizations for a biometric system
Adam Mark
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:
function PostureChart({ data }) {
const domain = [-90, -45, 45, 90];
const range = [0, 15, 235, 250];
const scale = d3.scaleLinear().domain(domain).range(range);
const node = d3.select(".posture-data");
const dots = node.selectAll("circle").data(data, (d) => d.ts);
dots
.enter()
.append("circle")
.attr("r", 3)
.attr("cx", (d) => scale(d.value.ca))
.attr("cy", (d) => scale(d.value.sa));
dots
.exit()
.remove();
return (
<svg width="250" height="250">
<image xlinkHref="posture.svg" width="250" height="250"/>
<g className="posture-data"/>
</svg>
);
};
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!