stats tests

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  
  //https://simplestatistics.org/docs/
  <script src="https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.1/simple_statistics.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    
    body {
      font: 11px sans-serif;
    }

.axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

.dot {
      stroke: #000;
    }

.tooltip {
      position: absolute;
      width: 200px;
      height: 28px;
      pointer-events: none;
    }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    var xValue = function(d) { return d.X;}, // data -> value
    xScale = d3.scale.linear().range([0, width]), // value -> display
    xMap = function(d) { return xScale(xValue(d));}, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");

// change string (from CSV) into number format
        data.forEach(function(d) {
          	d.X = +d.X;
          	d.Y = +d.Y;
          //    console.log(d);
        });
    
    xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
  	yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
    
    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", -6)
        .style("text-anchor", "end")
        .text("X Label");

svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("class", "label")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Y Label");

svg.selectAll(".dot")
        .data(data)
      .enter().append("circle")
        .attr("class", "dot")
        .attr("r", 3.5)
        .attr("cx", xMap)
        .attr("cy", yMap)
        .style("fill", function(d) { return color(cValue(d));}) 
        .on("mouseover", function(d) {
            tooltip.transition()
                 .duration(200)
                 .style("opacity", .9);
            tooltip.html(d.ID + "<br/> (" + xValue(d) 
            + ", " + yValue(d) + ")")
                 .style("left", (d3.event.pageX + 5) + "px")
                 .style("top", (d3.event.pageY - 28) + "px");
        })
        .on("mouseout", function(d) {
            tooltip.transition()
                 .duration(500)
                 .style("opacity", 0);
        });
        
        //data values
        console.log("testing stats output");
        
        var dataX = data.map(function(d) { return +d.X; });
        var dataY = data.map(function(d) { return +d.Y; });
        var dataXY = data.map(function(d) { return [+d.X, +d.Y]; });
        console.log(dataY);
        console.log(dataXY);
        
        //mean
        var meanTest = ss.mean(dataY);
        console.log("mean: " + meanTest);
        
        //max
        var maxTest = ss.max(dataY);
        console.log("max: " + maxTest);
        
        //linear correlation
        var corTest = ss.sampleCorrelation(dataX, dataY);
        console.log("correlation: " + corTest);
        
        //r^2
        var regressionLine = ss.linearRegressionLine(ss.linearRegression(dataXY));
        var rSquaredTest = ss.rSquared(dataXY, regressionLine);
        console.log("r^2: " + rSquaredTest);
        
        //std dev
        var sdevTest = ss.sampleStandardDeviation(dataY);
        console.log("std dev: " + sdevTest);
        
        //linear regression
        var linmod = ss.linearRegression(dataXY);
        console.log(linmod);
        console.log("slope: " + linmod.m);
        console.log("intercept: " + linmod.b);
        //var trendCoords = [dataX[0],
        //                   dataX[0] * linmod.b[0] + linmod.b[1],
        //                   dataX.length,
        //                   dataX[dataX.length] * linmod.b[0] + linmod.b[1]]; 
        var linmodLine = ss.linearRegressionLine(linmod);
        console.log("lin mod: " + linmodLine);
        //console.log(dataXY[0][0]);
        //console.log(dataXY[dataXY.length-1][0]);
        var y1 = linmodLine(dataXY[0][0]-1);
        var y2 = linmodLine(dataXY[dataXY.length-1][0]+1);
        //console.log(linmodLine(1));
        var trendCoords = [dataX[0]-1,y1,dataX[dataX.length-1]+1,y2];
        
        var trendline = svg.selectAll(".trendline")
          .data(trendCoords);

trendline.enter()
          .append("line")
          .attr("class", "trendline")
          .attr("x1", xScale(trendCoords[0]))
          .attr("y1", yScale(trendCoords[1]))
          .attr("x2", xScale(trendCoords[2]))
          .attr("y2", yScale(trendCoords[3]))
          .attr("stroke", "grey")
          .attr("stroke-width", 1);
        
        //ckmeans (one dim only, # of clusters)
        var clusterTest = ss.ckmeans(dataY, 4);
        console.log(clusterTest);
        
        //error function
        var errorTest = ss.errorFunction(dataXY);
        console.log(errorTest);
        
        //svg.append("path")
        //  .datum(data)
        //  .attr("class", "line")
        //  .attr("d", line);        
      
    });
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/simple-statistics/1.0.1/simple_statistics.js