jwildfire · March 25, 2016 14:45
diff --git a/README.md b/README.md
diff --git a/gg-dashboard.css b/gg-dashboard.css
 body{
  padding:5px;
 }
 .ig-dashboard{
  width: 1320px;
  font-size: 12px;
 }

 .ig-dashboard .gg-dash-item{
  float: left;
  width: 420px;
  margin: 0 30px 30px 0;
 }
 .ig-dashboard .gg-dash-item.left{
  clear: left;
 }
 .ig-dashboard .gg-dash-item.right{
  margin-right: 0;
 }
 .ig-dashboard .gg-dash-item.right.double-height{
  float: right;
 }
 .ig-dashboard .gg-dash-item.double-wide{
  width: 850px;
 }
 .ig-dashboard .gg-dash-item.triple-wide{
  width: 100%;
 }
 .ig-dashboard .gg-dash-item.full-height{
  height: 100%;
 }
 .ig-dashboard .gg-dash-item > .gg-dash-item-title{
  position: relative;
  z-index: 1;
  text-align: left;
  font-weight: bold;
  font-size: 1.5em;
  margin:0;
  margin-bottom: .5em;
 }

 .ig-dashboard .gg-dash-item > .gg-dash-item-title .wc-controls{
  font-size: 12px;
  font-weight: normal;
  float: right;
 }

 .ig-dashboard .gg-dash-item  .wc-controls{
  margin: 0;
 }

 .ig-dashboard .gg-dash-item .wc-controls .control-group{
  margin: 0;
 }

 .ig-dashboard .gg-dash-item .wc-controls .control-group:not(:last-of-type){
  margin: 0 10px 0 0;
 }

 .ig-dashboard .gg-dash-item .wc-controls .control-group > *{
  display: inline-block;
  margin: 0 3px 0 0;
 }

 .ig-dashboard .gg-dash-item .wc-controls .control-group > label.radio:not(:last-of-type){
  margin-right: .5em;
 }

 .ig-dashboard .gg-dash-item .wc-controls .control-label{
  display: inline;
  margin-right: .5em;
 }

 .ig-dashboard .gg-dash-item .wc-controls .changer{
  display: inline;
  max-width: 100px;
 }

 .ig-dashboard .gg-dash-item .wc-chart .legend{
  text-align: right;
 }
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
 	<title>Interactive Dashboard</title>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">

 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	
 	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">
 	
 	<link rel="stylesheet" type="text/css" href="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.css">
 	<link rel="stylesheet" type="text/css" href="gg-dashboard.css">

 	<script src="https://d3js.org/d3.v3.min.js"></script>
 	<script type="text/javascript" src="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.js"></script>
 </head>

 <body>
 	<div class="ig-dashboard">
 		<div class="tab-content">
 		  	<div class="gg-dash-item top left">
 		  		<h4 class="gg-dash-item-title">Screening and Randomization</h4>
 		  		<div class="gg-dash-item-content"></div>
 		  	</div>
 		  	<div class="gg-dash-item top middle">
 		  		<h4 class="gg-dash-item-title">Visit Completion</h4>
 		  		<div class="gg-dash-item-content"></div>
 		  	</div>
 		  	<div class="gg-dash-item top right">
 			  	<h4 class="gg-dash-item-title">Queries</h4>
              	<div class="gg-dash-item-content"></div>
 		  	</div>
 		  	<div class="gg-dash-item bottom left">
 		  		<h4 class="gg-dash-item-title">Enrollment</h4>
 		  		<div class="gg-dash-item-content"></div>
 		  	</div>
 		  	<div class="gg-dash-item bottom middle">
 		  		<h4 class="gg-dash-item-title">Protocol Deviations Over Time</h4>
 	            <div class="gg-dash-item-content"></div>
 		  	</div>
 		  	<div class="gg-dash-item bottom right">
 		  		<h4 class="gg-dash-item-title">Form Completion</h4>
 	            <div class="gg-dash-item-content"></div>
 		  	</div>
 		</div>
 	</div>
 </body>
 <script type="text/javascript" src="study-dashboard.js"></script>

 </html>

