Creating the visualization

This visualization will have the following features:

• We're going to draw a line showing the ECG and respiratory information
• We load two external SVG images, a heart and a set of lungs, and animate those based on the data we receive

We once again start with setting up the data structures and the scales.

Scales, lines, and array initialization

The first thing we need to do is define some variables:

var ecgAvg =  16800; 
var respAvg = 16000; 
var n = 800; 
 
var data = d3.range(n).map(function(d) {return { 
    "ecg": ecgAvg, 
    "resp": respAvg 
}});

We use the ecgAvg and respAvg to prefill an array with our initial data. This will allow us to start our visualization with an empty line, while new data comes in. The n...