diff --git a/index.html b/index.html
index 50ea99b..4563f4f 100644
--- a/index.html
+++ b/index.html
@@ -4,32 +4,18 @@
   <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">-->
+  <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>
-  .axis text {
-    font: 10px sans-serif;
-  }
   .chartTitle {
     font-size: 12px;
     font-weight: bold;
     text-anchor: middle; 
   }
-  .axis .title {
+  .title {
+    font: 10px sans-serif;
     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;
@@ -44,9 +30,16 @@
     fill: black;
     fill-opacity: 0.3;
   }
-  .viewport .extent {
+  .viewport .selection {
+    stroke: grey;
     fill: green;
   }
+  .viewport .handle {
+    display: none;
+  }
+  .viewport .overlay {
+    visibility: hidden;
+  }
   .well {
     padding-top: 0px;
     padding-bottom: 0px;
@@ -66,7 +59,7 @@ <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="realTimeChartMulti.js"></script>
 <script>
@@ -111,16 +104,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 +186,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..fa81a04 100644
--- a/realTimeChartMulti.js
+++ b/realTimeChartMulti.js
@@ -1,11 +1,11 @@
-<!-- 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';
 
 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(x);
+    yAxis = d3.axisLeft(y);
 
     // 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(xNav);
 
     // compute initial time domains...
     var ts = new Date().getTime();
@@ -196,59 +196,66 @@ 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.svg.brush()
-        .x(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(viewport.empty() ? 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 
+    // 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 +267,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 +285,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 +308,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 +319,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 +329,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 +339,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 +349,7 @@ function realTimeChartMulti() {
                 break;
               default:
             }
-            return retVal; 
+            return retVal;
           })
           .attr("width", function(d) {
             var retVal = null;
@@ -352,17 +359,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 +397,7 @@ function realTimeChartMulti() {
           .attr("cy", function(d) {
             return yNav(d.category);
           })
-    
+
     } // end refreshChart function
 
 
@@ -400,24 +407,23 @@ 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 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();
       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])
+      viewport.move(viewportG, [xNav(startTimeViewport), xNav(endTimeViewport)]);
 
       // update scales
       x.domain([startTimeViewport, endTimeViewport]);
@@ -441,7 +447,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 +474,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 +504,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;       
   }