diff --git a/sample_DEVS.csv b/sample_DEVS.csv
diff --git a/sample_ENROLL.csv b/sample_ENROLL.csv
diff --git a/sample_FORMS.csv b/sample_FORMS.csv
diff --git a/sample_QUERY.csv b/sample_QUERY.csv
diff --git a/sample_SCRandRAND.csv b/sample_SCRandRAND.csv
diff --git a/sample_VIS.csv b/sample_VIS.csv
diff --git a/study-dashboard.js b/study-dashboard.js


 var single_width = 420;
 var single_height = 300;
 var margins = {top: 8, right: 8, bottom: 20, left: 35};

 var meta1 = [
 	{col: "STUDYID", label: ""}, 
 	{col: "RAND", label: "Randomized"}, 
 	{col: "SCREEN", label: "Screened"}, 
 	{col: "CAT", label: ""}, 
 	{col: "TARGET", label: "Target"}
 ]
 var site_order = ["02","08","09","10","55","60","68","70","80","81","82","83","90", "95"];
 var visit_order = ["D0","W2","W4","W8","W12","W16","W20","W24","W28","W32","W36","W40","W44","W48"];

 /////////////////////
 // Top Right Panel //
 /////////////////////

 var dataElementTL = ".gg-dash-item.top.left";
 var dataPathTL= "sample_SCRandRAND.csv"
 var settingsTL = {
 	"resizable":false,
 	"width":single_width, 
 	"height":single_height,
 	"margin":margins, 
 	"y":{
 		"column":"SITEID",
 		"type": "ordinal", 
 		"label":" ",
 		"behavior": "firstfilter",
 	}, 
 	"x":{
 		"column":"VALUE",
 		"label":" ",
 		"type": "linear",
 	},
 	"marks":[
 		{
 			"type":"circle",
      			"per":["SITEID","TYPE"],
      			"values": {
            			"TYPE": ["Target"]
            		},
            		"attributes":{"fill":"black","stroke":"black"}
        	},
 		{
 			"type":"bar",
 			"split":"TYPE",
 			"arrange":"nested",
      			"per":["SITEID","TYPE"],
      			"values": {
            			"TYPE": ["Randomized","Screened"]
            		}
        	}
 	],
 	"color_by":"TYPE",
 	"colors":["#2b8cbe","#a6bddb","black"],
 	"legend":{
 		"label":""
 	}
 }

 var instanceTL = webCharts.createChart(dataElementTL+" .gg-dash-item-content", settingsTL)
 instanceTL.on("layout",function(){
 	console.log(this)
 })
 instanceTL.on("resize",function(){
 	//modify legend to include totals
 	var total_rand = d3.sum(this.filtered_data.filter(function(d){return d.TYPE=="Randomized"}),function(d){return d.VALUE});
 	var total_scr = d3.sum(this.filtered_data.filter(function(d){return d.TYPE=="Screened"}),function(d){return d.VALUE});

 	this.legend.selectAll(".legend-label").filter(function(f){return f.label === "Randomized"})
 		.text("Randomized ("+total_rand+")")
 	this.legend.selectAll(".legend-label").filter(function(f){return f.label === "Screened"})
 		.text("Screened ("+total_scr+")");

 	//add tooltips to y axis labels
 	var chart=this
 	var ticks = this.svg.select(".y.axis").selectAll(".tick").append("title")
 	.text(function(d){
 		var match = chart.filtered_data.filter(function(f){return f["LABEL"] === d})[0];
 		return match["MOUSEOVER"];
 	});
 });

 d3.csv(dataPathTL, function(e,d){
 	instanceTL.init(d);	
 })


 //////////////////////
 // Top Middle Panel //
 //////////////////////

 var dataElementTM = ".gg-dash-item.top.middle";
 var dataPathTM = "sample_VIS.csv"
 var settingsTM = {
 	"resizable":false,
 	"width":single_width, 
 	"height":single_height,
 	"margin":margins, 
 	"y":{
 		"type": "linear", 
 		"behavior": "firstfilter"
 	}, 
 	"x":{
 		"column":"AVISITAS",
 		"type": "ordinal",
 		"label":"",
 		"order":visit_order
 	},
 	"marks":[
 		{
 		"arrange":"stacked",
      		"split":"CAT",
      		"type":"bar",
      		"per":["AVISITAS"],
      		"summarizeY":"percent",
      		"tooltip":"$y"
 		}
 	],
 	"color_by":"CAT",
 	"colors":["#e34a33",'#fc8d59','rgb(102,194,165)',"#fecc5c",'rgb(43,131,186)'], 
 	"legend":{
 		"label":"",
 		"order": ["Missed", "Out of Window", "In Window", "Overdue", "Expected"]
 	}
 }

 var controlsTM = webCharts.createControls(dataElementTM+" .gg-dash-item-title", 
 	{
 		location: "top", 
 		inputs: [
 			{type: "subsetter", value_col: "SITENAME", label: "Site"}, 
 			{label: "", type:"radio", option: "marks[0].summarizeY", values: ["percent", "count"], relabels: ["%", "N"]}
 		]
 	}
 );

 var instanceTM = webCharts.createChart(dataElementTM+" .gg-dash-item-content", settingsTM, controlsTM)

 d3.csv(dataPathTM, function(e,d){
 	instanceTM.init(d);	
 })


 /////////////////////
 // Top Right Panel //
 /////////////////////

 var dataElementTR = ".gg-dash-item.top.right";
 var dataPathTR = "sample_QUERY.csv"
 var settingsTR = {
 	"resizable":false,
 	"width":single_width, 
 	"height":single_height,
 	"margin":margins, 
 	"y":{
 		"type": "linear", 
 		"behavior": "firstfilter"
 	}, 
 	"x":{
 		"column":"SITEID",
 		"type": "ordinal",
 		"label":"",
 		"order":site_order
 	},
 	"marks":[
 		{
 		"arrange":"stacked",
      		"split":"CAT",
      		"type":"bar",
      		"per":["SITEID"],
      		"summarizeY":"percent",
      		"tooltip":"$y"
 		}
 	],
 	"color_by":"CAT",
 	"colors":['rgb(102,194,165)', "#fecc5c", "#e34a33"], 
 	"legend":{
 		"label":"",
 		"order": ["Resolved", "Outstanding <= 90 days", "Outstanding > 90 days"]
 	}
 }

 var controlsTR = webCharts.createControls(dataElementTR+" .gg-dash-item-title", 
 	{
 		location: "top", 
 		inputs: [
 			{label: "", type:"radio", option: "marks[0].summarizeY", values: ["percent", "count"], relabels: ["%", "N"]}
 		]
 	}
 );

 var instanceTR = webCharts.createChart(dataElementTR+" .gg-dash-item-content", settingsTR, controlsTR)

 d3.csv(dataPathTR, function(e,d){
 	instanceTR.init(d);	
 })

 ///////////////////////
 // Bottom Left Panel //
 ///////////////////////

 var dataElementBL = ".gg-dash-item.bottom.left";
 var dataPathBL = "sample_ENROLL.csv"
 var settingsBL = {
 	"resizable":false,
 	"width":single_width, 
 	"height":single_height,
 	"margin":margins, 
 	"y":{
 		"column":"VALUE",
 		"type": "linear", 
 		"behavior": "firstfilter",
 		"label":""
 	}, 
 	"x":{
 		"column":"DATE",
 		"type": "time",
 		"label":"",
 		"format":"%b-%y"
 	},
 	"marks":[
 		{
 		"arrange":"stacked",
      		"type":"line",
      		"per":["TYPE"],
      		"summarizeY":"sum",
      		"tooltip":"$y"
 		}
 	],
 	"date_format":"%d-%b-%y",
 	"color_by":"TYPE",
 	"colors":["#2b8cbe","#a6bddb" ], 
 	"legend":{
 		"label":"",
 	}
 }

 var controlsBL = webCharts.createControls(dataElementBL+" .gg-dash-item-title", 
 	{
 		location: "top", 
 		inputs: [
 			{type: "subsetter", value_col: "SITENAME", label: "Site"} 
 		]
 	}
 );

 var instanceBL = webCharts.createChart(dataElementBL+" .gg-dash-item-content", settingsBL, controlsBL)
 d3.csv(dataPathBL, function(e,d){
 	instanceBL.init(d);	
 })


 /////////////////////////
 // Bottom Middle Panel //
 /////////////////////////
 var dataElementBM = ".gg-dash-item.bottom.middle";
 var dataPathBM = "sample_DEVS.csv"
 var settingsBM = {
 	"resizable":false,
 	"width":single_width, 
 	"height":single_height,
 	"margin":margins, 
 	"y":{
 		"type": "linear", 
 		"behavior": "firstfilter"
 	}, 
 	"x":{
 		"column":"SITEID",
 		"type": "ordinal",
 		"label":"",
 		"order":site_order,
   		"domain":site_order
 	},
 	"marks":[
 		{
 			"arrange":"stacked",
      		"split":"CAT",
      		"type":"bar",
      		"per":["SITEID"],
      		"summarizeY":"count",
      		"tooltip":"$y"
 		}
 	],
 	"color_by":"CAT",
 	"colors":['rgb(254,229,217)','rgb(252,174,145)','rgb(251,106,74)','rgb(222,45,38)','rgb(165,15,21)'], 
 	"legend":{
 		"label":"",
 		"order": ["1-3 mon.", "4-6 mon.", "7-9 mon.", "10-12 mon.", "> 1 yr."].reverse()
 	}
 }


 var instanceBM = webCharts.createChart(dataElementBM+" .gg-dash-item-content", settingsBM)
 d3.csv(dataPathBM, function(e,d){
 	instanceBM.init(d);	
 })

 ////////////////////////
 // Bottom Right Panel //
 ////////////////////////
 var dataElementBR = ".gg-dash-item.bottom.right";
 var dataPathBR = "sample_FORMS.csv"
 var settingsBR = {
 	"resizable":false,
 	"width":single_width, 
 	"height":single_height,
 	"margin":margins, 
 	"y":{
 		"type": "linear", 
 		"behavior": "firstfilter"
 	}, 
 	"x":{
 		"column":"SITEID",
 		"type": "ordinal",
 		"label":"",
 		"order":site_order,
   		"domain":site_order
 	},
 	"marks":[
 		{
 		"arrange":"stacked",
      		"split":"CAT",
      		"type":"bar",
      		"per":["SITEID"],
      		"summarizeY":"count",
      		"tooltip":"$y"
 		}
 	],
 	"color_by":"CAT",
 	"colors":['rgb(102,194,165)', "#fecc5c", "#e34a33"], 
 	"legend":{
 		"label":"",
 		"order": ["Received", "Outstanding <= 90 days", "Outstanding > 90 days"]
 	}
 }

 var controlsBR = webCharts.createControls(dataElementBR+" .gg-dash-item-title", 
 	{
 		location: "top", 
 		inputs: [
 			{label: "", type:"radio", option: "marks[0].summarizeY", values: ["percent", "count"], relabels: ["%", "N"]}
 		]
 	}
 );

 var instanceBR = webCharts.createChart(dataElementBR+" .gg-dash-item-content", settingsBR, controlsBR)
 d3.csv(dataPathBR, function(e,d){
 	instanceBR.init(d);	
 })
	body{
	padding:5px;
	}
	.ig-dashboard{
	width: 1320px;
	font-size: 12px;
	}

	.ig-dashboard .gg-dash-item{
	float: left;
	width: 420px;
	margin: 0 30px 30px 0;
	}
	.ig-dashboard .gg-dash-item.left{
	clear: left;
	}
	.ig-dashboard .gg-dash-item.right{
	margin-right: 0;
	}
	.ig-dashboard .gg-dash-item.right.double-height{
	float: right;
	}
	.ig-dashboard .gg-dash-item.double-wide{
	width: 850px;
	}
	.ig-dashboard .gg-dash-item.triple-wide{
	width: 100%;
	}
	.ig-dashboard .gg-dash-item.full-height{
	height: 100%;
	}
	.ig-dashboard .gg-dash-item > .gg-dash-item-title{
	position: relative;
	z-index: 1;
	text-align: left;
	font-weight: bold;
	font-size: 1.5em;
	margin:0;
	margin-bottom: .5em;
	}

	.ig-dashboard .gg-dash-item > .gg-dash-item-title .wc-controls{
	font-size: 12px;
	font-weight: normal;
	float: right;
	}

	.ig-dashboard .gg-dash-item .wc-controls{
	margin: 0;
	}

	.ig-dashboard .gg-dash-item .wc-controls .control-group{
	margin: 0;
	}

	.ig-dashboard .gg-dash-item .wc-controls .control-group:not(:last-of-type){
	margin: 0 10px 0 0;
	}

	.ig-dashboard .gg-dash-item .wc-controls .control-group > *{
	display: inline-block;
	margin: 0 3px 0 0;
	}

	.ig-dashboard .gg-dash-item .wc-controls .control-group > label.radio:not(:last-of-type){
	margin-right: .5em;
	}

	.ig-dashboard .gg-dash-item .wc-controls .control-label{
	display: inline;
	margin-right: .5em;
	}

	.ig-dashboard .gg-dash-item .wc-controls .changer{
	display: inline;
	max-width: 100px;
	}

	.ig-dashboard .gg-dash-item .wc-chart .legend{
	text-align: right;
	}
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>Interactive Dashboard</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css">

	<link rel="stylesheet" type="text/css" href="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.css">
	<link rel="stylesheet" type="text/css" href="gg-dashboard.css">

	<script src="https://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript" src="https://graphics.rhoworld.com/src/webcharts/webcharts.v1.4.0.js"></script>
	</head>

	<body>
	<div class="ig-dashboard">
	<div class="tab-content">
	<div class="gg-dash-item top left">
	<h4 class="gg-dash-item-title">Screening and Randomization</h4>
	<div class="gg-dash-item-content"></div>
	</div>
	<div class="gg-dash-item top middle">
	<h4 class="gg-dash-item-title">Visit Completion</h4>
	<div class="gg-dash-item-content"></div>
	</div>
	<div class="gg-dash-item top right">
	<h4 class="gg-dash-item-title">Queries</h4>
	<div class="gg-dash-item-content"></div>
	</div>
	<div class="gg-dash-item bottom left">
	<h4 class="gg-dash-item-title">Enrollment</h4>
	<div class="gg-dash-item-content"></div>
	</div>
	<div class="gg-dash-item bottom middle">
	<h4 class="gg-dash-item-title">Protocol Deviations Over Time</h4>
	<div class="gg-dash-item-content"></div>
	</div>
	<div class="gg-dash-item bottom right">
	<h4 class="gg-dash-item-title">Form Completion</h4>
	<div class="gg-dash-item-content"></div>
	</div>
	</div>
	</div>
	</body>
	<script type="text/javascript" src="study-dashboard.js"></script>

	</html>
