Skip to content

Instantly share code, notes, and snippets.

@eli-s-goldberg
Created November 10, 2015 17:54
Show Gist options
  • Save eli-s-goldberg/1b59a0a07305156591e8 to your computer and use it in GitHub Desktop.
Save eli-s-goldberg/1b59a0a07305156591e8 to your computer and use it in GitHub Desktop.
boxPlotHoldout
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment