multi-line HR alarm

<!DOCTYPE html>
<html>
    <head>  
        <meta charset="utf-8">
				
        <style>
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }

.graph .axis {
            stroke-width: 1;
        }

.graph .axis .tick line {
            stroke: black;
        }

.graph .axis .tick text {
            fill: black;
            font-size: 0.7em;
        }

.graph .axis .domain {
            fill: none;
            stroke: black;
        }

.graph .group {
            fill: none;
            stroke: black;
            stroke-width: 2.5;
        }
        </style>
    </head>
    <body>
        <div class="graph"></div>

var width = 800,
            height = 400

var x = d3.time.scale()
            .domain([now - (limit - 2), now - duration])
            .range([0, width])

var y = d3.scale.linear()
            .domain([20, 180])
            .range([height-7, 0+7])
				
        var maxIndex = 60;
        var minIndex = 0;
        var fullData;
        var subset;
				var pitch = 764.81;
        var index_change_thresh;
//         var formatDate = d3.time.parse("%Y-%m-%d %H:%M:%S");

var circle = null;
        var circleTransition = null;
        var latestBeat = null;
        var insideBeat = false;
          
        var SECONDS_SAMPLE = 5;
        var BEAT_TIME = 400;
        var TICK_FREQUENCY = SECONDS_SAMPLE * 1000 / BEAT_TIME;
        var BEAT_VALUES = [0, 0, 3, -4, 10, -7, 3, 0, 0];

var CIRCLE_FULL_RADIUS = 40;
        var MAX_LATENCY = 5000;  
            
        var colorScale = d3.scale.linear()
					.domain([BEAT_TIME, (MAX_LATENCY - BEAT_TIME) / 2, MAX_LATENCY])
					.range(["#6D9521", "#D77900", "#CD3333"]);

gradient.append("stop")
          .attr("offset", "100%")
          .attr("stop-color", "#D14424")
          .attr("stop-opacity", 0.1);

svg.append("rect")
          .attr("width", width)
          .attr("height", height)
          .style("fill", "url(#gradient)");
          
          var Yaxis = svg.append('g')
              .attr('class', 'y axis')
          		.attr("transform", "translate (" + 35 + ", 0)")
              .call(y.axis = d3.svg.axis().scale(y).orient("left"))
                     
          var Xaxis = svg.append('g')
              .attr('class', 'x axis')
              .attr('transform', 'translate(0,' + height + ')')
              .call(x.axis = d3.svg.axis().scale(x).orient('bottom'))

var paths = svg.append('g')
					
          groups['HR'].path = paths.append('path')
                  .data([groups['HR'].data])
                  .attr('class', 'HR' + ' group')
                  .style('stroke', groups['HR'].color)
          groups['alarm_top'].path = paths.append('path')
                  .data([groups['alarm_top'].data])
                  .attr('class', 'alarm_top' + ' group')
                  .style('stroke', groups['alarm_top'].color)
          groups['alarm_bottom'].path = paths.append('path')
                  .data([groups['alarm_bottom'].data])
                  .attr('class', 'alarm_bottom' + ' group')
                  .style('stroke', groups['alarm_bottom'].color)
          groups['alarm_seg'].path = paths.append('path')
                  .data([groups['alarm_seg'].data])
                  .attr('class', 'alarm_seg' + ' group')
                  .style('stroke', groups['alarm_seg'].color)

//audio context
          var ac = this.AudioContext ? new AudioContext() : new webkitAudioContext();
					ac.createGain();
          
          //generate oscillator
          function osc(pitch, waveform){
//             var ac = new AudioContext(),
            oscillator = ac.createOscillator(),
            oscillator.type = waveform;
            oscillator.frequency.value = pitch;
            gainNode = ac.createGain();
            oscillator.connect(gainNode);
            gainNode.connect(ac.destination);
            gainNode.gain.value = .2;
            return {osc: oscillator, gain: gainNode};
          };
          
          function tick() {
            //add new values
          	now = new Date()
            
						groups['HR'].data.push(fullData[maxIndex]['Heart_Rate'])
            groups['HR'].path.attr('d', line)
             
            // when lower alarm limit changes
            if (fullData[maxIndex]['Alarm_LOW'] != groups['alarm_bottom'].data[groups['alarm_bottom'].data.length-1]){           
              index_change_thresh = maxIndex;

med_image = svg.append('g')
               	.append("svg:image")
                .attr("xlink:href", "https://cdn3.iconfinder.com/data/icons/medical-8/512/medication-512.png")
              	.attr("class", "add_med")
               	.attr("x", function(d) { return index_change_thresh*800/60 -85;})
               	.attr("y", function(d) { return 100;})
                .attr("width", 55)
                .attr("height", 55);
              
              plus =  svg.append('g')
               	.append("svg:image")
                .attr("xlink:href", "https://www.freeiconspng.com/uploads/plus-icon-black-2.png")
              	.attr("class", "add_med")
                .attr("x", function(d) { return index_change_thresh*800/60 -110;})
                .attr("y", function(d) { return 108;})
                .attr("width", 45)
                .attr("height", 45);
              
            };
            //Move medication along axis
            if (fullData[maxIndex]['Alarm_LOW'] == groups['alarm_bottom'].data[groups['alarm_bottom'].data.length-1] && plus != null){
              index_change_thresh -= 1.15;
              plus.attr("x", function(d) { return index_change_thresh*800/60 - 110;})
              med_image.attr("x", function(d) { return index_change_thresh*800/60 -85;}) 
            };
            
            groups['alarm_bottom'].data.push(fullData[maxIndex]['Alarm_LOW'])
            groups['alarm_bottom'].path.attr('d', alarm)
            groups['alarm_top'].data.push(fullData[maxIndex]['Alarm_HIGH'])
            groups['alarm_top'].path.attr('d', alarm)
            groups['alarm_seg'].data.push(fullData[maxIndex]['Alarm_Seg'])
            groups['alarm_seg'].path.attr('d', line)
          
//             console.log(dem_image)
//             index_change_thresh -= 1.15;
            
//             d3.select("add_med").attr('transform', 'translate(' + index_change_thresh*800/60 - 110 +')')
//                   .transition()
//             			.attr(attr("x", function(d) { return index_change_thresh*800/60 - 110;}))
//                   .duration(duration)
//                   .ease('linear')
//                   .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')')
//                   .each('end', tick)
               
            maxIndex += 1;
						     
            // Shift domain
              x.domain([now - (limit - 2) * duration, now - duration])

// Slide x-axis left
              Xaxis.transition()
                  .duration(duration)
                  .ease('linear')
                  .call(x.axis)
						              
              // Slide paths left
              paths.attr('transform', null)
                  .transition()
                  .duration(duration)
                  .ease('linear')
                  .attr('transform', 'translate(' + x(now - (limit - 1) * duration) + ')')
                  .each('end', tick)
							
              //play alarm sound
              if (fullData[maxIndex]['Alarm_Seg']!=0){
                var o = osc(pitch, 'sine');
                
                o.osc.start(ac.currentTime + 3.5);
                o.osc.stop(ac.currentTime + 3.75);
              	
              }
            	
              // Remove oldest data point from each group
              for (var name in groups) {
                  var group = groups[name]
                  group.data.shift()
              }
          }

tick()
        })
        </script>
    </body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js