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:

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>
  );
};