From fe3433b3f5a0b2e8267747fc872ab18752c80242 Mon Sep 17 00:00:00 2001
From: Sean Kauffman <skauffma@uwaterloo.ca>
Date: Fri, 22 Feb 2019 14:25:20 -0500
Subject: [PATCH 1/6] Most of the chart works, but the scaling is still broken
 and virtually everything that relates to it.

---
 index.html            |  19 ++++----
 realTimeChartMulti.js | 106 +++++++++++++++++++++---------------------
 2 files changed, 62 insertions(+), 63 deletions(-)

diff --git a/index.html b/index.html
index 50ea99b..dad9899 100644
--- a/index.html
+++ b/index.html
@@ -4,8 +4,6 @@
   <meta charset="utf-8">
   <!-- Author: Bo Ericsson -->
   <title>Real Time Chart Multi</title>
-  <link rel=stylesheet type=text/css href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" media="all">
-  <!--<link rel=stylesheet type=text/css href="../_lib/bootstrap.min.css" media="all">-->
   <style>
   .axis text {
     font: 10px sans-serif;
@@ -15,7 +13,8 @@
     font-weight: bold;
     text-anchor: middle; 
   }
-  .axis .title {
+  .title {
+    font: 10px sans-serif;
     font-weight: bold;
     text-anchor: middle;
   }
@@ -44,7 +43,7 @@
     fill: black;
     fill-opacity: 0.3;
   }
