Dual-Y Example

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<!DOCTYPE html>

<body>
  <svg width="960" height="500"></svg>
</body>

CSS

.line {
  stroke: darkgreen;
  clip-path: url(#clip);
  fill: none;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.line4 {
  stroke: steelblue;
  clip-path: url(#clip);
  fill: none;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.lineGreen {
  stroke: darkgreen;
  clip-path: url(#clip);
  fill: none;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.line3 {
  stroke: #ff0000;
  clip-path: url(#clip);
  fill: none;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.axisRed text {
  fill: red;
}

.axisBlue text {
  fill: steelblue;
}

.axisGreen text {
  fill: darkgreen;
}

.zoom {
  cursor: ew-resize;
  fill: none;
  pointer-events: all;
}

JavaScript

var datapointCount = 1000;

//var data = []
//var ts = 1485546053000;
//for (var i=0; i< datapointCount; i++) {
//	var v = Math.random()*30+30;
//  var v1 = v + Math.random()*20*(Math.random() - 0.5);
//	data.push([ ts + i*500, v, v1 ]);
//}

var data =...