if(!cf){
var cf = {data:{}};
}
if(!cf.loadStatus){
cf.loadStatus = {};
}
/**
* number of schools
* @type {Number}
*/
cf.nSchools = null;
/**
* college factual color scheme
* @type {Array}
*/
cf.colors = ["#00999A","#F05C49","#1C75BB","#62CD21","#F99400","#2B3990","#999999"];
cf.lightColors = ["#83CCCB","#F5ADA5","#8FBBDB","#B1E594","#FBC885","#959DC5","#CCCCCC"];
/**
* dynamically obtain data
* @param varName the variable to get
* @param callback a callback taking one parameter (the variable)
*/
cf.withVariable = function(varName,callback){
//case: script has been loaded and data is ready
if(cf.data[varName]){
if(callback != null) {
cf.nSchools = cf.data[varName].data.length;
callback(cf.data[varName]);
}
return;
}
//case: script has not started loading
var scriptPath = "data/"+varName+"_v1.0.js";
if(!cf.loadStatus[varName]){
var scriptNode = document.createElement('SCRIPT');
scriptNode.type = 'text/javascript';
scriptNode.src = scriptPath;
var headNode = document.getElementsByTagName('HEAD');
if (headNode[0] != null){
headNode[0].appendChild(scriptNode);
}
cf.loadStatus[varName] = "loading";
if (callback != null)
{
scriptNode.onreadystagechange = function(){
cf.loadStatus[varName] = "loaded";
cf.nSchools = cf.data[varName].data.length;
callback(cf.data[varName]);
};
scriptNode.onload = function(){
cf.loadStatus[varName] = "loaded";
cf.nSchools = cf.data[varName].data.length;
callback(cf.data[varName]);
};
}
return;
}
//case: script has started loading, but has not completed
var scripts = document.getElementsByTagName('SCRIPT')
var index = -1;
for(var i =0;i<scripts.length;i++){ if(scripts[i].src.search(scriptpath)> -1){
index = i;
}
}
var scriptNode = scripts[index];
if(callback != null){
if(scriptNode.onreadystagechange){
var func = scriptNode.onreadystagechange;
scriptNode.onreadystagechange = function(){func(); cf.nSchools = cf.data[varName].data.length; callback(cf.data[varName]);};
}else{
scriptNode.onreadystagechange = function(){cf.nSchools = cf.data[varName].data.length; callback(cf.data[varName]);};
}
if(scriptNode.onload){
var func = scriptNode.onload;
scriptNode.onload = function(){func(); cf.nSchools = cf.data[varName].data.length; callback(cf.data[varName]);};
}else{
scriptNode.onload = function(){cf.nSchools = cf.data[varName].data.length; callback(cf.data[varName]);};
}
}
}
/**
* bar chart
*/
cf.barChart = function(){
var format = d3.format(".0%");
var width = 400;
var height = 150;
var buffer = 10;
var className = "barChart";
function chart(selection){
selection.each(function(data) {
// Select the svg element, if it exists.
var chart = d3.select(this).selectAll("svg");
// Otherwise, create the skeletal chart.
if(!chart[0].length){
d3.select(this).append("svg");
chart = d3.select(this).selectAll("svg");
}
// Update the outer dimensions.
chart.attr("class", className)
.attr("width", width)
.attr("height",height);
tmp = chart
var names = data.map(function(x){return x.name;});
var y = d3.scale.ordinal()
.domain(names)
.rangeBands([0, height]);
chart.selectAll("yaxis")
.data(data)
.enter().append("text")
.attr("class", "yaxis")
.attr("x", function(d){return -3;})
.attr("y", function(d,i) { return y(d.name) + y.rangeBand(d.name) / 2; })
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(function(d){return d.name;});
var axisNodes = chart.selectAll(".yaxis")[0];
var axisTextWidth = Math.ceil(
d3.max(axisNodes.map(function(x){return x.getComputedTextLength();})))+4;
var x = d3.scale.linear()
.domain([0, d3.max(data.map(function(x){return x.data;}))])
.range([0, width-axisTextWidth-buffer]);
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("y", function(d,i){ return y(d.name);})
.attr("x", axisTextWidth+buffer)
.attr("width", function(d){return x(d.data);})
.attr("height", y.rangeBand());
//.attr("onmouseover",function(d){ return "tooltip.show(\""+d.data+"\");";})
//.attr("onmouseout","tooltip.hide();");
chart.selectAll("bar")
.data(data)
.enter().append("text")
.attr("class", "bar")
.attr("x", function(d){return axisTextWidth+buffer+x(d.data)-3;})
.attr("y", function(d,i) { return y(d.name) + y.rangeBand(d.name) / 2; })
.attr("dx", -3) // padding-right
.attr("dy", ".35em") // vertical-align: middle
.attr("text-anchor", "end") // text-align: right
.text(function(d){return format(d.data);});
var barText = chart.selectAll(".bar")[0];
for(var i=0;i<bartext.length;i++){ var l=barText[i].getComputedTextLength(); var node=d3.select(barText[i]) var tx='parseFloat(node.attr("x"));' //console.debug(axistextwidth+buffer+" "); if(tx-l-3 < axistextwidth+buffer){ node.attr("x",tx+l+8).style("fill","#999999") } } chart.selectall(".yaxis") .data(data) .attr("class", "yaxis") .attr("x", function(d){return axistextwidth;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .text(function(d){return d.name;}); }); } chart.width=function(_) { if (!arguments.length) return width; width=_; return chart; }; chart.height=function(_) { if (!arguments.length) return height; height=_; return chart; }; chart.format=function(_) { if (!arguments.length) return format; format=_; return chart; }; chart.classname=function(_) { if (!arguments.length) return classname; classname=_; return chart; }; return chart; } cf.barchartexample=function(){ var data='[{name:"a",data:.9},' {name:"b",data:.6}, {name:"blaa blaa blaa",data:.3}, {name:"c",data:.1}, {name:"d",data:.1}, {name:"enter",data:.05}, {name:"other",data:.02}]; var format='d3.format(".0%");' d3.select("body").append("div").attr("class","barchart1"); d3.select("body").append("div").attr("class","barchart2"); var func=cf.barChart().height(100).width(300); d3.select(".barchart1").datum(data).call(func); //notice that bars rescale to fit labels //change format of numbers //data[2].name=r ; //func=barChart().height(200).format(d3.format()); //d3.select(".barchart2").datum(data).call(func); } cf.ratechart=function(){ var format='d3.format(".0%");' var width=400; var totalheight=150; var buffer=10; var topmarginundef=true; var topmargin=30; var height=totalHeight - topmargin; var titles={}; var classname=rateChart ; function chart(selection){ selection.each(function(data) { if(topmarginundef && !titles.title){ topmargin=topMargin - 15; titles.title ; } if(topmarginundef && !titles.values){ topmargin=topMargin - 15; titles.values='["",""];' } // select the svg element, if it exists. var chart='d3.select(this).selectAll("svg");' // otherwise, create the skeletal chart. if(!chart[0].length){ d3.select(this).append("svg"); chart='d3.select(this).selectAll("svg");' } // update the outer dimensions. chart.attr("class", "ratechart") .attr("width", width) .attr("height",totalheight); chart='chart.append("g")' .attr("transform", "translate(0,"+topmargin+")"); var names=data.map(function(x){return x.name;}); var y=d3.scale.ordinal() .domain(names) .rangebands([0, height]); chart.selectall("yaxis") .data(data) .enter().append("text") .attr("class", "yaxis") .attr("style", "visibility:hidden;") .attr("x", function(d){return -3;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .text(function(d){return d.name;}); var axisnodes='chart.selectAll(".yaxis")[0];' var axistextwidth=Math.ceil( d3.max(axisnodes.map(function(x){return x.getcomputedtextlength();})))+4; chart.selectall("yaxis").remove("yaxis"); var x=d3.scale.linear() .domain([0, 1]) .range([0, width-axistextwidth-buffer]); chart.selectall("rect") .data(data) .enter().append("rect") .attr("y", function(d,i){ return y(d.name);}) .attr("x", axistextwidth+buffer) .attr("width", function(d){return x(d.data);}) .attr("height", y.rangeband()); chart.selectall("rect2") .data(data) .enter().append("rect") .attr("class","rect2") .attr("y", function(d,i){ return y(d.name);}) .attr("x", function(d){return x(d.data)+axistextwidth+buffer;}) .attr("width", function(d){return x(1-d.data);}) .attr("height", y.rangeband()); chart.selectall("bar") .data(data) .enter().append("text") .attr("class", "bar") .attr("x", function(d){return axistextwidth+buffer;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", 3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "start") // text-align: right .attr("font-size", y.rangeband() *.6 + "px") .text(function(d){return format(d.data);}); chart.selectall("bar") .data(data) .enter().append("text") .attr("class", "bar") .attr("x", function(d){return axistextwidth+buffer+x(1)-3;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .attr("font-size", y.rangeband() *.6 + "px") .text(function(d){return format(1-d.data);}); chart.selectall("yaxis") .data(data) .enter().append("text") .attr("class", "yaxis") .attr("x", function(d){return axistextwidth;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .text(function(d){return d.name;}); chart.append("g").append("text") .attr("class", "valuelabel") .attr("x", axistextwidth+buffer + x(1)) .attr("y", -3) .attr("dx", 0) // padding-right .attr("text-anchor", "end") .text(titles.values[1]); chart.append("g").append("text") .attr("class", "valuelabel") .attr("x", axistextwidth+buffer ) .attr("y", -3) .attr("dx", 0) // padding-right .text(titles.values[0]); chart.append("g").append("text") .attr("class", "title") .attr("x", axistextwidth+buffer + x(1)/2 ) .attr("y", -topmargin) .attr("dy", ".71em") .attr("text-anchor", "middle") .text(titles.title); }); } chart.width=function(_) { if (!arguments.length) return width; width=_; return chart; }; chart.height=function(_) { if (!arguments.length) return height; totalheight=_; height=totalHeight-topMargin; return chart; }; chart.format=function(_) { if (!arguments.length) return format; format=_; return chart; }; chart.titles=function(_) { if (!arguments.length) return titles; titles=_; return chart; }; chart.classname=function(_) { if (!arguments.length) return classname; classname=_; return chart; }; return chart; } cf.ratechartexample=function(){ var data='[{name:"Applicants",data' :.5}, {name:"accepted",data:.26111111}]; var titles='{title:"Gender",values:["Men","Women"]}' d3.select("body").append("div").attr("class","newchart"); var func=cf.rateChart().height(70).titles(titles); d3.select(".newchart").datum(data).call(func); } cf.doughnutchart=function(){ var format='d3.format(".0%");' var width=300; var height=300; var thickness=50; var colorcenter=false; var colors=cf.colors; var classname=doughnutChart ; var labeloffset=5; function chart(selection){ selection.each(function(data) { // select the svg element, if it exists. var svg='d3.select(this).selectAll("svg");' // otherwise, create the skeletal chart. if(!svg[0].length){ d3.select(this).append("svg"); svg='d3.select(this).selectAll("svg");' } // update the outer dimensions. svg='svg.attr("class",' classname) .attr("xmlns","http://www.w3.org/2000/svg") .attr("width", width+"px") .attr("height", height+"px") .append("g") .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); var radius=Math.min(width, height) / 2, innerradius=radius - thickness - 20, outerradius=radius - 20, midradius=(innerRadius+outerRadius)/2 var chartid='(Math.random()+1).toString().replace(".","");' var names=data.map(function(x){return x.name;}); var color=d3.scale.ordinal() .domain(names) .range(colors); var arc=d3.svg.arc() .outerradius(outerradius) .innerradius(innerradius); var textarc=d3.svg.arc() .outerradius(midradius) .innerradius(midradius); var textarcoutside=d3.svg.arc() .outerradius(outerradius+labeloffset) .innerradius(outerradius+labeloffset); var pie=d3.layout.pie() .sort(null) .value(function(d) { return d.data; }); var piedat=pie(data); var g='svg.selectAll(".arc")' .data(piedat) .enter().append("g") .attr("class", "arc"); function over(d,i){ if(colorcenter) centercircle.transition().attr("fill",color(d.data.name)); selectedvaluelabel.text(d.data.name); var len=selectedValueLabel[0][0].getComputedTextLength(); selectedvalueback.transition() .attr("width",len+20) .attr("x",-len/2-10) percentlabel.transition().text(format(d.data.data)); g.selectall(".doughnuts").attr("stroke",function(d2,j){ if(d2.data.name="==" d.data.name) return "black";//"#e5e5e5"; return "none"; }) } function out(d,i){ var loc=d3.mouse(g.node()); var r=Math.sqrt(loc[0]*loc[0] + loc[1]*loc[1]); if(r<=outerRadius) return; centercircle.transition().attr("fill","white"); selectedvalueback.transition().attr("width",0); selectedvaluelabel.transition().text(""); percentlabel.transition().text(""); g.selectall(".doughnuts").attr("stroke","none") } g.append("path") .attr("d", arc) .attr("class","doughnuts") .attr("stroke-width",2) .attr("stroke-linecap","round") .attr("stroke-opacity",.3) .style("fill", function(d) { return color(d.data.name); }) .on("mouseover",over) .on("mouseout",out); g.append("path") .attr("d", function(d,i){ var angle=(180/Math.PI)*(d.startAngle+ d.endangle)/2; if(angle>90 && angle<270){
                    var result = "M"+textArc(d).split("L")[1];
return result.substr(0,result.length-1)
}
return textArc(d).split("L")[0];
} )
.attr("id",function(d,i){ return "path"+i+"_"+chartId;})
.style("fill", "none");
/*g.append("text").append("textPath")
.attr("class","textInside")
.attr("startOffset",function(d){
return "50%";
})
.attr("xlink:href",function(d,i){ return "#path"+i+"_"+chartId;})
.attr("spacing","exact")
.style("text-anchor", "middle")
.append("tspan")
.text(function(d) { return d.data.name; })
.on("mouseover",over)
.on("mouseout",out);
var textPathNodes = g.selectAll(".textInside");
var tspans = g.selectAll("tspan");*/
//var textPathWidth = [];
//for(var i=0;i<data.length;i++){ // console.debug(i); // textpathwidth[i]=cf.getIth(textPathNodes,i)[0][0].getComputedTextLength() //} //textpathwidth=textPathNodes.map(function(x){return x[0].getcomputedtextlength();}); //textpathnodes='g.selectAll("textPath");' var j=0; var breaks=[]; var tn='g.append("text")' .attr("x",0) .attr("y",0) .text("") .attr("class","textinside") for(var i="0;i<data.length;i++){" var t=pie(data)[i]; var oldd='d3.select("#path"+i+"_"+chartId)' .attr("d") var start=t.startAngle; var end=t.endAngle; var mid=(t.startAngle + t.endangle) / 2; var angle=(180/Math.PI)*(t.startAngle+ t.endangle)/2; t.startangle=mid+Math.PI; t.endangle=mid +math.pi + math.pi*1.9999; //textpathwidth=textPathNodes.map(function(x){return x[0].getcomputedtextlength();}); tn.text(data[i].name) var tw=tn[0][0].getComputedTextLength(); piedat[i].inside=true; //console.debug(tn.text());//data[i].name) //console.debug(midradius*(end- start)) //console.debug(tw) piedat[i].overlap=false; piedat[i].top=false; if(midradius*(end- start)<=tw){ piedat[i].inside=false; //d3.select(textpathnodes[i][0]).text(""); var result; if(angle>90 && angle<270){
                    result = "M"+textArcOutside(t).split("L")[1];
result = result.substr(0,result.length-1)
piedat[i].top = true;
//d3.select(tspans[i][0]).attr("dy",".71em");
}else{
result = textArcOutside(t).split("L")[0];
}
console.debug(piedat[i].name)
console.debug(result)
console.debug(d3.select("#path"+i+"_"+chartId)
.attr("d"))
d3.select("#path"+i+"_"+chartId)
.attr("d", result)
var lims = {s:mid - (tw/2)/outerRadius,
e:mid + (tw/2)/outerRadius,
name:data[i].name}
var overlap = false;
for(var k = 0 ;k<breaks.length;k++){ if(lims.e>2*Math.PI && breaks[k].s<2*Math.PI && (lims.e-2*Math.PI)>breaks[k].s)
overlap=true;
if(breaks[k].e>lims.s && breaks[k].e<lims.e) overlap=true; if(breaks[k].s>lims.s && breaks[k].s<lims.e) overlap=true; if(breaks[k].s<lims.s && breaks[k].e>lims.e)
overlap=true;
}
piedat[i].overlap = overlap;
piedat[i].mid = -mid - Math.PI;
if(overlap){
}else{
mid = -mid - Math.PI;
g.append("line").attr("class","tick")
.attr("y1",outerRadius*Math.cos(mid))
.attr("x1",outerRadius*Math.sin(mid))
.attr("y2",(outerRadius+3)*Math.cos(mid))
.attr("x2",(outerRadius+3)*Math.sin(mid))
breaks[j] = lims;
j++;
}
}
}
g.append("text").append("textPath")
.attr("class",function(d,i){
return d.inside ? "textInside" : "textOutside";
})
.attr("startOffset",function(d){
return "50%";
})
.attr("xlink:href",function(d,i){ return "#path"+i+"_"+chartId;})
.attr("spacing","exact")
.style("text-anchor", "middle")
.append("tspan")
.attr("dy",function(d){return d.top ? ".71em" : "0em";})
.text(function(d) {
return d.overlap ? "" : d.data.name; })
.on("mouseover",over)
.on("mouseout",out);
tn.text("");
var centerCircle = g.append("circle")
.attr("cx",0)
.attr("cy",0)
.attr("r",innerRadius)
.attr("fill","white")
var selectedValueBack = g.append("rect")
.attr("x",0)
.attr("y",-innerRadius/2-15)
.attr("width",0)
.attr("height",30)
.attr("fill","white")
.attr("stroke","#DCDCDC")
.attr("rx",10)
var selectedValueLabel = g.append("text")
.attr("class","valueLabel")
.attr("x",0)
.attr("y",-innerRadius/2)
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text("");
var percentLabel = g.append("text")
.attr("class","percentLabel")
.attr("x",0)
.attr("y",innerRadius/5)
.attr("dy", ".35em")
.style("text-anchor", "middle")
.style("font-size", (innerRadius-15)+"px")
.text("");
});
}
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.thickness = function(_) {
if (!arguments.length) return thickness;
thickness = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.format = function(_) {
if (!arguments.length) return format;
format = _;
return chart;
};
chart.colors = function(_) {
if (!arguments.length) return colors;
colors = _;
return chart;
};
chart.colorCenter = function(_) {
if (!arguments.length) return colorCenter;
colorCenter = _;
return chart;
};
chart.className = function(_) {
if (!arguments.length) return className;
className = _;
return chart;
};
return chart;
}
cf.doughnutChartExample = function(){
var data = [{name:"sfdf",data:.03},
{name:"a",data:.9},
{name:"bdsffsdfshjkhjkhjkhjkhkdf",data:.6},
{name:"blaa blaa blaa",data:.3},
{name:"c",data:.2},
{name:"enter",data:.05},
{name:"other",data:.02}];
d3.select("body").append("div").attr("class","doughnutChart");
var func = cf.doughnutChart().width(200).height(200).thickness(40).colorCenter(false);
d3.select(".doughnutChart").datum(data).call(func);
d3.select("body").append("div").attr("class","livsit");
var data = [{name:"On Campus",data:.485},
{name:"With Family",data:.385},
{name:"Independent",data:.13}];
var func = cf.doughnutChart().width(200).height(200).thickness(40).colorCenter(false);
d3.select(".livsit").datum(data).call(func);
}
cf.densityChart = function(){
var variable;
var schoolID = -1;
var margin = {top: 28, right: 20, bottom: 30, left: 20},
width = 400 - margin.left - margin.right,
height = 200 - margin.top - margin.bottom;
var format = d3.format();
function chart(selection){
selection.each(function(data) {
variable = data;
// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg");
// Otherwise, create the skeletal chart.
if(!svg[0].length){
d3.select(this).append("svg");
svg = d3.select(this).selectAll("svg");
}
var svg = svg
.attr("class","densityChart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var min = d3.min(variable.data);
var max = d3.max(variable.data);
var x = d3.scale.linear()
.domain([min,max])
.range([0, width]);
var y = d3.scale.linear()
.domain([0,1])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(3)
.tickFormat(format);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(height)
.y1(function(d) { return y(d.y); });
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");
var filteredVariable = variable.data.filter(Number);
var kde = science.stats.kde().sample(filteredVariable);
var tdat = kde(d3.range(min,max,(max-min)/300));
for(var i=0;i<tdat.length;i++){ tdat[i]={x:tdat[i][0],y:tdat[i][1]} } var ymax=d3.max(tdat,function(x){return x.y;}) for(var i="0;i<tdat.length;i++){" tdat[i].y=0.75*tdat[i].y/ymax; } var tmpdat=[]; for(var j="0;j<tdat.length;j++){" tmpdat[j]={y:0,x:tdat[j].x}; } var path='svg.append("path")' .datum(tmpdat) .attr("class", "area") .attr("d", area); path.datum(tdat) .transition() .duration(750) .attr("d", area); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); function plotlabel(sx,sy,text,tip,orientation,offset){ var lx=0; var ly=offset; var label='svg.append("text")' .attr("class","label") .attr("x",lx) .attr("y",ly) .text(text); //label.append("title").text("dfsdsds"); if(tip! ){ label.attr("onmouseover","tooltip.show(\""+tip+"\", 200);") .attr("onmouseout","tooltip.hide();"); } var ln=label[0][0].getComputedTextLength(); if(orientation='=="left"){' if(x(sx)<ln){ var interp=[{x:x(sx), y:y(sy)}, {x:(x(sx)+lx)/2-30, y:(y(sy)+ly)/2}, {x:lx, y:ly}]; }else{ var interp=[{x:x(sx), y:y(sy)}, {x:(x(sx)+ln+lx)/2+30, y:(y(sy)+ly)/2}, {x:lx+ln, y:ly}]; } }else{ lx=width-ln; label.attr("x",lx); if(x(sx)> (width-ln)){
var interp = [{x:x(sx), y:y(sy)}, {x:(x(sx)+ln+lx)/2+30, y:(y(sy)+ly)/2}, {x:lx+ln, y:ly}];
}else{
var interp = [{x:x(sx), y:y(sy)}, {x:(x(sx)+lx)/2-30, y:(y(sy)+ly)/2}, {x:lx, y:ly}];
}
}
svg.append("circle").attr("cx",x(sx)).attr("cy",y(sy)).attr("r",5)
svg.append("path").datum(interp)
.attr("d", line)//function(d) { document.write(d.x);return line.interpolate(d)(interp); })
.attr("fill","none").attr("stroke","black");
}
if(schoolID>=0){
cf.withVariable("UNITID", function(UNITID){
cf.withVariable("INSTNM",function(INSTNM){
var index = UNITID.data.indexOf(schoolID)
var sx = variable.data[index];
var sy = 0.75*kde([sx])[0][1]/ymax;
var mx = d3.mean(filteredVariable);
var my = 0.75*kde([mx])[0][1]/ymax;
if(sx!=null)
plotLabel(sx,sy,INSTNM.data[index],"Value: "+format(sx),sx<mx?"left":"right",-12); plotlabel(mx,my,"u.s. average","average among \\nu.s. universities:\\n"+ format(mx),sx>mx?"left":"right",0);
})
});
}
var brushText = svg.append("text")
.attr("class","label")
.attr("x",margin.left+width/2)
.attr("y",height-5)
.text("")
.style("text-anchor", "middle");
svg.append("path").attr("class","brushPath");
var brush = d3.svg.brush()
.x(x)
.on("brush", runBrush);
var brushArea = d3.svg.area()
.interpolate("monotone")
.x(x)
.y0(height)
.y1(y);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill","none");
svg.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", 3)
.attr("height", height-3)
.on("mouseover",function(){
path.transition().attr("class","areaSelected")
})
.on("mouseout",function(){
path.transition().attr("class","area")
});
svg.append("line")
.attr("class","axisLine")
.style("stroke","white")
.style("stroke-width","2px")
.attr("x1",x(tdat[0].x))
.attr("y1",height)
.attr("x2",x(tdat[tdat.length-1].x))
.attr("y2",height)
function runBrush(a) {
if(brush.empty()){
brushText.text("");
return;
}
svg.select(".brushPath").attr("d", brushArea);
var l = brush.extent()[0],
u = brush.extent()[1],
n = filteredVariable.length,
c = 0,
v = 0;
for(var i=0;i<n;i++){ v=filteredVariable[i] if(v<=u && v>=l)
c++
}
brushText.text(c + " of " + n + " ("+ d3.format(".0%")(c/n)+ ")");
//svg.select(".x.axis").call(xAxis);
}
});
}
chart.width = function(_) {
if (!arguments.length) return width;
width = _;
return chart;
};
chart.height = function(_) {
if (!arguments.length) return height;
height = _;
return chart;
};
chart.margin = function(_) {
if (!arguments.length) return margin;
margin = _;
height = margin;
return chart;
};
chart.format = function(_) {
if (!arguments.length) return format;
format = _;
return chart;
};
chart.schoolID = function(_) {
if (!arguments.length) return schoolID;
schoolID = _;
return chart;
};
return chart;
}
cf.densityChartExample = function(){
d3.select("body").append("div").attr("class","dChart");
var func1 = cf.densityChart()
.schoolID(140818)
.height(50)
.format(d3.format(".1%"));
cf.withVariable("percWomen",function(percWomen){
d3.select(".dChart").datum(percWomen).call(func1);
});
d3.select("body").append("div").attr("class","dChart1");
var func = cf.densityChart()
.schoolID(140818)
.height(50)
.format(function(x){ return "$" + d3.format(",.0f")(x);});
cf.withVariable("aveCost",function(variable){
d3.select(".dChart1").datum(variable).call(func);
});
}
cf.subDensityChart = function(){
var plot = {};
plot.variable;
plot.schoolName = ""
plot.margin = {top: 15, right: 20, bottom: 10, left: 20};
plot.width = 150;
plot.height = 60;
plot.format = d3.format();
plot.variable = null;
plot.root = null;
plot.maxHeight = 1;
plot.title = "";
plot.description = "";
plot.brushListener = null;
plot.chart = function(root,data){
var thePlot = this;
var width = plot.width - plot.margin.left - plot.margin.right;
var height = plot.height - plot.margin.top - plot.margin.bottom;
if(data!=null)
this.variable = data;
if(root!=null)
this.root=root;
var svg = root
.attr("class","densityChart")
.attr("width", this.width )
.attr("height", this.height)
.append("g")
.attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
var min = d3.min(this.variable.data);
var max = d3.max(this.variable.data);
var x = d3.scale.linear()
.domain([min,max])
.range([0, width]);
var y = d3.scale.linear()
.domain([0,1])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(3)
.tickFormat(this.format);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var area = d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(height)
.y1(function(d) { return y(d.y); });
var line = d3.svg.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.interpolate("basis");
var filteredVariable = this.variable.data.filter(Number);
var kde = science.stats.kde().sample(filteredVariable);
var tdat = kde(d3.range(min,max,(max-min)/300));
for(var i=0;i<tdat.length;i++){ tdat[i]={x:tdat[i][0],y:tdat[i][1]} } var ymax=d3.max(tdat,function(x){return x.y;}) for(var i="0;i<tdat.length;i++){" tdat[i].y=plot.maxHeight*tdat[i].y/ymax; } tmpdat=[]; for(var j="0;j<tdat.length;j++){" tmpdat[j]={y:0,x:tdat[j].x}; } var density='svg.append("path")' .datum(tmpdat) .attr("class", "area") .attr("d", area); density.datum(tdat) .transition() .duration(1000) .attr("d", area); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); function plotlabel(sx,sy,text,tip,orientation,offset){ var lx=0; var ly=offset; var label='svg.append("text")' .attr("class","label") .attr("x",lx) .attr("y",ly) .text(text); //label.append("title").text("dfsdsds"); if(tip! ){ label.attr("onmouseover","tooltip.show(\""+tip+"\", 30);") .attr("onmouseout","tooltip.hide();"); } var ln=label[0][0].getComputedTextLength(); if(orientation='=="left"){' var interp=[{x:x(sx), y:y(sy)}, {x:(x(sx)+ln+lx)/2+30, y:(y(sy)+ly)/2}, {x:lx+ln, y:ly}]; }else{ lx=width-ln; label.attr("x",lx); var interp=[{x:x(sx), y:y(sy)}, {x:(x(sx)+lx)/2-30, y:(y(sy)+ly)/2}, {x:lx, y:ly}]; } svg.append("circle").attr("cx",x(sx)).attr("cy",y(sy)).attr("r",5) svg.append("path").attr("class","curve").datum(interp) .attr("d", line)//function(d) { document.write(d.x);return line.interpolate(d)(interp); }) .attr("fill","none").attr("stroke","black"); } if(this.schoolname! ){ cf.withvariable("instnm",function(instnm){ var sx=thePlot.variable.data[INSTNM.data.indexOf(thePlot.schoolName)]; var sy=plot.maxHeight*kde([sx])[0][1]/ymax; var mx=d3.mean(filteredVariable); var my=plot.maxHeight*kde([mx])[0][1]/ymax; plotlabel(sx,sy,theplot.schoolname,"value: "+theplot.format(sx),sx<mx?"left":"right",0); plotlabel(mx,my,"average","average among \\nselected universities:\\n"+ theplot.format(mx),sx>mx?"left":"right",0);
});
}
var brushText = svg.append("text")
.attr("class","brushLabel")
.attr("x",width/2)
.attr("y",height-3)
.text("")
.style("text-anchor", "middle");
var titleText = svg.append("text")
.attr("class","titleLabel")
.attr("x",width/2)
.attr("y",-2)
.text(this.title)
.style("text-anchor", "middle")
.attr("onmouseover","tooltip.show(\""+this.description+"\", 100);")
.attr("onmouseout","tooltip.hide();");
svg.append("path").attr("class","brushPath");
var brush = d3.svg.brush()
.x(x)
.on("brush", runBrush)
.on("brushend",triggerBrush);
function clearSelection(){
if(!brush.empty()){
console.debug("clear")
svg.select(".brush").call(brush.clear());
triggerBrush();
}
}
var brushArea = d3.svg.area()
.interpolate("monotone")
.x(x)
.y0(height)
.y1(y);
svg.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill","none");
svg.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", 0)
.attr("height", height)
.on("mouseover",function(){
density.attr("class","areaSelected")
})
.on("mouseout",function(){
density.attr("class","area")
});
root.selectAll("text").on("click",clearSelection);
svg.append("line")
.attr("class","axisLine")
.style("stroke","white")
.style("stroke-width","2px")
.attr("x1",x(tdat[0].x))
.attr("y1",height)
.attr("x2",x(tdat[tdat.length-1].x))
.attr("y2",height)
function runBrush(a) {
if(brush.empty()){
brushText.text("");
/*var filter = [];
for(var i=0;i<plot.variable.data.length;i++){ filter[i]=true; } if(plot.brushlistener!=null && a!=null) plot.brushlistener(filter);*/ return; } //svg.select(".brushpath").attr("d", brusharea); var l=brush.extent()[0], u=brush.extent()[1], n=filteredVariable.length, c=0, v=0; for(var i="0;i<n;i++){" v=filteredVariable[i] if(v<=u && v>=l)
c++
}
brushText.text(c + " of " + n + " ("+ d3.format(".0%")(c/n)+ ")");
//svg.select(".x.axis").call(xAxis);
}
function triggerBrush(a){
if(brush.empty()){
if(plot.brushListener!=null)
plot.brushListener(null);
return;
}
var l = brush.extent()[0],
u = brush.extent()[1];
var filter = [];
for(var i=0;i<plot.variable.data.length;i++){ var v=plot.variable.data[i]; if(v="==null)" filter[i]=false; else if(v<=u && v>=l)
filter[i] = true;
else
filter[i] = false;
}
if(plot.brushListener!=null)
plot.brushListener(filter);
}
this.update = function(include){
filteredVariable = [];
var j=0;
for(var i=0;i<plot.variable.data.length;i++){ if((include="==null" ||include[i]) && plot.variable.data[i]!=null){ filteredvariable[j]=plot.variable.data[i]; j++; } } var kde=science.stats.kde().sample(filteredVariable); var tdat=kde(d3.range(min,max,(max-min)/300)); for(var i="0;i<tdat.length;i++){" tdat[i]={x:tdat[i][0],y:tdat[i][1]} } var ymax=d3.max(tdat,function(x){return x.y;}) for(var i="0;i<tdat.length;i++){" tdat[i].y=plot.maxHeight*tdat[i].y/ymax; } density.data(tdat).transition().duration(1000).attr("d", area(tdat)); runbrush(null); if(plot.schoolname! ){ cf.withvariable("instnm",function(instnm){ svg.selectall(".label").remove(); svg.selectall(".curve").remove(); svg.selectall("circle").remove(); var sx=thePlot.variable.data[INSTNM.data.indexOf(thePlot.schoolName)]; var sy=plot.maxHeight*kde([sx])[0][1]/ymax; var mx=d3.mean(filteredVariable); var my=plot.maxHeight*kde([mx])[0][1]/ymax; settimeout(function(){ plotlabel(sx,sy,theplot.schoolname,"value: "+theplot.format(sx),sx<mx?"left":"right",0); plotlabel(mx,my,"average","average among \\nselected universities:\\n"+ theplot.format(mx),sx>mx?"left":"right",0);
},1000);
});
}
}
};
plot.opt = function(option, value) {
if (arguments.length<2) return this[option];
this[option] = value;
return this;
};
return plot;
}
cf.subBarChart = function(){
var plot = {};
plot.format = function(x){return x;};
plot.margin = {top: 25, right: 20, bottom: 0, left: 20};
plot.width = 150;
plot.height = 90;
plot.buffer = 10;
plot.variable = null;
plot.brushListener = null;
plot.className = "subBarChart";
plot.counts = function(variable){
result = [];
for(var i=0;i<variable.attr.levels.length;i++){ result[i]={data:0,name:variable.attr.levels[i]}; } for(var i="0;i<variable.data.length;i++){" var j=variable.data[i]; if(j="=null){" continue; } result[j-1].data++; } return result; } plot.chart=function(root,variable){ if(variable!=null) this.variable=variable; else variable=this.variable; var width=plot.width - plot.margin.left - plot.margin.right; var height=plot.height - plot.margin.top - plot.margin.bottom; var chart=root .attr("class",plot.classname) .attr("width", this.width ) .attr("height", this.height) .append("g").attr("transform","translate("+plot.margin.left+","+plot.margin.top+")") plot.focus=function(d){ chart.selectall("rect") .attr("class", d.selected ? "rectselected" : "rectfocused"); } plot.unfocus=function(d){ chart.selectall("rect") .attr("class",d.selected ? "rectselected" : "rectunfocused"); } var data=plot.counts(variable); var names=data.map(function(x){return x.name;}); var y=d3.scale.ordinal() .domain(names) .rangebands([0, height]); chart.selectall("yaxis") .data(data) .enter().append("text") .attr("class", "yaxis") .attr("x", function(d){return -3;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .text(function(d){return d.name;}); var axisnodes='chart.selectAll(".yaxis")[0];' //var axistextwidth=Math.ceil( // d3.max(axisnodes.map(function(x){return x.getcomputedtextlength();})))+4; var axistextwidth=50; chart.selectall(".yaxis").remove("yaxis"); var x=d3.scale.linear() .domain([0, d3.max(data.map(function(x){return x.data;}))]) .range([0, width-axistextwidth-this.buffer]); chart.selectall("rect") .data(data) .enter().append("rect") .attr("class","rectunfocused") .attr("y", function(d,i){ return y(d.name);}) .attr("x", axistextwidth+this.buffer) .attr("width", function(d){return x(d.data);}) .attr("height", y.rangeband()) .on("click",function(d,i){plot.toggleselect(i)}) .on("mouseover",function(d,i){plot.focus(d)}) .on("mouseout",function(d,i){plot.unfocus(d)}) chart.selectall("bar") .data(data) .enter().append("text") .attr("class", "bar") .attr("x", function(d){return axistextwidth+plot.buffer+x(d.data)-3;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .text(function(d){return plot.format(d.data);}) .style("font-size","6pt") .on("click",function(d,i){plot.toggleselect(i)}); var bartext='chart.selectAll(".bar")[0];' for(var i="0;i<barText.length;i++){" var l=barText[i].getComputedTextLength(); var node=d3.select(barText[i]) var tx='parseFloat(node.attr("x"));' //console.debug(axistextwidth+this.buffer+" "); //if(tx-l-3 < axistextwidth+this.buffer){ node.attr("x",tx+l+8).style("fill","#999999") //} } chart.selectall("yaxis") .data(data) .enter().append("text") .attr("class", "yaxis") .attr("x", function(d){return axistextwidth;}) .attr("y", function(d,i) { return y(d.name) + y.rangeband(d.name) / 2; }) .attr("dx", -3) // padding-right .attr("dy", ".35em") // vertical-align: middle .attr("text-anchor", "end") // text-align: right .text(function(d){return d.name;}) .on("click",function(d,i){plot.toggleselect(i)}); var titletext='chart.append("text")' .attr("class","titlelabel") .attr("x",width/2) .attr("y",-5) .text(this.title) .style("text-anchor", "middle") .attr("onmouseover","tooltip.show(\""+this.description+"\", 100);") .attr("onmouseout","tooltip.hide();"); plot.toggleselect=function(i){ data[i].selected=!data[i].selected; chart.selectall(".bar") .data(data) .style("fill",function(d,j){return d.selected ? "#f05c49":"#999999";}) chart.selectall("rect") .data(data) .attr("class",function(d,j){return d.selected ? "rectselected":"rectfocused";}) var filter=[]; var hasselected=false; for(var j="0;j<data.length;j++){" if(!data[j].selected) continue; else hasselected=true; for(var k="0;k<plot.variable.data.length;k++){" if(filter.length>0){
filter[k] = filter[k] || plot.variable.data[k] === (j+1);
}else{
filter[k] = plot.variable.data[k] === (j+1)
}
}
}
if(!hasSelected){
for(var j=0;j<variable.data.length;j++) filter[j]=true; } if(plot.brushlistener!=null) plot.brushlistener(filter); } this.update=function(include){ var newvar=[]; var j=0; if(include="==null){" newvar=plot.variable.data; }else{ for(var i="0;i<include.length;i++){" if(include[i]){ newvar[j]=plot.variable.data[i]; j++; } } } var newdata=plot.counts({data:newvar,attr:{levels:plot.variable.attr.levels}}); for(var i="0;i<newdata.length;i++)" newdata[i].selected=data[i].selected; chart.selectall("rect") .data(newdata).transition().duration(1000) .attr("y", function(d,i){ return y(d.name);}) .attr("x", axistextwidth+this.buffer) .attr("width", function(d){return x(d.data);}) .attr("height", y.rangeband()) chart.selectall(".bar") .data(newdata) .attr("x", function(d){return axistextwidth+plot.buffer+x(d.data)-3;}) .text(function(d){return plot.format(d.data);}) for(var i="0;i<barText.length;i++){" var l=barText[i].getComputedTextLength(); var node=d3.select(barText[i]) var tx='parseFloat(node.attr("x"));' node.attr("x",tx+l+8) } } } plot.opt=function(option, value) { if (arguments.length<2) return this[option]; this[option]=value; return this; }; return plot; } cf.collegechooser=function(){ plot={}; plot.subht=70; plot.subbarht=85; plot.subwt=150; plot.catht=25; plot.linebuffer=20; plot.svg=null; plot.datatables=[]; plot.subplots=[]; plot.registerdatatable=function(dt){ plot.datatables.push(dt); } plot.chart=function(svg){ if(svg!=null){ plot.svg=svg; }else if(plot.svg="==null){" var svg='d3.select("body")' .append("svg") .attr("width",750) .attr("height",310) plot.svg=svg; }else{ var svg=plot.svg; } function makecattitle(title,y,x1,x2){ var root='svg.append("g").attr("transform","translate("+x1+","+y+")");' var w=x2-x1; var label='root.append("text")' .attr("class","catlabel") .attr("x",w/2) .attr("y",0) .text(title) .style("text-anchor", "middle") .attr("dy", ".35em") var ln=label[0][0].getComputedTextLength(); root.append("line") .attr("x1",plot.linebuffer) .attr("y1",0) .attr("y2",0) .attr("stroke","#b3b3b3") .attr("x2",w/2-ln/2-5) root.append("line") .attr("x1",w/2+ln/2+5) .attr("y1",0) .attr("y2",0) .attr("stroke","#b3b3b3") .attr("x2",w-plot.linebuffer) } var plotfilter=[]; var combinedfilter=null; function brushlistener(i,include){ plotfilter[i]=include; combinedfilter=null; for(var k="0;k<plot.subPlots.length;k++){" if(plotfilter[k]!=null){ if(combinedfilter="=null){" combinedfilter=[]; for(var j="0;j<plotFilter[k].length;j++){" combinedfilter[j]=plotFilter[k][j]; } }else{ for(var j="0;j<plotFilter[k].length;j++){" combinedfilter[j]=combinedFilter[j] && plotfilter[k][j]; } } } } for(var j="0;j<plot.subPlots.length;j++){" plot.subplots[j].update(combinedfilter); } for(var j="0;j<plot.dataTables.length;j++){" updatedatatable(plot.datatables[j],combinedfilter); } } makecattitle("students",plot.catht/2,0,plot.subwt*3); cf.withvariable("percwomen",function(variable){ var root='svg.append("g").attr("transform","translate(0,"+plot.catHt+")");' var dc=cf.subDensityChart() .opt("title","% women") .opt("description","the percentage of undergraduate students who are female") .opt("format",d3.format(".0%")) .opt("brushlistener",function(inc){return brushlistener(0,inc)}); plot.subplots[0]=dc; dc.chart(root,variable) }); cf.withvariable("percnonwhite",function(variable){ var root='svg.append("g").attr("transform","translate(150,"+plot.catHt+")");' var dc=cf.subDensityChart() .opt("title","% non-white") .opt("description","the percentage of undergraduate students who identify as non-white") .opt("format",d3.format(".0%")) .opt("brushlistener",function(inc){return brushlistener(1,inc)}); plot.subplots[1]=dc; dc.chart(root,variable) }); cf.withvariable("gradrate",function(variable){ var root='svg.append("g").attr("transform","translate(300,"+plot.catHt+")");' var dc=cf.subDensityChart() .opt("title","graduation rate") .opt("description","the percentage of undergraduate students who graduate within 6 years of enrollment") .opt("format",d3.format(".0%")) .opt("brushlistener",function(inc){return brushlistener(2,inc)}); plot.subplots[2]=dc; dc.chart(root,variable) }); makecattitle("quality",plot.catht+plot.subht+plot.catht/2,0,plot.subwt*3); cf.withvariable("rbrighthub",function(variable){ var root='svg.append("g").attr("transform","translate(0,"+(plot.subHt+2*plot.catHt)+")");' var dc=cf.subDensityChart() .opt("title","rank") .opt("description","the college factual rank of the institution</br>1 - Best, 1296 - Worst")
.opt("brushListener",function(inc){return brushListener(3,inc)});
plot.subPlots[3] = dc;
dc.chart(root,variable)
});
cf.withVariable("aveValueRank",function(variable){
var root = svg.append("g").attr("transform","translate(150,"+(plot.subHt+2*plot.catHt)+")");
var dc = cf.subDensityChart()
.opt("title","Value")
.opt("description","The College Factual value rank for the institution.</br>1 - Best, 1274 - Worst" +
"</br>(Based on average cost across all students excluding financial aid)")
.opt("brushListener",function(inc){return brushListener(4,inc)});
plot.subPlots[4] = dc;
dc.chart(root,variable)
});
makeCatTitle("Selectivity",plot.catHt+plot.subHt+plot.catHt/2,plot.subWt*3,plot.subWt*5);
cf.withVariable("SAT",function(variable){
var root = svg.append("g").attr("transform","translate(450,"+(plot.subHt+2*plot.catHt)+")");
var dc = cf.subDensityChart()
.opt("title","SAT")
.opt("description","The average SAT score for incoming students")
.opt("brushListener",function(inc){return brushListener(5,inc)});
plot.subPlots[5] = dc;
dc.chart(root,variable)
});
cf.withVariable("AccRate",function(variable){
var root = svg.append("g").attr("transform","translate(600,"+(plot.subHt+2*plot.catHt)+")");
var dc = cf.subDensityChart()
.opt("title","% Accepted")
.opt("description","The percentage of applicants accepted for admission.</br>" +
"Low scores represent more exclusive institutions")
.opt("format",d3.format(".0%"))
.opt("brushListener",function(inc){return brushListener(6,inc)});
plot.subPlots[6] = dc;
dc.chart(root,variable)
});
makeCatTitle("Instruction",plot.catHt/2,plot.subWt*3,plot.subWt*5);
cf.withVariable("EmpTeachFTPct",function(variable){
var root = svg.append("g").attr("transform","translate(450,"+(plot.catHt)+")");
var dc = cf.subDensityChart()
.opt("title","FT Faculty")
.opt("description","The percentage of instructional employees who are full time")
.opt("format",d3.format(".0%"))
.opt("brushListener",function(inc){return brushListener(7,inc)});
plot.subPlots[7] = dc;
dc.chart(root,variable)
});
cf.withVariable("StudFacRat",function(variable){
var root = svg.append("g").attr("transform","translate(600,"+(plot.catHt)+")");
var dc = cf.subDensityChart()
.opt("title","Faculty Ratio")
.opt("description","The ratio of instructional employees to full time undergraduate students")
.opt("format",function(x){return "1:" + x;})
.opt("brushListener",function(inc){return brushListener(8,inc)});
plot.subPlots[8] = dc;
dc.chart(root,variable)
});
makeCatTitle("Institution",plot.catHt*2+plot.subHt*2+plot.catHt/2,plot.subWt*0,plot.subWt*5);
cf.withVariable("aveCost",function(variable){
var root = svg.append("g").attr("transform","translate(600,"+(2*plot.subHt+3*plot.catHt)+")");
var dc = cf.subDensityChart()
.opt("height",85)
.opt("title","Cost")
.opt("description","Average cost for full time undergraduates before aid.")
.opt("format",function(x){ return "$" + d3.format(",.0f")(x/1000)+"k";})
.opt("brushListener",function(inc){return brushListener(9,inc)});
plot.subPlots[9] = dc;
dc.chart(root,variable)
});
cf.withVariable("setting",function(variable){
var root = svg.append("g").attr("transform","translate(450,"+(2*plot.subHt+3*plot.catHt)+")");
var bc = cf.subBarChart()
.opt("title","Campus")
.opt("description","The setting of the campus.")
.opt("brushListener",function(inc){return brushListener(10,inc)});
plot.subPlots[10] = bc;
bc.chart(root,variable)
});
cf.withVariable("USNRegion",function(variable){
var root = svg.append("g").attr("transform","translate(150,"+(2*plot.subHt+3*plot.catHt)+")");
var bc = cf.subBarChart()
.opt("title","Region")
.opt("description","The location of the campus.")
.opt("brushListener",function(inc){return brushListener(11,inc)});
plot.subPlots[11] = bc;
bc.chart(root,variable)
});
cf.withVariable("sizeCat",function(variable){
var root = svg.append("g").attr("transform","translate(0,"+(2*plot.subHt+3*plot.catHt)+")");
var bc = cf.subBarChart()
.opt("title","Size")
.opt("description","Total # of undergraduate students.")
.opt("brushListener",function(inc){return brushListener(12,inc)});
plot.subPlots[12] = bc;
bc.chart(root,variable)
});
function updateDataTable(dt,include,col){
if(include==null){
include = [];
for(var i =0;i<cf.nschools;i++){ include[i]=true; } } if(col="=null)" col=0; for(var i="0;i<include.length;i++){" dt.fnupdate(include[i] ? "t" : "f" ,i,col, false,false); } dt.fnfilter("t",col) } return plot; } plot.opt=function(option, value) { if (arguments.length<2) return this[option]; this[option]=value; return this; }; return plot; } cf.collegetable=function(selection){ var loadingdata=[]; for(var i="0;i<cf.nSchools;i++)" loadingdata[i]=[ "t", "loading...", "0", "0"]; var datatable=selection.dataTable( { "aadata": loadingdata, "aocolumns": [ { "stitle": "filter", "bsearchable": false, "bvisible": false }, { "stitle": "institution" }, { "stitle": "rank", "bsearchable": false }, { "stitle": "cost", "bsearchable": false } ], "sscrolly": "200px", "bpaginate": false } ); datatable.populate=function(){ cf.withvariable("instnm",function(variable){ for(var i="0;i<variable.data.length;i++){" datatable.fnupdate("<a href='" + bhBaseUri + "/colleges/" + variable.data[i].replace(/ /g,' -').tolowercase()+"/'>" + variable.data[i]+"</a>",i,1, false,false);
}
cf.withVariable("RBrightHub",function(variable){
for(var i =0;i<variable.data.length;i++){ datatable.fnupdate(variable.data[i] ? variable.data[i]:99999,i,2, false,false); } datatable.fnsort([[2,'asc']]); cf.withvariable("avecost",function(variable){ for(var i="0;i<variable.data.length;i++){" datatable.fnupdate(variable.data[i] ,i,3, false,false); } }); }); }); return datatable; } return datatable; } cf.collegechooserexample=function(){ var svg='d3.select("body")' .append("svg") .attr("width",750) .attr("height",310) plot=cf.collegeChooser().chart(svg); d3.select("body").append("div").attr("class","insttable").style("width","750px").attr("text-align","center"); $('.insttable').html( '<table cellpadding=0 cellspacing=0 border=0 class=display id=example></table>' );
var tab = $("#example");
dataTable = cf.collegeTable(tab).populate();
plot.registerDataTable(dataTable);
}