STUDYID	SITEID	SITENAME	CAT
sample	02	Site 02	> 1 yr.
sample	02	Site 02	> 1 yr.
sample	02	Site 02	> 1 yr.
sample	02	Site 02	> 1 yr.
sample	02	Site 02	> 1 yr.
sample	08	Site 08	> 1 yr.
sample	08	Site 08	> 1 yr.
sample	08	Site 08	> 1 yr.
sample	09	Site 09	> 1 yr.
sample	55	Site 55	> 1 yr.
sample	55	Site 55	> 1 yr.
sample	55	Site 55	> 1 yr.
sample	55	Site 55	> 1 yr.
sample	70	Site 70	> 1 yr.
sample	70	Site 70	> 1 yr.
sample	70	Site 70	> 1 yr.
sample	70	Site 70	> 1 yr.
sample	70	Site 70	> 1 yr.
sample	70	Site 70	> 1 yr.
sample	70	Site 70	> 1 yr.
sample	82	Site 82	> 1 yr.
sample	82	Site 82	10-12 mon.
sample	82	Site 82	> 1 yr.
sample	82	Site 82	> 1 yr.
sample	82	Site 82	> 1 yr.
sample	90	Site 90	> 1 yr.
sample	90	Site 90	10-12 mon.
sample	90	Site 90	4-6 mon.
STUDYID	SITEID	LABEL	TYPE	VALUE	MOUSEOVER
Sample	2	2	Target	4	Site activated on 27AUG2010 and has been open 58 months.
Sample	6	6	Target	0	Site activated on 11MAY2015 and has been open 1 months.
Sample	8	8	Target	4	Site activated on 11APR2011 and has been open 50 months.
Sample	9	9	Target	4	Site activated on 15SEP2010 and has been open 57 months.
Sample	10	10	Target	4	Site activated on 10SEP2010 and has been open 57 months.
Sample	53	53	Target	0	Site activated on 27MAY2015 and has been open 1 months.
Sample	55	55	Target	4	Site activated on 03AUG2010 and has been open 59 months.
Sample	60	60	Target	1	Site activated on 18JUL2013 and has been open 23 months.
Sample	65	65	Target	0	Site activated on 07APR2015 and has been open 2 months.
Sample	68	68	Target	3	Site activated on 07JUL2011 and has been open 47 months.
Sample	70	70	Target	4	Site activated on 02DEC2010 and has been open 55 months.
Sample	77	77	Target	0	Site activated on 08APR2015 and has been open 2 months.
Sample	80	80	Target	2	Site activated on 15FEB2013 and has been open 28 months.
Sample	81	81	Target	2	Site activated on 28SEP2012 and has been open 33 months.
Sample	82	82	Target	2	Site activated on 01APR2013 and has been open 27 months.
Sample	83	83	Target	2	Site activated on 19FEB2013 and has been open 28 months.
Sample	84	84	Target	0	Site activated on 21APR2015 and has been open 2 months.
Sample	90	90	Target	1	Site activated on 31JUL2013 and has been open 23 months.
Sample	95	95	Target	0	Site activated on 07APR2015 and has been open 2 months.
Sample	2	2	Randomized	2	Site activated on 27AUG2010 and has been open 58 months.
Sample	6	6	Randomized	0	Site activated on 11MAY2015 and has been open 1 months.
Sample	8	8	Randomized	1	Site activated on 11APR2011 and has been open 50 months.
Sample	9	9	Randomized	8	Site activated on 15SEP2010 and has been open 57 months.
Sample	10	10	Randomized	10	Site activated on 10SEP2010 and has been open 57 months.
Sample	53	53	Randomized	0	Site activated on 27MAY2015 and has been open 1 months.
Sample	55	55	Randomized	7	Site activated on 03AUG2010 and has been open 59 months.
Sample	60	60	Randomized	1	Site activated on 18JUL2013 and has been open 23 months.
Sample	65	65	Randomized	0	Site activated on 07APR2015 and has been open 2 months.
Sample	68	68	Randomized	0	Site activated on 07JUL2011 and has been open 47 months.
Sample	70	70	Randomized	4	Site activated on 02DEC2010 and has been open 55 months.
Sample	77	77	Randomized	0	Site activated on 08APR2015 and has been open 2 months.
Sample	80	80	Randomized	2	Site activated on 15FEB2013 and has been open 28 months.
Sample	81	81	Randomized	1	Site activated on 28SEP2012 and has been open 33 months.
Sample	82	82	Randomized	2	Site activated on 01APR2013 and has been open 27 months.
Sample	83	83	Randomized	0	Site activated on 19FEB2013 and has been open 28 months.
Sample	84	84	Randomized	0	Site activated on 21APR2015 and has been open 2 months.
Sample	90	90	Randomized	1	Site activated on 31JUL2013 and has been open 23 months.
Sample	95	95	Randomized	1	Site activated on 07APR2015 and has been open 2 months.
Sample	2	2	Screened	2	Site activated on 27AUG2010 and has been open 58 months.
Sample	6	6	Screened	0	Site activated on 11MAY2015 and has been open 1 months.
Sample	8	8	Screened	2	Site activated on 11APR2011 and has been open 50 months.
Sample	9	9	Screened	12	Site activated on 15SEP2010 and has been open 57 months.
Sample	10	10	Screened	13	Site activated on 10SEP2010 and has been open 57 months.
Sample	53	53	Screened	0	Site activated on 27MAY2015 and has been open 1 months.
Sample	55	55	Screened	13	Site activated on 03AUG2010 and has been open 59 months.
Sample	60	60	Screened	2	Site activated on 18JUL2013 and has been open 23 months.
Sample	65	65	Screened	0	Site activated on 07APR2015 and has been open 2 months.
Sample	68	68	Screened	3	Site activated on 07JUL2011 and has been open 47 months.
Sample	70	70	Screened	8	Site activated on 02DEC2010 and has been open 55 months.
Sample	77	77	Screened	0	Site activated on 08APR2015 and has been open 2 months.
Sample	80	80	Screened	2	Site activated on 15FEB2013 and has been open 28 months.
Sample	81	81	Screened	3	Site activated on 28SEP2012 and has been open 33 months.
Sample	82	82	Screened	6	Site activated on 01APR2013 and has been open 27 months.
Sample	83	83	Screened	3	Site activated on 19FEB2013 and has been open 28 months.
Sample	84	84	Screened	0	Site activated on 21APR2015 and has been open 2 months.
Sample	90	90	Screened	2	Site activated on 31JUL2013 and has been open 23 months.
Sample	95	95	Screened	1	Site activated on 07APR2015 and has been open 2 months.


	var single_width = 420;
	var single_height = 300;
	var margins = {top: 8, right: 8, bottom: 20, left: 35};

	var meta1 = [
	{col: "STUDYID", label: ""},
	{col: "RAND", label: "Randomized"},
	{col: "SCREEN", label: "Screened"},
	{col: "CAT", label: ""},
	{col: "TARGET", label: "Target"}
	]
	var site_order = ["02","08","09","10","55","60","68","70","80","81","82","83","90", "95"];
	var visit_order = ["D0","W2","W4","W8","W12","W16","W20","W24","W28","W32","W36","W40","W44","W48"];

	/////////////////////
	// Top Right Panel //
	/////////////////////

	var dataElementTL = ".gg-dash-item.top.left";
	var dataPathTL= "sample_SCRandRAND.csv"
	var settingsTL = {
	"resizable":false,
	"width":single_width,
	"height":single_height,
	"margin":margins,
	"y":{
	"column":"SITEID",
	"type": "ordinal",
	"label":" ",
	"behavior": "firstfilter",
	},
	"x":{
	"column":"VALUE",
	"label":" ",
	"type": "linear",
	},
	"marks":[
	{
	"type":"circle",
	"per":["SITEID","TYPE"],
	"values": {
	"TYPE": ["Target"]
	},
	"attributes":{"fill":"black","stroke":"black"}
	},
	{
	"type":"bar",
	"split":"TYPE",
	"arrange":"nested",
	"per":["SITEID","TYPE"],
	"values": {
	"TYPE": ["Randomized","Screened"]
	}
	}
	],
	"color_by":"TYPE",
	"colors":["#2b8cbe","#a6bddb","black"],
	"legend":{
	"label":""
	}
	}

	var instanceTL = webCharts.createChart(dataElementTL+" .gg-dash-item-content", settingsTL)
	instanceTL.on("layout",function(){
	console.log(this)
	})
	instanceTL.on("resize",function(){
	//modify legend to include totals
	var total_rand = d3.sum(this.filtered_data.filter(function(d){return d.TYPE=="Randomized"}),function(d){return d.VALUE});
	var total_scr = d3.sum(this.filtered_data.filter(function(d){return d.TYPE=="Screened"}),function(d){return d.VALUE});

	this.legend.selectAll(".legend-label").filter(function(f){return f.label === "Randomized"})
	.text("Randomized ("+total_rand+")")
	this.legend.selectAll(".legend-label").filter(function(f){return f.label === "Screened"})
	.text("Screened ("+total_scr+")");

	//add tooltips to y axis labels
	var chart=this
	var ticks = this.svg.select(".y.axis").selectAll(".tick").append("title")
	.text(function(d){
	var match = chart.filtered_data.filter(function(f){return f["LABEL"] === d})[0];
	return match["MOUSEOVER"];
	});
	});

	d3.csv(dataPathTL, function(e,d){
	instanceTL.init(d);
	})


	//////////////////////
	// Top Middle Panel //
	//////////////////////

	var dataElementTM = ".gg-dash-item.top.middle";
	var dataPathTM = "sample_VIS.csv"
	var settingsTM = {
	"resizable":false,
	"width":single_width,
	"height":single_height,
	"margin":margins,
	"y":{
	"type": "linear",
	"behavior": "firstfilter"
	},
	"x":{
	"column":"AVISITAS",
	"type": "ordinal",
	"label":"",
	"order":visit_order
	},
	"marks":[
	{
	"arrange":"stacked",
	"split":"CAT",
	"type":"bar",
	"per":["AVISITAS"],
	"summarizeY":"percent",
	"tooltip":"$y"
	}
	],
	"color_by":"CAT",
	"colors":["#e34a33",'#fc8d59','rgb(102,194,165)',"#fecc5c",'rgb(43,131,186)'],
	"legend":{
	"label":"",
	"order": ["Missed", "Out of Window", "In Window", "Overdue", "Expected"]
	}
	}

	var controlsTM = webCharts.createControls(dataElementTM+" .gg-dash-item-title",
	{
	location: "top",
	inputs: [
	{type: "subsetter", value_col: "SITENAME", label: "Site"},
	{label: "", type:"radio", option: "marks[0].summarizeY", values: ["percent", "count"], relabels: ["%", "N"]}
	]
	}
	);

	var instanceTM = webCharts.createChart(dataElementTM+" .gg-dash-item-content", settingsTM, controlsTM)

	d3.csv(dataPathTM, function(e,d){
	instanceTM.init(d);
	})


	/////////////////////
	// Top Right Panel //
	/////////////////////

	var dataElementTR = ".gg-dash-item.top.right";
	var dataPathTR = "sample_QUERY.csv"
	var settingsTR = {
	"resizable":false,
	"width":single_width,
	"height":single_height,
	"margin":margins,
	"y":{
	"type": "linear",
	"behavior": "firstfilter"
	},
	"x":{
	"column":"SITEID",
	"type": "ordinal",
	"label":"",
	"order":site_order
	},
	"marks":[
	{
	"arrange":"stacked",
	"split":"CAT",
	"type":"bar",
	"per":["SITEID"],
	"summarizeY":"percent",
	"tooltip":"$y"
	}
	],
	"color_by":"CAT",
	"colors":['rgb(102,194,165)', "#fecc5c", "#e34a33"],
	"legend":{
	"label":"",
	"order": ["Resolved", "Outstanding <= 90 days", "Outstanding > 90 days"]
	}
	}

	var controlsTR = webCharts.createControls(dataElementTR+" .gg-dash-item-title",
	{
	location: "top",
	inputs: [
	{label: "", type:"radio", option: "marks[0].summarizeY", values: ["percent", "count"], relabels: ["%", "N"]}
	]
	}
	);

	var instanceTR = webCharts.createChart(dataElementTR+" .gg-dash-item-content", settingsTR, controlsTR)

	d3.csv(dataPathTR, function(e,d){
	instanceTR.init(d);
	})

	///////////////////////
	// Bottom Left Panel //
	///////////////////////

	var dataElementBL = ".gg-dash-item.bottom.left";
	var dataPathBL = "sample_ENROLL.csv"
	var settingsBL = {
	"resizable":false,
	"width":single_width,
	"height":single_height,
	"margin":margins,
	"y":{
	"column":"VALUE",
	"type": "linear",
	"behavior": "firstfilter",
	"label":""
	},
	"x":{
	"column":"DATE",
	"type": "time",
	"label":"",
	"format":"%b-%y"
	},
	"marks":[
	{
	"arrange":"stacked",
	"type":"line",
	"per":["TYPE"],
	"summarizeY":"sum",
	"tooltip":"$y"
	}
	],
	"date_format":"%d-%b-%y",
	"color_by":"TYPE",
	"colors":["#2b8cbe","#a6bddb" ],
	"legend":{
	"label":"",
	}
	}

	var controlsBL = webCharts.createControls(dataElementBL+" .gg-dash-item-title",
	{
	location: "top",
	inputs: [
	{type: "subsetter", value_col: "SITENAME", label: "Site"}
	]
	}
	);

	var instanceBL = webCharts.createChart(dataElementBL+" .gg-dash-item-content", settingsBL, controlsBL)
	d3.csv(dataPathBL, function(e,d){
	instanceBL.init(d);
	})


	/////////////////////////
	// Bottom Middle Panel //
	/////////////////////////
	var dataElementBM = ".gg-dash-item.bottom.middle";
	var dataPathBM = "sample_DEVS.csv"
	var settingsBM = {
	"resizable":false,
	"width":single_width,
	"height":single_height,
	"margin":margins,
	"y":{
	"type": "linear",
	"behavior": "firstfilter"
	},
	"x":{
	"column":"SITEID",
	"type": "ordinal",
	"label":"",
	"order":site_order,
	"domain":site_order
	},
	"marks":[
	{
	"arrange":"stacked",
	"split":"CAT",
	"type":"bar",
	"per":["SITEID"],
	"summarizeY":"count",
	"tooltip":"$y"
	}
	],
	"color_by":"CAT",
	"colors":['rgb(254,229,217)','rgb(252,174,145)','rgb(251,106,74)','rgb(222,45,38)','rgb(165,15,21)'],
	"legend":{
	"label":"",
	"order": ["1-3 mon.", "4-6 mon.", "7-9 mon.", "10-12 mon.", "> 1 yr."].reverse()
	}
	}


	var instanceBM = webCharts.createChart(dataElementBM+" .gg-dash-item-content", settingsBM)
	d3.csv(dataPathBM, function(e,d){
	instanceBM.init(d);
	})

	////////////////////////
	// Bottom Right Panel //
	////////////////////////
	var dataElementBR = ".gg-dash-item.bottom.right";
	var dataPathBR = "sample_FORMS.csv"
	var settingsBR = {
	"resizable":false,
	"width":single_width,
	"height":single_height,
	"margin":margins,
	"y":{
	"type": "linear",
	"behavior": "firstfilter"
	},
	"x":{
	"column":"SITEID",
	"type": "ordinal",
	"label":"",
	"order":site_order,
	"domain":site_order
	},
	"marks":[
	{
	"arrange":"stacked",
	"split":"CAT",
	"type":"bar",
	"per":["SITEID"],
	"summarizeY":"count",
	"tooltip":"$y"
	}
	],
	"color_by":"CAT",
	"colors":['rgb(102,194,165)', "#fecc5c", "#e34a33"],
	"legend":{
	"label":"",
	"order": ["Received", "Outstanding <= 90 days", "Outstanding > 90 days"]
	}
	}

	var controlsBR = webCharts.createControls(dataElementBR+" .gg-dash-item-title",
	{
	location: "top",
	inputs: [
	{label: "", type:"radio", option: "marks[0].summarizeY", values: ["percent", "count"], relabels: ["%", "N"]}
	]
	}
	);

	var instanceBR = webCharts.createChart(dataElementBR+" .gg-dash-item-content", settingsBR, controlsBR)
	d3.csv(dataPathBR, function(e,d){
	instanceBR.init(d);
	})