deldersveld/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

  //http://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");

		var yValue = function(d) { return d.Y;}, // data -> value
    yScale = d3.scale.linear().range([height, 0]), // value -> display
    yMap = function(d) { return yScale(yValue(d));}, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left");

    var cValue = function(d) { return d.ID;},
    	color = d3.scale.category10();

    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    var tooltip = d3.select("body").append("div")
      .attr("class", "tooltip")
      .style("opacity", 0);
      d3.csv("https://raw.githubusercontent.com/deldersveld/datasets/master/scattertestdata.csv", function(error, data) {

        // 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>
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

	//http://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");

	var yValue = function(d) { return d.Y;}, // data -> value
	yScale = d3.scale.linear().range([height, 0]), // value -> display
	yMap = function(d) { return yScale(yValue(d));}, // data -> display
	yAxis = d3.svg.axis().scale(yScale).orient("left");

	var cValue = function(d) { return d.ID;},
	color = d3.scale.category10();

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var tooltip = d3.select("body").append("div")
	.attr("class", "tooltip")
	.style("opacity", 0);
	d3.csv("https://raw.githubusercontent.com/deldersveld/datasets/master/scattertestdata.csv", function(error, data) {

	// 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>