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 variable in this fragment determines how many points we're going to render for each line. The lower this number, the less compact our line will be. Like many other visualizations, playing around with these values allows us to fine-tune the final result.

We're...