From bc99503ee29cb9025a28650db7dc16020c5370ba Mon Sep 17 00:00:00 2001
From: mroberge <mroberge.whois@gmail.com>
Date: Tue, 4 Apr 2017 12:55:49 -0400
Subject: [PATCH 1/5] clean errors and warnings

---
 chat.html             |  4 ++--
 d3-line-chunked.html  |  6 +++---
 oldindex.html         |  7 +++----
 spec/spec.analysis.js |  4 ++--
 src/index-drawMap.js  |  4 ++--
 src/initialize.js     |  4 ++--
 src/local-storage.js  |  2 +-
 src/requestData.js    | 18 +++++++++---------
 x-CDOrequest.html     |  2 +-
 x-datarequest.html    |  6 +++---
 10 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/chat.html b/chat.html
index a74a3c8..4623141 100644
--- a/chat.html
+++ b/chat.html
@@ -14,7 +14,7 @@
       var name = $('#nameInput').val();
       var text = $('#messageInput').val();
       myDataRef.push({name: name, text: text});
-      $('#messageInput').val('');
+      text.val('');
     }
   });
   myDataRef.on('child_added', function(snapshot) {
@@ -24,7 +24,7 @@
   function displayChatMessage(name, text) {
     $('<div/>').text(text).prepend($('<em/>').text(name+': ')).appendTo($('#messagesDiv'));
     $('#messagesDiv')[0].scrollTop = $('#messagesDiv')[0].scrollHeight;
-  };
+  }
 </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/d3-line-chunked.html b/d3-line-chunked.html
index 47fb6e1..209b321 100644
--- a/d3-line-chunked.html
+++ b/d3-line-chunked.html
@@ -106,7 +106,7 @@ <h1 class="main-header">d3-line-chunked</h1>
 
         d3.select('.chart-container').append('button')
                 .text('New Data')
-                .on('click', function () { updateChart(generateRandom(20)); })
+                .on('click', function () { updateChart(generateRandom(20)); });
 
         updateChart(data);
     }
@@ -119,7 +119,7 @@ <h1 class="main-header">d3-line-chunked</h1>
                 .curve(d3.curveLinear)
                 .defined(function (d) { return d.y != null; })
                 .lineStyles({
-                    stroke: '#0bb',
+                    stroke: '#0bb'
                 });
 
         root
@@ -189,7 +189,7 @@ <h1 class="main-header">d3-line-chunked</h1>
                 .attr('x1', function (d) { return x(d.x); })
                 .attr('x2', function (d) { return x(d.x); })
                 .attr('y1', 0)
-                .attr('y2', height)
+                .attr('y2', height);
 
         binding.exit().remove();
     }
diff --git a/oldindex.html b/oldindex.html
index fb6b035..2d35d51 100644
--- a/oldindex.html
+++ b/oldindex.html
@@ -246,7 +246,6 @@
       } else {
         //don't need to plot a thing if we aren't showing a graph.
       }