-  .viewport .extent {
+  .viewport .selection {
     fill: green;
   }
   .well {
@@ -66,9 +65,10 @@ <h4>D3 Based Real Time Chart with Multiple Data Streams
 
 </div>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>-->
 <!--<script src="../_lib/d3.min.js"></script>-->
-<script src="realTimeChartMulti.js"></script>
+<script src="static/d3.min.js"></script>
+<script src="static/realTimeChartMulti.js"></script>
 <script>
 'use strict';
 
@@ -111,16 +111,16 @@ <h4>D3 Based Real Time Chart with Multiple Data Streams
     dev = 200 * tX; // std dev
 
 // define time scale
-var timeScale = d3.scale.linear()
+var timeScale = d3.scaleLinear()
     .domain([300 * tX, 1700 * tX])
     .range([300 * tX, 1700 * tX])
     .clamp(true);
 
 // define function that returns normally distributed random numbers
-var normal = d3.random.normal(meanMs, dev);
+var normal = d3.randomNormal(meanMs, dev);
 
 // define color scale
-var color = d3.scale.category10();
+var color = d3.scaleOrdinal(d3.schemeCategory10);
 
 // in a normal use case, real time data would arrive through the network or some other mechanism
 var d = -1;
@@ -193,5 +193,4 @@ <h4>D3 Based Real Time Chart with Multiple Data Streams
 
 // start the data generator
 dataGenerator();
-
 </script>
diff --git a/realTimeChartMulti.js b/realTimeChartMulti.js
index 9547e51..dd0de45 100644
--- a/realTimeChartMulti.js
+++ b/realTimeChartMulti.js
@@ -5,7 +5,7 @@
 
 function realTimeChartMulti() {
 
-  var version = "0.1.0",
+  var version = "0.2.0",
       datum, data,
       maxSeconds = 300, pixelsPerSecond = 10,
       svgWidth = 700, svgHeight = 300,
@@ -108,26 +108,26 @@ function realTimeChartMulti() {
         .attr("class", "y axis");
 
     // in x axis group, add x axis title
-    xAxisG.append("text")
+    main.append("text")
         .attr("class", "title")
         .attr("x", width / 2)
-        .attr("y", 25)
+        .attr("y", height + margin.top + 10)
         .attr("dy", ".71em")
-        .text(function(d) { 
+        .text(function(d) {
           var text = xTitle == undefined ? "" : xTitle;
-          return text; 
+          return text;
         });
 
     // in y axis group, add y axis title
-    yAxisG.append("text")
+    main.append("text")
         .attr("class", "title")
         .attr("transform", "rotate(-90)")
         .attr("x", - height / 2)
         .attr("y", -margin.left + 15) //-35
         .attr("dy", ".71em")
-        .text(function(d) { 
+        .text(function(d) {
           var text = yTitle == undefined ? "" : yTitle;
-          return text; 
+          return text;
         });
 
     // in main group, add chart title
@@ -142,12 +142,12 @@ function realTimeChartMulti() {
         });
 
     // define main chart scales
-    x = d3.time.scale().range([0, width]);
-    y = d3.scale.ordinal().domain(yDomain).rangeRoundPoints([height, 0], 1)
+    x = d3.scaleTime().range([0, width]);
+    y = d3.scalePoint().domain(yDomain).rangeRound([height, 0]).padding([1])
 
     // define main chart axis
-    xAxis = d3.svg.axis().orient("bottom");
-    yAxis = d3.svg.axis().orient("left");
+    xAxis = d3.axisBottom();
+    yAxis = d3.axisLeft();
 
     // add nav chart
     var nav = svg.append("g")
@@ -174,11 +174,11 @@ function realTimeChartMulti() {
         .attr("transform", "translate(0," + heightNav + ")");
 
     // define nav chart scales
-    xNav = d3.time.scale().range([0, widthNav]);
-    yNav = d3.scale.ordinal().domain(yDomain).rangeRoundPoints([heightNav, 0], 1)
+    xNav = d3.scaleTime().range([0, widthNav]);
+    yNav = d3.scalePoint().domain(yDomain).rangeRound([heightNav, 0]).padding([1])
 
     // define nav axis
-    var xAxisNav = d3.svg.axis().orient("bottom");
+    var xAxisNav = d3.axisBottom();
 
     // compute initial time domains...
     var ts = new Date().getTime();
@@ -204,8 +204,7 @@ function realTimeChartMulti() {
     xAxisNav.scale(xNav)(xAxisGNav);
 
     // create brush (moveable, changable rectangle that determines the time domain of main chart)
-    var viewport = d3.svg.brush()
-        .x(xNav)
+    var viewport = d3.brushX(xNav)
         .extent([startTimeViewport, endTimeViewport])
         .on("brush", function () {
           // get the current time extent of viewport
@@ -224,7 +223,7 @@ function realTimeChartMulti() {
           }
 
           // update the x domain of the main chart
-          x.domain(viewport.empty() ? xNav.domain() : extent);
+          x.domain(d3.event.selection === null ? xNav.domain() : extent);
 
           // update the x axis of the main chart
           xAxis.scale(x)(xAxisG);
@@ -244,11 +243,11 @@ function realTimeChartMulti() {
     data = [];
     refresh();
 
-    // function to refresh the viz upon changes of the time domain 
+    // function to refresh the viz upon changes of the time domain
     // (which happens constantly), or after arrival of new data, or at init
     function refresh() {
 
-      // process data to remove too late data items 
+      // process data to remove too late data items
       data = data.filter(function(d) {
         if (d.time.getTime() > startTime.getTime()) return true;
       })
@@ -260,15 +259,15 @@ function realTimeChartMulti() {
       // here we bind the new data to the main chart
       // note: no key function is used here; therefore the data binding is
       // by index, which effectivly means that available DOM elements
-      // are associated with each item in the available data array, from 
+      // are associated with each item in the available data array, from
       // first to last index; if the new data array contains fewer elements
       // than the existing DOM elements, the LAST DOM elements are removed;
-      // basically, for each step, the data items "walks" leftward (each data 
+      // basically, for each step, the data items "walks" leftward (each data
       // item occupying the next DOM element to the left);
-      // This data binding is very different from one that is done with a key 
+      // This data binding is very different from one that is done with a key
       // function; in such a case, a data item stays "resident" in the DOM
       // element, and such DOM element (with data) would be moved left, until
-      // the x position is to the left of the chart, where the item would be 
+      // the x position is to the left of the chart, where the item would be
       // exited
       var updateSel = barG.selectAll(".bar")
           .data(data);
@@ -278,21 +277,21 @@ function realTimeChartMulti() {
 
       // add items
       updateSel.enter()
-          .append(function(d) { 
+          .append(function(d) {
             if (debug) { console.log("d", JSON.stringify(d)); }
             if (d.type == undefined) console.error(JSON.stringify(d))
             var type = d.type || "circle";
             var node = document.createElementNS("http://www.w3.org/2000/svg", type);
-            return node; 
+            return node;
           })
           .attr("class", "bar")
-          .attr("id", function() { 
-            return "bar-" + barId++; 
+          .attr("id", function() {
+            return "bar-" + barId++;
           });
 
       // update items; added items are now part of the update selection
       updateSel
-          .attr("x", function(d) { 
+          .attr("x", function(d) {
             var retVal = null;
             switch (getTagName(this)) {
               case "rect":
@@ -301,9 +300,9 @@ function realTimeChartMulti() {
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
-          .attr("y", function(d) { 
+          .attr("y", function(d) {
             var retVal = null;
             switch (getTagName(this)) {
               case "rect":
@@ -312,9 +311,9 @@ function realTimeChartMulti() {
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
-          .attr("cx", function(d) { 
+          .attr("cx", function(d) {
             var retVal = null;
             switch (getTagName(this)) {
               case "circle":
@@ -322,9 +321,9 @@ function realTimeChartMulti() {
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
-          .attr("cy", function(d) { 
+          .attr("cy", function(d) {
             var retVal = null;
             switch (getTagName(this)) {
               case "circle":
@@ -332,9 +331,9 @@ function realTimeChartMulti() {
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
-          .attr("r", function(d) { 
+          .attr("r", function(d) {
             var retVal = null;
             switch (getTagName(this)) {
               case "circle":
@@ -342,7 +341,7 @@ function realTimeChartMulti() {
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
           .attr("width", function(d) {
             var retVal = null;
@@ -352,17 +351,17 @@ function realTimeChartMulti() {
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
-          .attr("height", function(d) { 
+          .attr("height", function(d) {
             var retVal = null;
             switch (getTagName(this)) {
               case "rect":
-                retVal = d.size; 
+                retVal = d.size;
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
           .style("fill", function(d) { return d.color || "black"; })
           //.style("stroke", "orange")
@@ -390,7 +389,7 @@ function realTimeChartMulti() {
           .attr("cy", function(d) {
             return yNav(d.category);
           })
-    
+
     } // end refreshChart function
 
 
@@ -400,13 +399,14 @@ function realTimeChartMulti() {
     }
 
 
-    // function to keep the chart "moving" through time (right to left) 
+    // function to keep the chart "moving" through time (right to left)
     setInterval(function() {
 
       if (halted) return;
 
       // get current viewport extent
-      var extent = viewport.empty() ? xNav.domain() : viewport.extent();
+      //var extent = viewport ? xNav.domain() : viewport.extent();
+      var extent = viewport.extent().length == 2 ? viewport.extent() : xNav.domain();
       var interval = extent[1].getTime() - extent[0].getTime();
       var offset = extent[0].getTime() - xNav.domain()[0].getTime();
 
@@ -414,7 +414,7 @@ function realTimeChartMulti() {
       endTime = new Date();
       startTime = new Date(endTime.getTime() - maxSeconds * 1000);
 
-      // compute new viewport extents 
+      // compute new viewport extents
       startTimeViewport = new Date(startTime.getTime() + offset);
       endTimeViewport = new Date(startTimeViewport.getTime() + interval);
       viewport.extent([startTimeViewport, endTimeViewport])
@@ -441,7 +441,7 @@ function realTimeChartMulti() {
 
   // chart getters/setters
 
-  // new data item (this most recent item will appear 
+  // new data item (this most recent item will appear
   // on the right side of the chart, and begin moving left)
   chart.datum = function(_) {
     if (arguments.length == 0) return datum;
@@ -468,28 +468,28 @@ function realTimeChartMulti() {
   chart.border = function(_) {
     if (arguments.length == 0) return border;
     border = _;
-    return chart;       
+    return chart;
   }
 
   // chart title
   chart.title = function(_) {
     if (arguments.length == 0) return chartTitle;
     chartTitle = _;
-    return chart;   
+    return chart;
   }
 
   // x axis title
   chart.xTitle = function(_) {
     if (arguments.length == 0) return xTitle;
     xTitle = _;
-    return chart;       
+    return chart;
   }
 
   // y axis title
   chart.yTitle = function(_) {
     if (arguments.length == 0) return yTitle;
     yTitle = _;
-    return chart;       
+    return chart;
   }
 
   // yItems (can be dynamically added after chart construction)
@@ -498,11 +498,11 @@ function realTimeChartMulti() {
     yDomain = _;
     if (svg) {
       // update the y ordinal scale
-      y = d3.scale.ordinal().domain(yDomain).rangeRoundPoints([height, 0], 1);
+      y = d3.scalePoint().domain(yDomain).rangeRound([height, 0]).padding([1]);
       // update the y axis
       yAxis.scale(y)(yAxisG);
       // update the y ordinal scale for the nav chart
-      yNav = d3.scale.ordinal().domain(yDomain).rangeRoundPoints([heightNav, 0], 1);
+      yNav = d3.scalePoint().domain(yDomain).rangeRound([heightNav, 0]).padding([1]);
     }
     return chart;       
   }

From d2e6dc0d2f7b0d5fba44eb25a5d3102d974ecf08 Mon Sep 17 00:00:00 2001
From: Sean Kauffman <skauffma@uwaterloo.ca>
Date: Tue, 26 Feb 2019 15:56:16 -0500
Subject: [PATCH 2/6] Remove some CSS that isn't needed anymore

---
 index.html | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/index.html b/index.html
index dad9899..2996f2b 100644
--- a/index.html
+++ b/index.html
@@ -5,9 +5,6 @@
   <!-- Author: Bo Ericsson -->
   <title>Real Time Chart Multi</title>
   <style>
-  .axis text {
-    font: 10px sans-serif;
-  }
   .chartTitle {
     font-size: 12px;
     font-weight: bold;
@@ -18,17 +15,6 @@
     font-weight: bold;
     text-anchor: middle;
   }
-  .axis path,
-  .axis line {
-    fill: none;
-    stroke: #000;
-    shape-rendering: crispEdges;
-  }
-  .x.axis path {
-    fill: none;
-    stroke: #000;
-    shape-rendering: crispEdges;
-  }
   .nav .area {
     fill: lightgrey;
     stroke-width: 0px;

From f69b9d98615c6d955b02c4a29ab1fec48bd6494e Mon Sep 17 00:00:00 2001
From: Sean Kauffman <skauffma@uwaterloo.ca>
Date: Wed, 27 Feb 2019 15:29:39 -0500
Subject: [PATCH 3/6] Fix the rest of the things, afaik

---
 index.html            |  8 +++++
 realTimeChartMulti.js | 84 +++++++++++++++++++++++--------------------
 2 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/index.html b/index.html
index 2996f2b..b3a5aa3 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
   <meta charset="utf-8">
   <!-- Author: Bo Ericsson -->
   <title>Real Time Chart Multi</title>
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" media="all">
   <style>
   .chartTitle {
     font-size: 12px;
@@ -30,8 +31,15 @@
     fill-opacity: 0.3;
   }
   .viewport .selection {
+    stroke: grey;
     fill: green;
   }
+  .viewport .handle {
+    display: none;
+  }
+  .viewport .overlay {
+    visibility: hidden;
+  }
   .well {
     padding-top: 0px;
     padding-bottom: 0px;
diff --git a/realTimeChartMulti.js b/realTimeChartMulti.js
index dd0de45..30f84d1 100644
--- a/realTimeChartMulti.js
+++ b/realTimeChartMulti.js
@@ -146,8 +146,8 @@ function realTimeChartMulti() {
     y = d3.scalePoint().domain(yDomain).rangeRound([height, 0]).padding([1])
 
     // define main chart axis
-    xAxis = d3.axisBottom();
-    yAxis = d3.axisLeft();
+    xAxis = d3.axisBottom(x);
+    yAxis = d3.axisLeft(y);
 
     // add nav chart
     var nav = svg.append("g")
@@ -178,7 +178,7 @@ function realTimeChartMulti() {
     yNav = d3.scalePoint().domain(yDomain).rangeRound([heightNav, 0]).padding([1])
 
     // define nav axis
-    var xAxisNav = d3.axisBottom();
+    var xAxisNav = d3.axisBottom(xNav);
 
     // compute initial time domains...
     var ts = new Date().getTime();
@@ -196,51 +196,59 @@ function realTimeChartMulti() {
 
     // set the scale domains for main and nav charts
     x.domain([startTimeViewport, endTimeViewport]);
-    xNav.domain([startTime, endTime]); 
+    xNav.domain([startTime, endTime]);
 
     // update axis with modified scale
     xAxis.scale(x)(xAxisG);
     yAxis.scale(y)(yAxisG);
     xAxisNav.scale(xNav)(xAxisGNav);
 
+    // initial data is empty
+    data = [];
+
     // create brush (moveable, changable rectangle that determines the time domain of main chart)
-    var viewport = d3.brushX(xNav)
-        .extent([startTimeViewport, endTimeViewport])
-        .on("brush", function () {
-          // get the current time extent of viewport
-          var extent = viewport.extent();
-          startTimeViewport = extent[0];
-          endTimeViewport = extent[1];
-
-          // compute viewport extent in milliseconds
-          intervalViewport = endTimeViewport.getTime() - startTimeViewport.getTime();
-          offsetViewport = startTimeViewport.getTime() - startTime.getTime();
-
-          // handle invisible viewport
-          if (intervalViewport == 0) {
-            intervalViewport = maxSeconds * 1000;
-            offsetViewport = 0;
-          }
-
-          // update the x domain of the main chart
-          x.domain(d3.event.selection === null ? xNav.domain() : extent);
-
-          // update the x axis of the main chart
-          xAxis.scale(x)(xAxisG);
-
-          // update display
-          refresh();
-        });
+    var viewport = d3.brushX()
+        .extent([[0, 0], [widthNav, heightNav]])
+        .on("brush", brushed);
+
+    function brushed () {
+      // get the current time extent of viewport
+      var extent = d3.event.selection;
+      startTimeViewport = xNav.invert(extent[0]);
+      endTimeViewport = xNav.invert(extent[1]);
+
+      if (debug) {
+        console.log("startTimeViewport", startTimeViewport);
+        console.log("endTimeViewport", endTimeViewport);
+      }
+
+      // compute viewport extent in milliseconds
+      intervalViewport = endTimeViewport.getTime() - startTimeViewport.getTime();
+      offsetViewport = startTimeViewport.getTime() - startTime.getTime();
+
+      // handle invisible viewport
+      if (intervalViewport == 0) {
+        intervalViewport = maxSeconds * 1000;
+        offsetViewport = 0;
+      }
+
+      // update the x domain of the main chart
+      x.domain([startTimeViewport, endTimeViewport]);
+
+      // update the x axis of the main chart
+      xAxis.scale(x)(xAxisG);
+
+      // update display
+      refresh();
+    }
 
     // create group and assign to brush
     var viewportG = nav.append("g")
         .attr("class", "viewport")
         .call(viewport)
-        .selectAll("rect")
-        .attr("height", heightNav);
+        .call(viewport.move, [xNav(startTimeViewport), xNav(endTimeViewport)]);
 
     // initial invocation; update display
-    data = [];
     refresh();
 
     // function to refresh the viz upon changes of the time domain
@@ -405,10 +413,8 @@ function realTimeChartMulti() {
       if (halted) return;
 
       // get current viewport extent
-      //var extent = viewport ? xNav.domain() : viewport.extent();
-      var extent = viewport.extent().length == 2 ? viewport.extent() : xNav.domain();
-      var interval = extent[1].getTime() - extent[0].getTime();
-      var offset = extent[0].getTime() - xNav.domain()[0].getTime();
+      var interval = endTimeViewport.getTime() - startTimeViewport.getTime();
+      var offset = startTimeViewport.getTime() - xNav.domain()[0].getTime();
 
       // compute new nav extents
       endTime = new Date();
@@ -417,7 +423,7 @@ function realTimeChartMulti() {
       // compute new viewport extents
       startTimeViewport = new Date(startTime.getTime() + offset);
       endTimeViewport = new Date(startTimeViewport.getTime() + interval);
-      viewport.extent([startTimeViewport, endTimeViewport])
+      viewport.move(viewportG, [xNav(startTimeViewport), xNav(endTimeViewport)]);
 
       // update scales
       x.domain([startTimeViewport, endTimeViewport]);

From e6a19d0c7e360495be2b4defcf99b590ce7ec00d Mon Sep 17 00:00:00 2001
From: Sean Kauffman <skauffma@uwaterloo.ca>
Date: Wed, 27 Feb 2019 15:32:17 -0500
Subject: [PATCH 4/6] Fix the urls for resources

---
 index.html  |   5 +-
 index.html~ | 190 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 192 insertions(+), 3 deletions(-)
 create mode 100644 index.html~

diff --git a/index.html b/index.html
index b3a5aa3..4563f4f 100644
--- a/index.html
+++ b/index.html
@@ -59,10 +59,9 @@ <h4>D3 Based Real Time Chart with Multiple Data Streams
 
 </div>
 
-<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>-->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.9.1/d3.min.js"></script>
 <!--<script src="../_lib/d3.min.js"></script>-->
-<script src="static/d3.min.js"></script>
-<script src="static/realTimeChartMulti.js"></script>
+<script src="realTimeChartMulti.js"></script>
 <script>
 'use strict';
 
diff --git a/index.html~ b/index.html~
new file mode 100644
index 0000000..b3a5aa3
--- /dev/null
+++ b/index.html~
@@ -0,0 +1,190 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <!-- Author: Bo Ericsson -->
+  <title>Real Time Chart Multi</title>
+  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" media="all">
+  <style>
+  .chartTitle {
+    font-size: 12px;
+    font-weight: bold;
+    text-anchor: middle; 
+  }
+  .title {
+    font: 10px sans-serif;
+    font-weight: bold;
+    text-anchor: middle;
+  }
+  .nav .area {
+    fill: lightgrey;
+    stroke-width: 0px;
+  }
+  .nav .line {
+    fill: none;
+    stroke: darkgrey;
+    stroke-width: 1px;
+  }
+  .viewport {
+    stroke: grey;
+    fill: black;
+    fill-opacity: 0.3;
+  }
+  .viewport .selection {
+    stroke: grey;
+    fill: green;
+  }
+  .viewport .handle {
+    display: none;
+  }
+  .viewport .overlay {
+    visibility: hidden;
+  }
+  .well {
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+  </style>
+<body>
+
+<div style="max-width: 900px; max-height: 400px; padding: 10px">
+
+  <div class="well">
+    <h4>D3 Based Real Time Chart with Multiple Data Streams 
+  </div>
+  <input id="debug" type="checkbox" name="debug" value="debug" style="margin-bottom: 10px" /> Debug
+  <input id="halt" type="checkbox" name="halt" value="halt" style="margin-bottom: 10px" /> Halt
+
+  <div id="viewDiv"></div>
+
+</div>
+
+<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>-->
+<!--<script src="../_lib/d3.min.js"></script>-->
+<script src="static/d3.min.js"></script>
+<script src="static/realTimeChartMulti.js"></script>
+<script>
+'use strict';
+
+// create the real time chart
+var chart = realTimeChartMulti()
+    .title("Chart Title")
+    .yTitle("Categories")
+    .xTitle("Time")
+    .yDomain(["Category1"]) // initial y domain (note array)
+    .border(true)
+    .width(900)
+    .height(350);
+
+// invoke the chart
+var chartDiv = d3.select("#viewDiv").append("div")
+    .attr("id", "chartDiv")
+    .call(chart);
+
+// alternative and equivalent invocation
+//chart(chartDiv); 
+
+// event handler for debug checkbox
+d3.select("#debug").on("change", function() {
+  var state = d3.select(this).property("checked")
+  chart.debug(state);
+})
+
+// event handler for halt checkbox
+d3.select("#halt").on("change", function() {
+  var state = d3.select(this).property("checked")
+  chart.halt(state);
+})
+
+
+// configure the data generator
+
+// mean and deviation for generation of time intervals
+var tX = 5; // time constant, multiple of one second
+var meanMs = 1000 * tX, // milliseconds
+    dev = 200 * tX; // std dev
+
+// define time scale
+var timeScale = d3.scaleLinear()
+    .domain([300 * tX, 1700 * tX])
+    .range([300 * tX, 1700 * tX])
+    .clamp(true);
+
+// define function that returns normally distributed random numbers
+var normal = d3.randomNormal(meanMs, dev);
+
+// define color scale
+var color = d3.scaleOrdinal(d3.schemeCategory10);
+
+// in a normal use case, real time data would arrive through the network or some other mechanism
+var d = -1;
+var shapes = ["rect", "circle"];
+var timeout = 0;
+
+// define data generator
+function dataGenerator() {
+
+  setTimeout(function() {
+
+    // add categories dynamically
+    d++;
+    switch (d) {
+      case 5:
+        chart.yDomain(["Category1", "Category2"]);
+        break;
+      case 10:
+        chart.yDomain(["Category1", "Category2", "Category3"]);
+        break;
+      default:
+    }
+
+    // output a sample for each category, each interval (five seconds)
+    chart.yDomain().forEach(function(cat, i) {
+
+      // create randomized timestamp for this category data item
+      var now = new Date(new Date().getTime() + i * (Math.random() - 0.5) * 1000);
+
+      // create new data item
+      var obj;
+      var doSimple = false;
+      if (doSimple) {
+        obj = {
+          // simple data item (simple black circle of constant size)
+          time: now,
+          color: "black",
+          opacity: 1,
+          category: "Category" + (i + 1),
+          type: "circle",
+          size: 5,
+        };
+
+      } else {
+        obj = {
+          // complex data item; four attributes (type, color, opacity and size) are changing dynamically with each iteration (as an example)
+          time: now,
+          color: color(d % 10),
+          opacity: Math.max(Math.random(), 0.3),
+          category: "Category" + (i + 1),
+          //type: shapes[Math.round(Math.random() * (shapes.length - 1))], // the module currently doesn't support dynamically changed svg types (need to add key function to data, or method to dynamically replace svg object – tbd)
+          type: "circle",
+          size: Math.max(Math.round(Math.random() * 12), 4),
+        };
+      }
+
+      // send the datum to the chart
+      chart.datum(obj);      
+    });
+
+    // drive data into the chart at average interval of five seconds
+    // here, set the timeout to roughly five seconds
+    timeout = Math.round(timeScale(normal()));
+
+    // do forever
+    dataGenerator();
+
+  }, timeout);
+}
+
+// start the data generator
+dataGenerator();
+</script>

From c3e51156da16eb600baeae990dad7092a721b39c Mon Sep 17 00:00:00 2001
From: Sean Kauffman <skauffma@uwaterloo.ca>
Date: Wed, 27 Feb 2019 15:32:30 -0500
Subject: [PATCH 5/6] Didn't mean to commit the backup file

---
 index.html~ | 190 ----------------------------------------------------
 1 file changed, 190 deletions(-)
 delete mode 100644 index.html~

diff --git a/index.html~ b/index.html~
deleted file mode 100644
index b3a5aa3..0000000
--- a/index.html~
+++ /dev/null
@@ -1,190 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <!-- Author: Bo Ericsson -->
-  <title>Real Time Chart Multi</title>
-  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" media="all">
-  <style>
-  .chartTitle {
-    font-size: 12px;
-    font-weight: bold;
-    text-anchor: middle; 
-  }
-  .title {
-    font: 10px sans-serif;
-    font-weight: bold;
-    text-anchor: middle;
-  }
-  .nav .area {
-    fill: lightgrey;
-    stroke-width: 0px;
-  }
-  .nav .line {
-    fill: none;
-    stroke: darkgrey;
-    stroke-width: 1px;
-  }
-  .viewport {
-    stroke: grey;
-    fill: black;
-    fill-opacity: 0.3;
-  }
-  .viewport .selection {
-    stroke: grey;
-    fill: green;
-  }
-  .viewport .handle {
-    display: none;
-  }
-  .viewport .overlay {
-    visibility: hidden;
-  }
-  .well {
-    padding-top: 0px;
-    padding-bottom: 0px;
-  }
-  </style>
-<body>
-
-<div style="max-width: 900px; max-height: 400px; padding: 10px">
-
-  <div class="well">
-    <h4>D3 Based Real Time Chart with Multiple Data Streams 
-  </div>
-  <input id="debug" type="checkbox" name="debug" value="debug" style="margin-bottom: 10px" /> Debug
-  <input id="halt" type="checkbox" name="halt" value="halt" style="margin-bottom: 10px" /> Halt
-
-  <div id="viewDiv"></div>
-
-</div>
-
-<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>-->
-<!--<script src="../_lib/d3.min.js"></script>-->
-<script src="static/d3.min.js"></script>
-<script src="static/realTimeChartMulti.js"></script>
-<script>
-'use strict';
-
-// create the real time chart
-var chart = realTimeChartMulti()
-    .title("Chart Title")
-    .yTitle("Categories")
-    .xTitle("Time")
-    .yDomain(["Category1"]) // initial y domain (note array)
-    .border(true)
-    .width(900)
-    .height(350);
-
-// invoke the chart
-var chartDiv = d3.select("#viewDiv").append("div")
-    .attr("id", "chartDiv")
-    .call(chart);
-
-// alternative and equivalent invocation
-//chart(chartDiv); 
-
-// event handler for debug checkbox
-d3.select("#debug").on("change", function() {
-  var state = d3.select(this).property("checked")
-  chart.debug(state);
-})
-
-// event handler for halt checkbox
-d3.select("#halt").on("change", function() {
-  var state = d3.select(this).property("checked")
-  chart.halt(state);
-})
-
-
-// configure the data generator
-
-// mean and deviation for generation of time intervals
-var tX = 5; // time constant, multiple of one second
-var meanMs = 1000 * tX, // milliseconds
-    dev = 200 * tX; // std dev
-
-// define time scale
-var timeScale = d3.scaleLinear()
-    .domain([300 * tX, 1700 * tX])
-    .range([300 * tX, 1700 * tX])
-    .clamp(true);
-
-// define function that returns normally distributed random numbers
-var normal = d3.randomNormal(meanMs, dev);
-
-// define color scale
-var color = d3.scaleOrdinal(d3.schemeCategory10);
-
-// in a normal use case, real time data would arrive through the network or some other mechanism
-var d = -1;
-var shapes = ["rect", "circle"];
-var timeout = 0;
-
-// define data generator
-function dataGenerator() {
-
-  setTimeout(function() {
-
-    // add categories dynamically
-    d++;
-    switch (d) {
-      case 5:
-        chart.yDomain(["Category1", "Category2"]);
-        break;
-      case 10:
-        chart.yDomain(["Category1", "Category2", "Category3"]);
-        break;
-      default:
-    }
-
-    // output a sample for each category, each interval (five seconds)
-    chart.yDomain().forEach(function(cat, i) {
-
-      // create randomized timestamp for this category data item
-      var now = new Date(new Date().getTime() + i * (Math.random() - 0.5) * 1000);
-
-      // create new data item
-      var obj;
-      var doSimple = false;
-      if (doSimple) {
-        obj = {
-          // simple data item (simple black circle of constant size)
-          time: now,
-          color: "black",
-          opacity: 1,
-          category: "Category" + (i + 1),
-          type: "circle",
-          size: 5,
-        };
-
-      } else {
-        obj = {
-          // complex data item; four attributes (type, color, opacity and size) are changing dynamically with each iteration (as an example)
-          time: now,
-          color: color(d % 10),
-          opacity: Math.max(Math.random(), 0.3),
-          category: "Category" + (i + 1),
-          //type: shapes[Math.round(Math.random() * (shapes.length - 1))], // the module currently doesn't support dynamically changed svg types (need to add key function to data, or method to dynamically replace svg object – tbd)
-          type: "circle",
-          size: Math.max(Math.round(Math.random() * 12), 4),
-        };
-      }
-
-      // send the datum to the chart
-      chart.datum(obj);      
-    });
-
-    // drive data into the chart at average interval of five seconds
-    // here, set the timeout to roughly five seconds
-    timeout = Math.round(timeScale(normal()));
-
-    // do forever
-    dataGenerator();
-
-  }, timeout);
-}
-
-// start the data generator
-dataGenerator();
-</script>

From c6163620aa3579b2109ec2daa81e2783a3ff6c09 Mon Sep 17 00:00:00 2001
From: Sean Kauffman <skauffma@uwaterloo.ca>
Date: Wed, 27 Feb 2019 15:34:49 -0500
Subject: [PATCH 6/6] Give myself credit for something

---
 realTimeChartMulti.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/realTimeChartMulti.js b/realTimeChartMulti.js
index 30f84d1..fa81a04 100644
--- a/realTimeChartMulti.js
+++ b/realTimeChartMulti.js
@@ -1,4 +1,4 @@
-<!-- Author: Bo Ericsson, bo@boe.net -->
+<!-- Author: Bo Ericsson, bo@boe.net, updated for d3 v5 by Sean Kauffman, seanmk.com -->
 <!-- Inspiration from numerous examples by Mike Bostock, http://bl.ocks.org/mbostock, -->
 <!-- and example by Andy Aiken, http://blog.scottlogic.com/2014/09/19/interactive.html -->
 'use strict';