eli-s-goldberg · November 10, 2015 17:54
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 .axis path,
 .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
 }

 body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

 .box {
  font: 10px sans-serif;
 }

 .box line,
 .box rect,
 .box circle {
  fill: #fff;
  stroke: #000;
  stroke-width: 1.5px;
 }

 .box .center {
  stroke-dasharray: 3,3;
 }

 .box .outlier {
  fill: none;
  stroke: #ccc;
 }

 .scatterPlot circle{
  opacity: 0.7;
 }
 </style>
 <body>
 <script src="http://d3js.org/d3.v3.min.js"></script>
 <script src="box.js"></script>
 <script type="text/javascript">

 var margin = {top: 10, right: 50, bottom: 25, left: 50},
    width = (13-1)*(75+20),// - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

 var r = 0;

 var min = Infinity,
    max = -Infinity;

 var y = d3.scale.linear()
    .range([height, 0]);
 var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

 var color = d3.scale.category10();

 var sums = [];

 d3.json("holdout.json",function(error,json){

  var data = [];
  var rows = [];

  for (var i = 0; i < json.conditions.length; i++) {
    var c = json.conditions[i];
    for (var j = 0; j < json.sets[c].length; j++) {
      var e = i,
          s = json.sets[c][j],
          d = data[e];
      rows.push({'set':i, 'val':s});
      if (!d){
        d = data[e] = [s];
        sums[e] = {'sum':s,'n':1};
      }
      else{
        sums[e].sum+=s;
        sums[e].n++;
        d.push(s);
      };
      if (s > max) max = s;
      if (s < min) min = s;
    };
  };

  // console.debug(data);
  var boxPlotWidth = (20 > (width / json.conditions.length)) ? (width / json.conditions.length) : 20;
  var chart = d3.box()
      .whiskers(iqr(1.5))
      .width(boxPlotWidth)
      .height(height);

  y.domain([0,max]).nice();
  chart.domain([0, max]);
  chart.domain([-.4, 1]);

  // distance between graphs
  var graphMargin = 75;

  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 + ")");

  svg.append('g')
      .selectAll('box')
      .data(data)
      .enter().append('g')
        .attr("class", "box")
        .attr("transform", function(d,i){return "translate(" + (-5+(boxPlotWidth*i)+graphMargin*i) + "," + 0 + ")"})
        .call(chart);

  // use these variables (x and xAxis) to place the tick lines
  // inbetween the chart data
 var x = d3.scale.linear()
            .domain([1,json.conditions.length])
            .range([0,width]);

  var xAxis = d3.svg.axis().scale(x).orient("bottom")
            .ticks(json.conditions.length)
            .tickPadding(5);
  // add tick lines to graph
  svg.append("g")
        .attr("class", "x axis")
        .attr("transform","translate (0,"+height+")")
        .call(xAxis);


 });


 // Returns a function to compute the interquartile range.
 function iqr(k) {
  return function(d, i) {
    var q1 = d.quartiles[0],
        q3 = d.quartiles[2],
        iqr = (q3 - q1) * k,
        i = -1,
        j = d.length;
    while (d[++i] < q1 - iqr);
    while (d[--j] > q3 + iqr);
    return [i, j];
  };
 }

 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

	.box {
	font: 10px sans-serif;
	}

	.box line,
	.box rect,
	.box circle {
	fill: #fff;
	stroke: #000;
	stroke-width: 1.5px;
	}

	.box .center {
	stroke-dasharray: 3,3;
	}

	.box .outlier {
	fill: none;
	stroke: #ccc;
	}

	.scatterPlot circle{
	opacity: 0.7;
	}
	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="box.js"></script>
	<script type="text/javascript">

	var margin = {top: 10, right: 50, bottom: 25, left: 50},
	width = (13-1)*(75+20),// - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var r = 0;

	var min = Infinity,
	max = -Infinity;

	var y = d3.scale.linear()
	.range([height, 0]);
	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");

	var color = d3.scale.category10();

	var sums = [];

	d3.json("holdout.json",function(error,json){

	var data = [];
	var rows = [];

	for (var i = 0; i < json.conditions.length; i++) {
	var c = json.conditions[i];
	for (var j = 0; j < json.sets[c].length; j++) {
	var e = i,
	s = json.sets[c][j],
	d = data[e];
	rows.push({'set':i, 'val':s});
	if (!d){
	d = data[e] = [s];
	sums[e] = {'sum':s,'n':1};
	}
	else{
	sums[e].sum+=s;
	sums[e].n++;
	d.push(s);
	};
	if (s > max) max = s;
	if (s < min) min = s;
	};
	};

	// console.debug(data);
	var boxPlotWidth = (20 > (width / json.conditions.length)) ? (width / json.conditions.length) : 20;
	var chart = d3.box()
	.whiskers(iqr(1.5))
	.width(boxPlotWidth)
	.height(height);

	y.domain([0,max]).nice();
	chart.domain([0, max]);
	chart.domain([-.4, 1]);

	// distance between graphs
	var graphMargin = 75;

	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 + ")");

	svg.append('g')
	.selectAll('box')
	.data(data)
	.enter().append('g')
	.attr("class", "box")
	.attr("transform", function(d,i){return "translate(" + (-5+(boxPlotWidthi)+graphMargini) + "," + 0 + ")"})
	.call(chart);

	// use these variables (x and xAxis) to place the tick lines
	// inbetween the chart data
	var x = d3.scale.linear()
	.domain([1,json.conditions.length])
	.range([0,width]);

	var xAxis = d3.svg.axis().scale(x).orient("bottom")
	.ticks(json.conditions.length)
	.tickPadding(5);
	// add tick lines to graph
	svg.append("g")
	.attr("class", "x axis")
	.attr("transform","translate (0,"+height+")")
	.call(xAxis);


	});


	// Returns a function to compute the interquartile range.
	function iqr(k) {
	return function(d, i) {
	var q1 = d.quartiles[0],
	q3 = d.quartiles[2],
	iqr = (q3 - q1) * k,
	i = -1,
	j = d.length;
	while (d[++i] < q1 - iqr);
	while (d[--j] > q3 + iqr);
	return [i, j];
	};
	}

	</script>