Merge pull request #95 from mroberge/code-clean-up

Code clean up
mroberge · Apr 4, 2017 · 0d0e1f4 · 0d0e1f4
2 parents f8cfa7d + b4b8b3e
commit 0d0e1f4
Show file tree

Hide file tree

Showing 14 changed files with 98 additions and 194 deletions.
diff --git 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>
diff --git 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/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/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
@@ -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/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
@@ -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/
    *
@@ -36,16 +51,13 @@ 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)
       .y(Y)
       .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 +74,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]);
@@ -79,9 +92,8 @@ 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", "x axis");//g given two classes: x and axis.
       gEnter.append("g").attr("class", "y axis");
 
       var titleGroup = gEnter.append("g").attr("class", "titleGroup");
@@ -99,12 +111,11 @@ 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);
 
-      //title block
       // Update the title.
       g.select(".titleGroup").attr("transform", "translate(10,0)");
       g.select(".subtitle").text(dataArray.length + " sites");
@@ -184,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;
                     }
@@ -220,49 +229,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;
           }
@@ -272,35 +258,22 @@ function scatterChart() {
           if (localxMin < xmin) {
             xmin = localxMin;
           }//it will never be smaller than zero.
-
         }
-
         return [xmin, xmax];
       }
 
       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,21 +282,19 @@ 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];
       }
-
     });
   }
 
-  // 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 +321,7 @@ function scatterChart() {
     return chart;
   };
 
-  chart.x = function(a) {//Do we need this?
+  chart.x = function(a) {
     if (!arguments.length)
       return xValue;
     xValue = a;