-      ;
     }
 
     $(function() {
@@ -363,12 +362,12 @@ <h1 id="logo">HydroCloud</h1>
           var filename = "resources/USGSshort.txt";
         } else {
           var filename = "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=" + id + "&period=P30D&parameterCd=00060";
-        };
+        }
         d3.json(filename, function(error, json) {
           if (error) {
             if (error.status === 0) {
               alert("CORS is not enabled.");
-            };
+            }
             return console.warn(error);
           }
           //if (!json.value.timeSeries[0].values[0].value){console.warn("there is no data for this site")};
@@ -397,7 +396,7 @@ <h1 id="logo">HydroCloud</h1>
 
 
     </script>
-    <div id="aboutText" style="display:none">
+    <div id="aboutText" style="display:none;">
       <h2>Description of the HydroCloud project</h2>
       <p>
         HydroCloud is a hydrological analysis system consisting of a fast, lightweight mapping and analysis tool and a scalable, distributed database. This page is a partial demonstration of the interface for this project.
diff --git a/spec/spec.analysis.js b/spec/spec.analysis.js
index 84ab945..b74ca97 100644
--- a/spec/spec.analysis.js
+++ b/spec/spec.analysis.js
@@ -8,7 +8,7 @@ describe("analysis.js is a suite of functions that includes:", function() {
     var value = 40 * Math.sin(i / 10) + 100 + i;
     var obs = [time, value];
     series1.push(obs);
-  };
+  }
   //console.log(startDate);
   //console.log(increment);
   //console.log(series1);
@@ -136,7 +136,7 @@ describe("The tableJoin() function", function() {
   
   describe("contains a validate() function that", function() {
     xit("returns 'invalid' if a data object is invalid", function() {
-      expect(dataJoin.validate()).toEqual("invalid");
+      expect(tableJoin.validate()).toEqual("invalid");
     });
     xit("validates input objects to determine if they have id and data", function() {
       var result = tableJoin(data1);
diff --git a/src/index-drawMap.js b/src/index-drawMap.js
index 21424b9..ff6e1a7 100644
--- a/src/index-drawMap.js
+++ b/src/index-drawMap.js
@@ -102,7 +102,7 @@ function drawMap() {
   });
 */
 
-  tileNEX = new google.maps.ImageMapType({
+  var tileNEX = new google.maps.ImageMapType({
     getTileUrl : function(tile, zoom) {
       return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
     },
@@ -112,7 +112,7 @@ function drawMap() {
     isPng : true
   });
 
-  goes = new google.maps.ImageMapType({
+  var goes = new google.maps.ImageMapType({
     getTileUrl : function(tile, zoom) {
       return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/goes-east-vis-1km-900913/" + zoom + "/" + tile.x + "/" + tile.y + ".png?" + (new Date()).getTime();
     },
diff --git a/src/initialize.js b/src/initialize.js
index 3f779bc..8ec596c 100644
--- a/src/initialize.js
+++ b/src/initialize.js
@@ -11,8 +11,8 @@ function initialize() {
     
     
 
-    viewModel.time.start(new Date(2014,01,01));
-    viewModel.time.end(new Date(2015,01,01));
+    viewModel.time.start(new Date(2014,1,1));
+    viewModel.time.end(new Date(2015,1,1));
     viewModel.time.recent("90");
     
     viewModel.dataArray.subscribe(function(newValue) {
diff --git a/src/local-storage.js b/src/local-storage.js
index 62f7db4..2566780 100644
--- a/src/local-storage.js
+++ b/src/local-storage.js
@@ -8,7 +8,7 @@ function storageAvailable(storageType) {
         return true;
     }
     catch(e) {
-        console.log(storageType + " not available.")
+        console.log(storageType + " not available.");
         console.dir(e);
         return false;
     }
diff --git a/src/requestData.js b/src/requestData.js
index ae196b3..628eb65 100644
--- a/src/requestData.js
+++ b/src/requestData.js
@@ -23,7 +23,7 @@ function requestData(id, name, info) {
 
         //Now collect the Stream Gage data and put in the dataArray
         //First check storage. We might have collected this data earlier, but not in this session.
-        console.log("Checking for gage data in localStorage. Result of stored:")
+        console.log("Checking for gage data in localStorage. Result of stored:");
         var stored = checkStorage(id);
         console.log(stored);
         if (stored) {
@@ -39,7 +39,7 @@ function requestData(id, name, info) {
 
         }
     } else {
-        console.log("This site is already in the siteIdArray, so it is likely that we already have the data in the dataArray.")
+        console.log("This site is already in the siteIdArray, so it is likely that we already have the data in the dataArray.");
         //If we matched the site to our siteIdArray, then we should already have gage data. Plot.
         viewModel.plotGraph();
     }
@@ -50,9 +50,9 @@ function requestData(id, name, info) {
 
 function dateStr(d) {
     var month = +d.getMonth() + 1;
-    month = new String("00" + month).slice(-2);
+    month = String("00" + month).slice(-2);
     var date = +d.getDate();
-    date = new String("00" + date).slice(-2);
+    date = String("00" + date).slice(-2);
 
     var now = {
         time : d,
@@ -93,7 +93,7 @@ function getTuNexrad(id) {
     var urlRecent = "http://10.55.15.196:5000/nexradTSrecent/id=" + id + "/recent=" + time.recent;
 
     //console.log(endstr);
-    result = $.ajax({
+    var result = $.ajax({
         url : urlDates,
         //url : urlRecent,
         dataType : "json",
@@ -135,16 +135,17 @@ function getUSGS(id) {
     var testDaily = "https://waterservices.usgs.gov/nwis/dv/?format=json&sites=01646500&period=P10D&parameterCd=00060";
     var recentDaily = "https://waterservices.usgs.gov/nwis/dv/?format=json&sites=" + usgsId + "&period=P" + viewModel.time.recent() + "D&parameterCd=00060";
     var staticDateDaily = "https://waterservices.usgs.gov/nwis/dv/?format=json&sites=01646500&startDT=2013-05-01&endDT=2013-5-10&parameterCd=00060";
+    var url = recentDaily;
 
     if (id == "local") {
-        var url = localQuery;
+        url = localQuery;
     } else {
         // The ideal query for now (2017-03-07) is to request a small amount of the most recent daily data: recentDaily
         // recentDaily will minimize the impact the program has on the USGS servers.
-        var url = recentDaily;
+        url = recentDaily;
         console.log("Requesting data from: " + url);
     }
-    result = $.ajax({
+    var result = $.ajax({
         url: url,
         //headers: {"Accept-Encoding": "gzip, compress"},//These are sent automatically by the browser. No need for this here.
         dataType: "json",
@@ -167,7 +168,6 @@ function getUSGS(id) {
             //process data
             //    check for no data or empty set;
             if (returnedData.value.timeSeries[0] < 1) {
-                //This site does not exist. Somehow the FusionTable had a site that doesn't exist.
                 // Leave data = [] for storage.
             } else {
                 var temp = returnedData.value.timeSeries[0].values[0].value;
diff --git a/x-CDOrequest.html b/x-CDOrequest.html
index 3ef5f1b..6696caf 100644
--- a/x-CDOrequest.html
+++ b/x-CDOrequest.html
@@ -9,7 +9,7 @@
 
   <style>
     header {
-      font-family: Arial;
+      font-family: Arial, sans-serif;
       color: green;
       background-color: darkgray;
     }
diff --git a/x-datarequest.html b/x-datarequest.html
index c1e05d3..84e665a 100644
--- a/x-datarequest.html
+++ b/x-datarequest.html
@@ -11,7 +11,7 @@
   <body>
     <label for="selectRes">Resource request:</label>
     <select name="selectRes" id="selectRes">
-      <option value="default" disabled="disabled" selected="selected" style="display:none">Please select a resource.</option>
+      <option value="default" disabled="disabled" selected="selected" style="display:none;">Please select a resource.</option>
       <option value="01584050">USGS site 01584050</option>
       <option value="01585200">USGS site 01585200</option>
       <option value="01583500">USGS site 01583500</option>
@@ -36,12 +36,12 @@
           var filename = "resources/USGSshort.txt";
         } else {
           var filename = "http://waterservices.usgs.gov/nwis/iv/?format=json&sites=" + id + "&period=P30D&parameterCd=00060";
-        };
+        }
         d3.json(filename, function(error, json) {
           if (error) {
             if (error.status === 0) {
               alert("CORS is not enabled.");
-            };
+            }
             return console.warn(error);
           }
           //if (!json.value.timeSeries[0].values[0].value){console.warn("there is no data for this site")};

From 4de928a895b351a6c0938ebc2bc11390a703f652 Mon Sep 17 00:00:00 2001
From: mroberge <mroberge.whois@gmail.com>
Date: Tue, 4 Apr 2017 13:16:40 -0400
Subject: [PATCH 2/5] clean up comments in scatterChart.js

---
 src/graph-scatterChart.js | 58 ++++++++-------------------------------
 1 file changed, 11 insertions(+), 47 deletions(-)

diff --git a/src/graph-scatterChart.js b/src/graph-scatterChart.js
index e6435e8..c2f1560 100644
--- a/src/graph-scatterChart.js
+++ b/src/graph-scatterChart.js
@@ -36,8 +36,6 @@ function scatterChart() {
   //var color = d3.scaleOrdinal(d3.schemeCategory10);
   var color = d3.scale.category10();
 
-  //NEW
-  //var area = d3.svg.area().x(X).y1(Y);
   var line = d3.svg.line()
       .interpolate("step-before")
       .x(X)
@@ -45,7 +43,6 @@ function scatterChart() {
       .defined(function (d) { return d[1] !== null; });//This allows the line to break at null values.
 
   var xDomain = [];
-  //leave empty. First time data are loaded, it will calculate the full x domain.
   var fullxDomain = [];
   var fullyDomain = [];
 
@@ -62,13 +59,14 @@ function scatterChart() {
       fullyDomain = setFullyDomain();
 
       // Update the x-scale.
-      xScale.domain(fullxDomain)
-      .range([0, width - margin.left - margin.right]);
+      xScale
+        .domain(fullxDomain)
+        .range([0, width - margin.left - margin.right]);
 
       // Update the y-scale.
       yScale
-      //.domain([0, d3.max(dataArray[0], function(d) { return d[1]; })])//need to set extent in a new way, since some lines will have a different max.
-      .domain(fullyDomain).range([height - margin.top - margin.bottom, 0]);
+        .domain(fullyDomain)
+        .range([height - margin.top - margin.bottom, 0]);
 
       // Select the svg element, if it exists.
       var svg = d3.select(this).selectAll("svg").data([dataArray]);
@@ -220,49 +218,26 @@ function scatterChart() {
       //***************End Tooltip Code ***************
 
       //click function for handling mouseclicks on an object.
-      function myClickFunction() {//just a silly function taken from http://bl.ocks.org/mbostock/1166403
-        console.log("click");
-
-        var n = dataArray[0].length - 1, i = Math.floor(Math.random() * n / 2), j = i + Math.floor(Math.random() * n / 2) + 1;
-        xDomain = [xValue(dataArray[0][i]), xValue(dataArray[0][j])];
-        xScale.domain(xDomain);
-        var t = g.transition().duration(750);
-        t.select(".x.axis").call(xAxis);
-        t.selectAll(".line").attr("d", line);
+      function myClickFunction() {
+        console.log("myClickFunction");
       }
 
       function myRClickFunction() {
-        xDomain = setFullxDomain();
         console.log("myRClickFunction");
-        xScale.domain(xDomain);
-        var t = g.transition().duration(750);
-        t.select(".x.axis").call(xAxis);
-        t.selectAll(".line").attr("d", line);
       }
 
       function setFullxDomain() {
-        //console.log("setFullxDomain");
         //set xmax and xmin to x value in first element in first array.
         var xmax = dataArray[0][0][0];
         var xmin = xmax;
-        //console.log("xmax: " + xmax + " xmin: " + xmin);
-        //d3.min(dataArray[0], xValue);
         var localxMax = xmax;
         var localxMin = xmax;
 
-        //console.log("domain: " + domain);
-        //console.log(domain);
-        //domain = d3.extent(dataArray[0].map(function(d) {return d.date;}));
-        //console.log("new domain: " );
-        //console.log(domain);
-        //x.domain(d3.extent(data.map(function(d) {return d.date;})));
         for ( var i = 0; i < dataArray.length; i++) {
           //loop through each of the arrays.
-          //console.log("localxMax before search: " + localxMax);
           localxMax = d3.max(dataArray[i], function(d) {
             return d[0];
           });
-          //console.log("localxMax of dataArray[" + i + "] is: " + localxMax);
           if (localxMax > xmax) {
             xmax = localxMax;
           }
@@ -279,28 +254,17 @@ function scatterChart() {
       }
 
       function setFullyDomain() {
-        //console.log("setFullyDomain");
         //set xmax and xmin to x value in first element in first array.
         var max = dataArray[0][0][1];
         var min = max;
-        //console.log("max: " + max + " min: " + min);
-        //d3.min(dataArray[0], xValue);
         var localMax = max;
         var localMin = max;
 
-        //console.log("y domain: " + domain);
-        //console.log(domain);
-        //domain = d3.extent(dataArray[0].map(function(d) {return d.date;}));
-        //console.log("new domain: " );
-        //console.log(domain);
-        //x.domain(d3.extent(data.map(function(d) {return d.date;})));
         for ( var i = 0; i < dataArray.length; i++) {
           //loop through each of the arrays.
-          //console.log("localyMax before search: " + localMax);
           localMax = d3.max(dataArray[i], function(d) {
             return d[1];
           });
-          //console.log("localyMax of dataArray[" + i + "] is: " + localMax);
           if (localMax > max) {
             max = localMax;
           }
@@ -309,7 +273,7 @@ function scatterChart() {
           });
           if (localMin < min) {
             min = localMin;
-          }//it will never be smaller than zero unless it finds a negative value..
+          }//it will never be smaller than zero unless it finds a negative value.
 
         }
         return [min, max];
@@ -318,12 +282,12 @@ function scatterChart() {
     });
   }
 
-  // The x-accessor for the path generator; xScale ∘ xValue.
+  // The x-accessor for the path generator
   function X(d) {
     return xScale(d[0]);
   }
 
-  // The x-accessor for the path generator; yScale ∘ yValue.
+  // The y-accessor for the path generator
   function Y(d) {
     return yScale(d[1]);
   }
@@ -350,7 +314,7 @@ function scatterChart() {
     return chart;
   };
 
-  chart.x = function(a) {//Do we need this?
+  chart.x = function(a) {
     if (!arguments.length)
       return xValue;
     xValue = a;

From c7d1707477b91549735b817054cb605dfecee23e Mon Sep 17 00:00:00 2001
From: mroberge <mroberge.whois@gmail.com>
Date: Tue, 4 Apr 2017 13:51:00 -0400
Subject: [PATCH 3/5] clean up comments in scatterChart.

---
 src/graph-scatterChart.js | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/graph-scatterChart.js b/src/graph-scatterChart.js
index c2f1560..1f5e745 100644
--- a/src/graph-scatterChart.js
+++ b/src/graph-scatterChart.js
@@ -1,5 +1,20 @@
 function scatterChart() {
   /*
+   * (c) 2017 Martin Roberge
+   * MIT license
+   *
+   * How to use:
+   *   Create a <div> element in your html to place the chart inside. You can set its size here, or programmatically.
+   *   `  <div id="graphDiv"></div>
+   *   Select the div and assign a reference to it. ("graphDiv" in this example)
+   *   `  var graphDiv = d3.select("#graph_div");
+   *   Create an instance of the scatterChart
+   *   `  var myChart = scatterChart();
+   *   Assign some data to your div. Use datum for a static graph. See note below on data requirements.
+   *   Call the graph function on the div. It will return a chart object that you can modify later on.
+   *   `  graphDiv.datum(this.dataArray()).call(myChart);
+   *
+   *
    * Based on Mike Bostock's system for creating reusable charts, described
    * here: http://bost.ocks.org/mike/chart/
    *
@@ -77,7 +92,6 @@ function scatterChart() {
 
       var lineGroup = gEnter.append("g").attr("class", "lineGroup");
       var lineEnter = lineGroup.selectAll("path").data(dataArray).enter().append("path").attr("class", "line");
-      //.attr("d", line);//don't draw the line yet. update the size of the svg first.
 
       gEnter.append("g").attr("class", "x axis");//is this name okay? It has a space!
       gEnter.append("g").attr("class", "y axis");
@@ -102,7 +116,6 @@ function scatterChart() {
       // Update the y-axis.
       g.select(".y.axis").attr("transform", "translate(0," + xScale.range()[0] + ")").call(yAxis).on("click", myRClickFunction);
 
-      //title block
       // Update the title.
       g.select(".titleGroup").attr("transform", "translate(10,0)");
       g.select(".subtitle").text(dataArray.length + " sites");
@@ -182,23 +195,21 @@ function scatterChart() {
             // position the circle and text
             d3.selectAll(".mouse-per-line")
                 .attr("transform", function(d, i) {
-                  //console.log(width/mouse[0]);
-                  //console.log(d);
                   if(d.length < 1) { return; } //return if empty set.
                   var xDate = xScale.invert(mouse[0]),
                       bisect = d3.bisector(function(d) { return d[0]; }).right;
                   var idx = bisect(d[1], xDate); //Sometimes an empty set is in viewModel.dataArray and an error occurs.
 
-                  // since we are use curve fitting we can't relay on finding the points like I had done in my last answer
+                  // since we are use curve fitting we need to find by searching along the length
                   // this conducts a search using some SVG path functions
                   // to find the correct position on the line
                   // from http://bl.ocks.org/duopixel/3824661
                   var beginning = 0;
-                  var end = lines[i].getTotalLength(); //getTotalLength() is defined elsewhere...?
+                  var end = lines[i].getTotalLength(); //getTotalLength() is a method of SVGGeometryElement
 
                   while (true){
                     var target = Math.floor((beginning + end) / 2);
-                    var pos = lines[i].getPointAtLength(target);
+                    var pos = lines[i].getPointAtLength(target); //getPointAtLength() is a method of SVGGeometryElement
                     if ((target === end || target === beginning) && pos.x !== mouse[0]) {
                       break;
                     }
@@ -247,9 +258,7 @@ function scatterChart() {
           if (localxMin < xmin) {
             xmin = localxMin;
           }//it will never be smaller than zero.
-
         }
-
         return [xmin, xmax];
       }
 
@@ -274,11 +283,9 @@ function scatterChart() {
           if (localMin < min) {
             min = localMin;
           }//it will never be smaller than zero unless it finds a negative value.
-
         }
         return [min, max];
       }
-
     });
   }
 

From 0a550c4ba1709cfb1f41c9d5154035367ec528fc Mon Sep 17 00:00:00 2001
From: mroberge <mroberge.whois@gmail.com>
Date: Tue, 4 Apr 2017 15:20:18 -0400
Subject: [PATCH 4/5] remove extra comments and console.log statements.

---
 index.html                |  6 -----
 src/graph-flowduration.js |  8 ++----
 src/graph-scatterChart.js |  6 ++---
 src/index-drawMap.js      | 35 ++++++--------------------
 src/initialize.js         | 32 +++++++-----------------
 src/local-storage.js      |  7 ++----
 src/requestData.js        | 52 ++++++++++++---------------------------
 src/viewModel.js          |  4 +--
 8 files changed, 42 insertions(+), 108 deletions(-)

diff --git a/index.html b/index.html
index 2a39bb8..77f9021 100644
--- a/index.html
+++ b/index.html
@@ -156,23 +156,17 @@
         font: 10px sans-serif;
       }
 
-      /*TODO: .axisTitle was there a typo? how are the axes titled?*/
       .axisTitle {
         font: 14px serif;
       }
-      /*TODO: .Title was there a typo? how are the axes titled?*/
       .Title {
         font: 20px serif;
       }
-      /*TODO: .subTitle was there a typo? how are the axes titled?*/
       .subTitle {
         font: 12px serif;
       }
 
       path {
-        /*  I need a way to set a default that can be overridden by D3 .attr("stroke", color)
-        stroke: black;
-        */
         fill: none;
         stroke-width: 2;
       }
diff --git a/src/graph-flowduration.js b/src/graph-flowduration.js
index f0338bc..8035099 100644
--- a/src/graph-flowduration.js
+++ b/src/graph-flowduration.js
@@ -2,7 +2,7 @@
  * Created by Marty on 3/12/2017.
  */
 function flowduration(id) {
-    console.log("flowduration");
+    //console.log("flowduration");
     var data = chooseData(id);
     //If there is no data for a site, keep the previous graph alive & do nothing.
     if(!data) return;
@@ -17,7 +17,6 @@ function flowduration(id) {
     data.sort(function(a, b) {
         return a[1] < b[1] ? 1 : a[1] > b[1] ? -1 : 0;
     });
-    //console.log(data);
 
     var margin = {
         top : 10,
@@ -37,8 +36,6 @@ function flowduration(id) {
     var yAxis = d3.svg.axis().scale(yScale).orient("left");
 
     var rank = 0;
-    //console.log(sorted.length)
-    //var testarray = [];
 
     var area = d3.svg.line().interpolate("step-before").x(function(d) {
         rank = rank + 1;
@@ -56,11 +53,10 @@ function flowduration(id) {
     yScale.domain([1, d3.max(data.map(function(d) {
         return d[1];
     }))]);
-    //If y.domain has a min value of 0, then you can't plot in a log scale.'
+    //If y.domain has a min value of 0, then you can't plot in a log scale.
 
     focus.append("path").datum(data).attr("clip-path", "url(#clip)").attr("d", area).attr("stroke", "blue");
     //append the path to the graph, but clip it with the rectangle we defined above.
-    //focus.append("path").datum(data).attr("d", area);//This still seems to get clipped even though it doesn't have the clipping path. ???
     focus.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis);
     focus.append("g").attr("class", "y axis").call(yAxis);
 
diff --git a/src/graph-scatterChart.js b/src/graph-scatterChart.js
index 1f5e745..1c666b9 100644
--- a/src/graph-scatterChart.js
+++ b/src/graph-scatterChart.js
@@ -93,7 +93,7 @@ function scatterChart() {
       var lineGroup = gEnter.append("g").attr("class", "lineGroup");
       var lineEnter = lineGroup.selectAll("path").data(dataArray).enter().append("path").attr("class", "line");
 
-      gEnter.append("g").attr("class", "x axis");//is this name okay? It has a space!
+      gEnter.append("g").attr("class", "x axis");//g given two classes: x and axis.
       gEnter.append("g").attr("class", "y axis");
       
       var titleGroup = gEnter.append("g").attr("class", "titleGroup");
@@ -111,10 +111,10 @@ function scatterChart() {
       g.selectAll(".line").attr("d", line).attr("stroke", function(d, i) {return color(i);});
 
       // Update the x-axis.
-      g.select(".x.axis").attr("transform", "translate(0," + yScale.range()[0] + ")").call(xAxis).on("click", myClickFunction);
+      g.select(".x.axis").attr("transform", "translate(0," + yScale.range()[0] + ")").call(xAxis);
 
       // Update the y-axis.
-      g.select(".y.axis").attr("transform", "translate(0," + xScale.range()[0] + ")").call(yAxis).on("click", myRClickFunction);
+      g.select(".y.axis").attr("transform", "translate(0," + xScale.range()[0] + ")").call(yAxis);
 
       // Update the title.
       g.select(".titleGroup").attr("transform", "translate(10,0)");
diff --git a/src/index-drawMap.js b/src/index-drawMap.js
index ff6e1a7..f0b0031 100644
--- a/src/index-drawMap.js
+++ b/src/index-drawMap.js
@@ -3,14 +3,12 @@ var fusionLayerInfoWindow;
 var center = new google.maps.LatLng(39.395, -76.609);
 
 function drawMap() {
-  //document.getElementById('map_div').style.display = "none";
   var mapOptions = {
     zoom : 8,
     center : new google.maps.LatLng(39.395, -76.609),
     mapTypeId : google.maps.MapTypeId.TERRAIN
   };
 
-  //console.log(document.getElementById('map_div'));
   map = new google.maps.Map(document.getElementById('map_div'), mapOptions);
 
   fusionLayerInfoWindow = new google.maps.InfoWindow();
@@ -20,7 +18,7 @@ function drawMap() {
   var fusionLayer = new google.maps.FusionTablesLayer({
     query : {
       select : 'location',
-      //real.kmz, has more sites than Gages II, but less info.
+      //real.kmz, has more sites than Gages II, but less info for each.
       //from : '1Rt_U4LqeNPi6Tk1-kq8ta-6OP748nJJJTqdwlC0Q'
 
       //from Gages II merge, too large, takes too long to load
@@ -28,6 +26,7 @@ function drawMap() {
 
       //from Gages II merge- small
       from : '103gQIyU069THrk7KGZYtbC8_My1rW4JwaHhX1ehe'
+      //Add queries like this:
       //where : 'DRAIN_SQKM < 20'
     },
     suppressInfoWindows: true
@@ -35,6 +34,9 @@ function drawMap() {
   fusionLayer.setMap(map);
 
   google.maps.event.addListener(fusionLayer, 'click', function(event) {
+    //TODO: Google sometimes returns an error; I can't replicate this anymore. ???
+    //console.dir(event);
+
     //Parse real.kmz
     //var re = /[0-9]+/;
     //var sId = "dv" + re.exec(event.row.site_no.value)[0];
@@ -54,7 +56,6 @@ function drawMap() {
     //Update our viewModel with the current site information.
     viewModel.siteId(sId);
     viewModel.siteName(siteName);
-    //viewModel.siteDict.push(siteDict);
 
     //update our InfoWindow, then open it.
     fusionLayerInfoWindow.setOptions(
@@ -82,24 +83,6 @@ function drawMap() {
     map : map
   });
 
-  google.maps.event.addListener(fusionLayer, 'click', function(event) {
-    console.log(event);
-    var re = /^[0-9]+/;
-    var sId = re.exec(event.featureData.name)[0];
-    viewModel.siteId(sId);
-    viewModel.siteName(event.featureData.name);
-    //This siteIdArray.push won't capture the first data requested.
-    viewModel.siteIdArray.push(+sId);
-    console.log(viewModel.siteId());
-    console.log(viewModel.siteIdArray());
-    //viewModel.siteName.push(kmlEvent.featureData.name);
-
-    //console.log(sId);
-    //console.log(viewModel.siteId());
-    //console.log(viewModel.siteName());
-
-    getUSGS(sId);
-  });
 */
 
   var tileNEX = new google.maps.ImageMapType({
@@ -122,12 +105,10 @@ function drawMap() {
     isPng : true
   });
 
-  map.overlayMapTypes.push(null);
   //create empty overlay entry
-  //map.overlayMapTypes.setAt("0",goes);
+  map.overlayMapTypes.push(null);
+  //Add the GOES cloud imagery layer
+  //map.overlayMapTypes.setAt("0", goes);
   map.overlayMapTypes.setAt("1", tileNEX);
-  google.maps.event.addListener(map, 'bounds_changed', function() {
-    //console.log(map.getBounds());
-  });
 }
 
diff --git a/src/initialize.js b/src/initialize.js
index 8ec596c..dad04d5 100644
--- a/src/initialize.js
+++ b/src/initialize.js
@@ -1,33 +1,22 @@
-/**
- * Created by Marty on 3/12/2017.
- */
-
 function initialize() {
 
     ko.applyBindings(viewModel);
 
     var data = [];
 
-    
-    
-
     viewModel.time.start(new Date(2014,1,1));
     viewModel.time.end(new Date(2015,1,1));
     viewModel.time.recent("90");
     
     viewModel.dataArray.subscribe(function(newValue) {
-        //alert("dataArray was just updated. " + newValue[0]);
-        console.log("plotGraph() called from index.html");
+        //console.log("plotGraph() called with new value added to dataArray.");
         viewModel.plotGraph();
     });
 
-//getUSGS(viewModel.siteDict()[0].id);
-    console.log("Initial value of requestData parameters: ");
-    console.log(viewModel.siteId());
-    console.log(viewModel.siteName());
-    console.log(viewModel.siteDict().toString());
-
-    console.log("setting viewModel values.");
+    //console.log("Initial value of requestData parameters: ");
+    //console.log(viewModel.siteId());
+    //console.log(viewModel.siteName());
+    //console.log("setting viewModel values.");
     viewModel.siteId("dv01580000");
     viewModel.siteName("Deer Creek at Rocks, MD");
     var initialSiteDict = {
@@ -36,16 +25,13 @@ function initialize() {
         area : 94.4,
         impervious : 1.26
     };
-//viewModel.siteDict().push(initialSiteDict); //This doesn't get done in drawMap, don't do it here.
 
-    console.log("Initial call of requestData with: ");
-    console.log(viewModel.siteId());
-    console.log(viewModel.siteName());
-    console.log(viewModel.siteDict().toString());
+    //console.log("Initial call of requestData with: ");
+    //console.log(viewModel.siteId());
+    //console.log(viewModel.siteName());
+    //console.log(viewModel.siteDict().toString());
     requestData(viewModel.siteId(), viewModel.siteName(), initialSiteDict);
 
-//getTuNexrad(viewModel.siteDict()[0].id);
-//$(window).resize();
     google.maps.event.addDomListener(window, 'load', drawMap);
     google.maps.event.addDomListener(window, 'load', redraw);
     $(window).resize(redraw);
diff --git a/src/local-storage.js b/src/local-storage.js
index 2566780..721a297 100644
--- a/src/local-storage.js
+++ b/src/local-storage.js
@@ -17,7 +17,6 @@ function storageAvailable(storageType) {
 function checkStorage(site){
     if (storageAvailable('localStorage')) {
         // localStorage is available
-        console.log("localStorage is available. site: " + site);
         try {
             var storage = window['localStorage'];
             var data = JSON.parse(storage.getItem(site));
@@ -26,14 +25,12 @@ function checkStorage(site){
             //In this case, I may want to have a refresh button near the graph to ask for more data.
             //
             if (Array.isArray(data)) {
-                console.log("Retrieved data from site " + site + ". Length is:" + data.length);
+                //console.log("Retrieved data from site " + site + ". Length is:" + data.length);
                 //convert string to Date
                 data.forEach(function(d, index, array){
                     d[0] = new Date(d[0]);
                 });
                 return data;
-                //console.log(data);
-                //return false;
             } else {
                 console.log("Problem with retrieved data for site " + site);
                 console.log(data);
@@ -56,7 +53,7 @@ function checkStorage(site){
 function saveData(key, data) {
     if (storageAvailable('localStorage')) {
         // localStorage is available
-        console.log("attempting to save");
+        //console.log("attempting to save");
         try {
             var storage = window['localStorage'];
             storage.setItem(key, JSON.stringify(data));
diff --git a/src/requestData.js b/src/requestData.js
index 628eb65..00a6dc9 100644
--- a/src/requestData.js
+++ b/src/requestData.js
@@ -1,51 +1,43 @@
-/**
- * Created by Marty on 3/11/2017.
- */
-
 function requestData(id, name, info) {
     //Check if this site is already in our siteIdArray.
     // This will not match strings and integers. Be careful that both are integers or strings...
     var siteIndex = viewModel.siteIdArray.indexOf(id);
-    console.log("The siteIndex is: " + siteIndex);
+    //console.log("The siteIndex is: " + siteIndex);
     if (siteIndex === -1) {
         //If the id is not in the siteIdArray, this will return -1.
         //Now we must add the site to the siteIdArray and request data.
 
         //Update the viewModel with the new site id and site info.
-        console.log("siteIndex is -1, so pushing id and site info to arrays. Before val:");
-        console.log(viewModel.siteIdArray().toString());
+        //console.log("siteIndex is -1, so pushing id and site info to arrays. Before val:");
+        //console.log(viewModel.siteIdArray().toString());
         viewModel.siteIdArray.push(id);
-        console.log(viewModel.siteIdArray().toString());
+        //console.log(viewModel.siteIdArray().toString());
 
-        console.log(viewModel.siteDict().toString());
+        //console.log(viewModel.siteDict().toString());
         viewModel.siteDict.push(info);
-        console.log(viewModel.siteDict().toString());
+        //console.log(viewModel.siteDict().toString());
 
         //Now collect the Stream Gage data and put in the dataArray
         //First check storage. We might have collected this data earlier, but not in this session.
-        console.log("Checking for gage data in localStorage. Result of stored:");
+        //console.log("Checking for gage data in localStorage. Result of stored:");
         var stored = checkStorage(id);
-        console.log(stored);
+        //console.log(stored);
         if (stored) {
-            console.log("Old data for site " + id + " retrieved from localStorage; length: " + stored.length);
+            //console.log("Old data for site " + id + " retrieved from localStorage; length: " + stored.length);
             viewModel.dataArray.push(stored);
-
             //console.dir(viewModel.siteIdArray());
         } else {
             //The site is not in our siteIdArray and gage data is not in localStorage.
             //This is the first time we've ever selected this site!
-            console.log("No data in storage. Calling getUSGS(" + id + ");");
+            //console.log("No data in storage. Calling getUSGS(" + id + ");");
             getUSGS(id);
 
         }
     } else {
-        console.log("This site is already in the siteIdArray, so it is likely that we already have the data in the dataArray.");
+        //console.log("This site is already in the siteIdArray, so it is likely that we already have the data in the dataArray.");
         //If we matched the site to our siteIdArray, then we should already have gage data. Plot.
         viewModel.plotGraph();
     }
-    //We've got our data, now it is time to plot the graph.
-    //console.log("plotGraph");
-    //viewModel.plotGraph();
 }
 
 function dateStr(d) {
@@ -60,10 +52,7 @@ function dateStr(d) {
         month : month,
         date : date
     };
-    //console.log(now);
-    var dstr = "" + now.year + "-" + now.month + "-" + now.date;
-    //console.log(dstr);
-    return dstr;
+    return "" + now.year + "-" + now.month + "-" + now.date;
 }
 
 function processN(inputArray) {
@@ -73,7 +62,6 @@ function processN(inputArray) {
         myArray[index].date = new Date(d.dateTime);
         myArray[index].value = +d.precipitation;
     });
-    //console.log(myArray);
     return myArray;
 }
 
@@ -82,13 +70,8 @@ function getTuNexrad(id) {
     //if new data is requested, get rid of old data, set one element to null.
     viewModel.tuNexrad({status: "requesting data...", data: [{date: null, value: null}]});
     console.log("requesting data from TU NEXRAD service");
-    //var now = new Date(); //system stopped collecting data 2015-03-01
-    //var end = new Date(now - (1 * 24 * 60 * 60 * 1000));
-    //var start = new Date(end - (90 * 24 * 60 * 60 * 1000));
     var endstr = "/enddate=" + dateStr(time.end);
     var startstr = "/startdate=" + dateStr(time.start);
-    //var endstr = "/enddate=" + dateStr(end);
-    //var startstr = "/startdate=" + dateStr(start);
     var urlDates = "http://10.55.15.196:5000/nexradTS/id=" + id + startstr + endstr;
     var urlRecent = "http://10.55.15.196:5000/nexradTSrecent/id=" + id + "/recent=" + time.recent;
 
@@ -127,7 +110,7 @@ function getUSGS(id) {
     // strip the id of the leading characters before requesting from USGS.
     var re = /[0-9]+/;
     var usgsId = re.exec(id)[0];
-    console.log("id: " + id + ", usgsId: " + usgsId);
+    //console.log("id: " + id + ", usgsId: " + usgsId);
     var localQuery = "resources/USGSshort.txt";
     var recentQuery = "https://nwis.waterservices.usgs.gov/nwis/iv/?format=json&sites=" + usgsId + "&period=P" + viewModel.time.recent() + "D&parameterCd=00060";
     var dateQuery = "https://nwis.waterservices.usgs.gov/nwis/iv/?format=json&sites=" + usgsId + "&startDT=" + dateStr(viewModel.time.start()) + "&endDT=" + dateStr(viewModel.time.end()) + "&parameterCd=00060";
@@ -140,10 +123,7 @@ function getUSGS(id) {
     if (id == "local") {
         url = localQuery;
     } else {
-        // The ideal query for now (2017-03-07) is to request a small amount of the most recent daily data: recentDaily
-        // recentDaily will minimize the impact the program has on the USGS servers.
         url = recentDaily;
-        console.log("Requesting data from: " + url);
     }
     var result = $.ajax({
         url: url,
@@ -154,7 +134,6 @@ function getUSGS(id) {
             console.dir(ErrObj);//The header.
             //console.log(ErrStr);//This is ErrObj.statusText; it is only 'error'
             //Display a message, don't plot the graph?
-            //TODO: add an error message to the pop-up box;
             $('.googft-info-window').append( "<p class='bg-warning'>An error occurred when requesting data for this site.</p>" );
             //We've got nothing, so save [] to localStorage. This happens when complete.
             //TODO: maybe create a status attribute for USGS data? This would let us try again.
@@ -205,7 +184,7 @@ function getUSGS(id) {
 function chooseData(id) {
     //Plot the data from the viewModel.dataArray() that matches the id.
     var siteIndex = viewModel.siteIdArray().indexOf(id);
-    console.log("inside chooseData(" + id + "); siteIndex: " + siteIndex);
+    //console.log("inside chooseData(" + id + "); siteIndex: " + siteIndex);
     if (siteIndex === -1) {
         //The id should be in the siteIdArray already; this should have been tested for already. If it isn't, it returns -1.
         console.log("chooseData() was called with an id that is not in the siteIdArray.");
@@ -220,6 +199,7 @@ function chooseData(id) {
     if (data.length < 1) {
         //No data!
         console.log("No data for site" + id);
+        //TODO: The code gets too spaghetti-like here. (Why would we update something in the map view from the flow duration chart???) Instead of improving this code, wait for improved viewModel with a stored status.
         $('.googft-info-window').append( "<p class='bg-warning'>There is no stream data for this site.</p>" );
         //no data, so we can't plot, so return?
         return false;
@@ -238,6 +218,6 @@ function redraw() {
     if (viewModel.dataArray().length) {
         viewModel.plotGraph();
     }
-    console.log("resize");
+    //console.log("resize");
     google.maps.event.trigger(map, 'resize');
 }
diff --git a/src/viewModel.js b/src/viewModel.js
index c8465ae..4463da4 100644
--- a/src/viewModel.js
+++ b/src/viewModel.js
@@ -10,7 +10,7 @@ var viewModel = {
       recent : ko.observable()
     },
     toggleLegend : function() {
-        console.log("toggleLegend click");
+        //console.log("toggleLegend click");
         this.showLegend() ? this.showLegend(false) : this.showLegend(true);
     },
 
@@ -51,7 +51,7 @@ var viewModel = {
         fusionLayerInfoWindow.close();
     },
     plotGraph : function() {
-        console.log(this.graph());
+        //console.log(this.graph());
         if (this.graph() === "flow") {
             flowduration(this.siteId());
         } else if (this.graph() === "scatter") {

From b4b8b3e69e2e4c7e2b4a6689e37867e2ff076c84 Mon Sep 17 00:00:00 2001
From: mroberge <mroberge.whois@gmail.com>
Date: Tue, 4 Apr 2017 15:29:23 -0400
Subject: [PATCH 5/5] corrected typo

---
 src/requestData.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/requestData.js b/src/requestData.js
index 00a6dc9..830cc3e 100644
--- a/src/requestData.js
+++ b/src/requestData.js
@@ -57,7 +57,7 @@ function dateStr(d) {
 
 function processN(inputArray) {
     var myArray = [];
-    InputArray.forEach(function (d, index, array) {
+    inputArray.forEach(function (d, index, array) {
         myArray[index] = {};
         myArray[index].date = new Date(d.dateTime);
         myArray[index].value = +d.precipitation;