olgabot · April 7, 2013 20:19
diff --git a/_.md b/_.md
diff --git a/config.json b/config.json
 {"description":"fastqc tests donuts","endpoint":"","display":"div","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"metadata.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"fastqc_tests.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}
diff --git a/fastqc_tests.css b/fastqc_tests.css
 #display {
  font: 10px sans-serif;
  overflow: scroll;
  background-color: #fff;
 }

 svg {
  padding: 10px 0 0 10px;
 }

 .arc {
  stroke: #fff;
 }
diff --git a/inlet.js b/inlet.js
 var radius = 40,
    padding = 10;

 // Derived from "Sequential YlGnBu" set of ColorBrewer
 var r2Colors = d3.scale.ordinal()
    .domain(['PASS', 'WARN', 'FAIL', 'no_experiment', 'PASS', 'WARN', 'FAIL', 'no_experiment'])
    .range(['#2C7FB8', '#7FCDBB', '#EDF8B1', '#fff', '#2C7FB8', '#7FCDBB', '#EDF8B1', '#fff']);

 var r1Colors = r2Colors;

 var color = r2Colors;

 var test_names = {
    R1: [],
    R2: []
 };
 var test_names_array = [];

 //document.write(color)

 var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - radius / 2);

 // stolen from StackOverflow
 // http://stackoverflow.com/questions/4049847/initializing-an-array-with-a-single-value
 function initArray(length, value) {
    var arr = [],
        i = 0;
    arr.length = length;
    while (i < length) {
        arr[i++] = value;
    }
    return arr;
 }

 var slices = initArray(22, 100);
 //console.log('slices', slices)

 var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) {
    return d.slice;
 });

 var data = tributary.metadata;
 //d3.csv("metadata.csv", function (data) {

 //    console.log(JSON.stringify(data))

 d3.select("#display").selectAll("p")
    .data(data)
    .enter();

 data.forEach(function (d) {

    // Initialize the test_names variable by looping over the keys
    // if this is the first iteration of the loop
    if (test_names['R1'].length === 0) {
        for (var key in d) {
            if (/read\d_test\d+_/.test(key)) {
                if (/read1/.test(key)) {
                    test_names.R1.push(key);
                } else {
                    test_names.R2.push(key);
                }
            }
        }
        //            console.log("created test_names")
 //       console.log('test_names.R1', test_names.R1)
       test_names_array = [].concat(test_names.R2, test_names.R1);
    }
 
 //  console.log('test_names_array', test_names_array);

    if (d.read1_fastqc_report != "no_experiment") {
        d.read_colors = {
            "R2": r1Colors,
                'R1': r1Colors
        };
        d.links = {
            "R2": d.read2_fastqc_report,
                'R1': d.read1_fastqc_report
        };
        d.if_experiment = true;
        d.test_results = {};
        d.test_colors = [];
 		d.tests = [];
        var test = '';
 //        for (var read in test_names) {
            // The following prints, so the error must be after this
            // console.log('read', read)
 //        for( var read_ind in [0,1]){
 //          read = ['R2', 'R1'][read_ind];
 //          console.log('read', read);
          for( var i = 0; i < test_names.R2.length; i++ ){
 //            for (var i = 0; i < test_names[read].length; i++) {
                test = test_names.R2[i];
                //              console.log(test);
                d.test_results[test] = d[test];
                d.test_colors.push(r1Colors(d[test]));
              d.tests.push({color: r1Colors(d[test]), result: d[test], 
                            slice:100, test_name: test});
          }
      i = test_names.R1.length;
                while(i--){
 //for( i = 0; i < test_names[read].length; i++ ){

 //            for (var i = 0; i < test_names[read].length; i++) {
                test = test_names.R1[i];
                //              console.log(test);
                d.test_results[test] = d[test];
                d.test_colors.push(r1Colors(d[test]));
              d.tests.push({color: r1Colors(d[test]), result: d[test], 
                            slice:100, test_name: test});
          }
 //      console.log(d.tests);
          
 //        }
 //            }

 //        }
 /*      console.log(color.domain().map(function(result){
        return {result: result, slice:10 }
      }));
      */
      
      
 /*      console.log('in data.forEach, d.reads:', d.reads);*/
        //      console.log(d.test_results);
        //      console.log(d.test_colors);
        // The following appeared 48 times, so the error must appear after this
        // console.log('after d.test_results')
        // 'v' is one of test_names
        // 'n' is one of R1, R2
        /*
      d.test_colors = [];
      for( var read in test_names){
        for( var test in test_names[read]){
          
        }
      }
 */

        // Attempt at making d.test_colors via a funciton
        /*        d.test_colors = function (n, v) {
            //              console.log('v:', v);
            if (n === 'R1') {
                return r1Colors(d.test_results.R1[v]);
            } else {
                return r2Colors(d.test_results.R2[v]);
            }
        };
 */
        // The following appeared 48 times, so the error must appear after this
        //          console.log('after d.test_colors')
    } else {
        d.read_colors = {
            "R1": '#FFFFFF',
                "R2": '#FFFFFF'
        };
        d.links = {
            "R2": "#",
                'R1': "#"
        };
        d.if_experiment = false;
        // 22 is the number of FASTQC tests ... this should probably NOT be hard coded
        d.test_colors = initArray(22, '#FFFFFF');
        d.test_results = initArray(22, 'no_experiment');
      d.tests = initArray(22, {color: '#FFFFFF', result: 'no_experiment', 
                               slice:100, test_name:'no_experiment'});
 /*      for( var j = 0 ; j < test_names_array.length ; j++ ){
       test_name = test_names_array[j];
        d.tests[j][test_name] = 'no_experiment';
      }
      */
      console.log(d.tests);
    }
   //slices: d.slices, color: d.test_colors};
 /*  d.reads = function(i){
 //    console.log('in d.reads', d);
 //    console.log('in d.reads, i', d.test_results[i]);
    return {slice:d.slices[i], color:d.test_colors[i]};
      }/*
 //  console.log('in data.forEach', d.reads(12));
 /*  d.reads = color.domain().map(function(result){
        return {result: result, slice: 10 }
        
      });*/
    // The following appeared 96 times, for the 96 cells in the 8x12 plate
    //console.log('about to do d.reads')
    //     = function () {
    //          console.log('read_name' + read_name);
    /*        var get_short_name = function (name) {
            var names = {};
            names["Read 1"] = "R1";
            names["Read 2"] = "R2";
            return names[name];
        };
 //        console.log('in d.reads', d);
        //           return {name: name, population: 50}; 

        var test_name = function (read_name) {
            return test_names[get_short_name(name)];
        };
 */

    //          console.log(test_name);
    //        console.log('test_results', d.test_results);
    //      console.log('test_colors', d.test_colors);
    //        console.log('read_name', read_name);
    //        return {
    d.slices = slices;
 //  console.log('d.slices', d.slices);
 /*    d.reads = {
        'name': d.short_id, ///read_name,
        'population': slices, //10,
        'if_experiment': d.if_experiment,
        // population: [10,10,10,10,10,10,10,10,10,10,10],
        //            short_name: get_short_name(read_name),
        'test_names': test_name,
        //            test_results: d.test_results,
        'colors': d.test_colors, //[].concat(d.test_colors.R2, d.test_colors.R1),
        'links': d.links
    };*/
    //        };
    //    };

    //    console.log(d.reads('Read 1'));
 });


 var legendR1 = d3.select("#display").append("svg")
    .attr("class", "legend")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .selectAll("g")
    .data(r1Colors.domain().slice())
    .enter().append("g")
    .attr("transform", function (d, i) {
    return "translate(0," + i * 20 + ")";
 });

 legendR1.append("rect")
    .attr("width", 18)
    .attr("height", 18)
    .style("fill", r1Colors);

 legendR1.append("text")
    .attr("x", 24)
    .attr("y", 9)
    .attr("dy", ".35em")
    .text(function (d) {
    return d;
 });


 d3.select("#display").append("p").text("");
 var svg = d3.select("#display").selectAll(".pie")
    .data(data)
    .enter().append("svg")
    .attr("class", "pie")
    .attr("width", radius * 2)
    .attr("height", radius * 2)
    .append("g")
    .attr("transform", function (d, i) {
    return "translate(" + radius + "," + radius + ")"
 });


 svg.selectAll(".arc")
 	.data(function(d){
      return pie(d.tests); })
    .enter().append('path')
    .attr('class', 'arc')
    .attr('d', arc)
    .style('fill', function (d,i) {
    return d.data.color;
 });

 /*      function (d) {
        console.log("in svg selectAll arc, d:", d);
      console.log('d.reads', d.reads());
    return pie(d.reads);
 })
    .enter().append("path")
    .attr("class", "arc")
    .attr("d", arc)
    .attr('xlink:href',
          
 function (d) {
 	console.log('in xlink:href');
  return d.data.links[d.data.short_name];
 })
    .on('click',

 function (d) {
    window.open(d.data.links[d.data.short_name], "_blank");
 })
    .style("fill", function (d, i) {
    //         console.log(d.data);
    //          console.log(i);
    //         console.log(d.data.short_name);
    //          console.log(test_names);
    //          return d.data.colors(d.data.short_name, d.test_names(d.data.name));
    return '#A6CEE3'; //d.data.colors(d.data.short_name, test_names[i]);
 });
 */

 svg.append("text")
    .attr("dy", ".35em")
    .style("text-anchor", "middle")
    .text(function (d) {
    return d.short_id;
 });


 svg.append("text")
    .attr("dx", 25)
    .attr("dy", "-35")
    .style("text-anchor", "right")
    .text(function (d) {
    if (d.if_experiment) {
        return 'R2'
    } else {
        return " "
    }
 });

 svg.append("text")
    .attr("dx", -35)
    .attr("dy", "-35")
    .style("text-anchor", "left")
    .text(function (d) {
    if (d.if_experiment) {
        return 'R1'
    } else {
        return " "
    }
 });


 // $(".arc").onclick(function(){transition().duration(1000)});

 $(".arc").tipsy({
    gravity: $.fn.tipsy.autoNS,
    html: true,
    title: function () {
        var d = this.__data__//, c = colors(d.i);
      console.log('in tipsy, d', d)
      return d.data.test_name;
 //        return 'Click here to see the FASTQC report for';
    }
 });
diff --git a/metadata.csv b/metadata.csv
	#display {
	font: 10px sans-serif;
	overflow: scroll;
	background-color: #fff;
	}

	svg {
	padding: 10px 0 0 10px;
	}

	.arc {
	stroke: #fff;
	}
	var radius = 40,
	padding = 10;

	// Derived from "Sequential YlGnBu" set of ColorBrewer
	var r2Colors = d3.scale.ordinal()
	.domain(['PASS', 'WARN', 'FAIL', 'no_experiment', 'PASS', 'WARN', 'FAIL', 'no_experiment'])
	.range(['#2C7FB8', '#7FCDBB', '#EDF8B1', '#fff', '#2C7FB8', '#7FCDBB', '#EDF8B1', '#fff']);

	var r1Colors = r2Colors;

	var color = r2Colors;

	var test_names = {
	R1: [],
	R2: []
	};
	var test_names_array = [];

	//document.write(color)

	var arc = d3.svg.arc()
	.outerRadius(radius)
	.innerRadius(radius - radius / 2);

	// stolen from StackOverflow
	// http://stackoverflow.com/questions/4049847/initializing-an-array-with-a-single-value
	function initArray(length, value) {
	var arr = [],
	i = 0;
	arr.length = length;
	while (i < length) {
	arr[i++] = value;
	}
	return arr;
	}

	var slices = initArray(22, 100);
	//console.log('slices', slices)

	var pie = d3.layout.pie()
	.sort(null)
	.value(function (d) {
	return d.slice;
	});

	var data = tributary.metadata;
	//d3.csv("metadata.csv", function (data) {

	// console.log(JSON.stringify(data))

	d3.select("#display").selectAll("p")
	.data(data)
	.enter();

	data.forEach(function (d) {

	// Initialize the test_names variable by looping over the keys
	// if this is the first iteration of the loop
	if (test_names['R1'].length === 0) {
	for (var key in d) {
	if (/read\d_test\d+_/.test(key)) {
	if (/read1/.test(key)) {
	test_names.R1.push(key);
	} else {
	test_names.R2.push(key);
	}
	}
	}
	// console.log("created test_names")
	// console.log('test_names.R1', test_names.R1)
	test_names_array = [].concat(test_names.R2, test_names.R1);
	}

	// console.log('test_names_array', test_names_array);

	if (d.read1_fastqc_report != "no_experiment") {
	d.read_colors = {
	"R2": r1Colors,
	'R1': r1Colors
	};
	d.links = {
	"R2": d.read2_fastqc_report,
	'R1': d.read1_fastqc_report
	};
	d.if_experiment = true;
	d.test_results = {};
	d.test_colors = [];
	d.tests = [];
	var test = '';
	// for (var read in test_names) {
	// The following prints, so the error must be after this
	// console.log('read', read)
	// for( var read_ind in [0,1]){
	// read = ['R2', 'R1'][read_ind];
	// console.log('read', read);
	for( var i = 0; i < test_names.R2.length; i++ ){
	// for (var i = 0; i < test_names[read].length; i++) {
	test = test_names.R2[i];
	// console.log(test);
	d.test_results[test] = d[test];
	d.test_colors.push(r1Colors(d[test]));
	d.tests.push({color: r1Colors(d[test]), result: d[test],
	slice:100, test_name: test});
	}
	i = test_names.R1.length;
	while(i--){
	//for( i = 0; i < test_names[read].length; i++ ){

	// for (var i = 0; i < test_names[read].length; i++) {
	test = test_names.R1[i];
	// console.log(test);
	d.test_results[test] = d[test];
	d.test_colors.push(r1Colors(d[test]));
	d.tests.push({color: r1Colors(d[test]), result: d[test],
	slice:100, test_name: test});
	}
	// console.log(d.tests);

	// }
	// }

	// }
	/* console.log(color.domain().map(function(result){
	return {result: result, slice:10 }
	}));
	*/


	/* console.log('in data.forEach, d.reads:', d.reads);*/
	// console.log(d.test_results);
	// console.log(d.test_colors);
	// The following appeared 48 times, so the error must appear after this
	// console.log('after d.test_results')
	// 'v' is one of test_names
	// 'n' is one of R1, R2
	/*
	d.test_colors = [];
	for( var read in test_names){
	for( var test in test_names[read]){

	}
	}
	*/

	// Attempt at making d.test_colors via a funciton
	/* d.test_colors = function (n, v) {
	// console.log('v:', v);
	if (n === 'R1') {
	return r1Colors(d.test_results.R1[v]);
	} else {
	return r2Colors(d.test_results.R2[v]);
	}
	};
	*/
	// The following appeared 48 times, so the error must appear after this
	// console.log('after d.test_colors')
	} else {
	d.read_colors = {
	"R1": '#FFFFFF',
	"R2": '#FFFFFF'
	};
	d.links = {
	"R2": "#",
	'R1': "#"
	};
	d.if_experiment = false;
	// 22 is the number of FASTQC tests ... this should probably NOT be hard coded
	d.test_colors = initArray(22, '#FFFFFF');
	d.test_results = initArray(22, 'no_experiment');
	d.tests = initArray(22, {color: '#FFFFFF', result: 'no_experiment',
	slice:100, test_name:'no_experiment'});
	/* for( var j = 0 ; j < test_names_array.length ; j++ ){
	test_name = test_names_array[j];
	d.tests[j][test_name] = 'no_experiment';
	}
	*/
	console.log(d.tests);
	}
	//slices: d.slices, color: d.test_colors};
	/* d.reads = function(i){
	// console.log('in d.reads', d);
	// console.log('in d.reads, i', d.test_results[i]);
	return {slice:d.slices[i], color:d.test_colors[i]};
	}/*
	// console.log('in data.forEach', d.reads(12));
	/* d.reads = color.domain().map(function(result){
	return {result: result, slice: 10 }

	});*/
	// The following appeared 96 times, for the 96 cells in the 8x12 plate
	//console.log('about to do d.reads')
	// = function () {
	// console.log('read_name' + read_name);
	/* var get_short_name = function (name) {
	var names = {};
	names["Read 1"] = "R1";
	names["Read 2"] = "R2";
	return names[name];
	};
	// console.log('in d.reads', d);
	// return {name: name, population: 50};

	var test_name = function (read_name) {
	return test_names[get_short_name(name)];
	};
	*/

	// console.log(test_name);
	// console.log('test_results', d.test_results);
	// console.log('test_colors', d.test_colors);
	// console.log('read_name', read_name);
	// return {
	d.slices = slices;
	// console.log('d.slices', d.slices);
	/* d.reads = {
	'name': d.short_id, ///read_name,
	'population': slices, //10,
	'if_experiment': d.if_experiment,
	// population: [10,10,10,10,10,10,10,10,10,10,10],
	// short_name: get_short_name(read_name),
	'test_names': test_name,
	// test_results: d.test_results,
	'colors': d.test_colors, //[].concat(d.test_colors.R2, d.test_colors.R1),
	'links': d.links
	};*/
	// };
	// };

	// console.log(d.reads('Read 1'));
	});


	var legendR1 = d3.select("#display").append("svg")
	.attr("class", "legend")
	.attr("width", radius * 2)
	.attr("height", radius * 2)
	.selectAll("g")
	.data(r1Colors.domain().slice())
	.enter().append("g")
	.attr("transform", function (d, i) {
	return "translate(0," + i * 20 + ")";
	});

	legendR1.append("rect")
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", r1Colors);

	legendR1.append("text")
	.attr("x", 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.text(function (d) {
	return d;
	});


	d3.select("#display").append("p").text("");
	var svg = d3.select("#display").selectAll(".pie")
	.data(data)
	.enter().append("svg")
	.attr("class", "pie")
	.attr("width", radius * 2)
	.attr("height", radius * 2)
	.append("g")
	.attr("transform", function (d, i) {
	return "translate(" + radius + "," + radius + ")"
	});


	svg.selectAll(".arc")
	.data(function(d){
	return pie(d.tests); })
	.enter().append('path')
	.attr('class', 'arc')
	.attr('d', arc)
	.style('fill', function (d,i) {
	return d.data.color;
	});

	/* function (d) {
	console.log("in svg selectAll arc, d:", d);
	console.log('d.reads', d.reads());
	return pie(d.reads);
	})
	.enter().append("path")
	.attr("class", "arc")
	.attr("d", arc)
	.attr('xlink:href',

	function (d) {
	console.log('in xlink:href');
	return d.data.links[d.data.short_name];
	})
	.on('click',

	function (d) {
	window.open(d.data.links[d.data.short_name], "_blank");
	})
	.style("fill", function (d, i) {
	// console.log(d.data);
	// console.log(i);
	// console.log(d.data.short_name);
	// console.log(test_names);
	// return d.data.colors(d.data.short_name, d.test_names(d.data.name));
	return '#A6CEE3'; //d.data.colors(d.data.short_name, test_names[i]);
	});
	*/

	svg.append("text")
	.attr("dy", ".35em")
	.style("text-anchor", "middle")
	.text(function (d) {
	return d.short_id;
	});


	svg.append("text")
	.attr("dx", 25)
	.attr("dy", "-35")
	.style("text-anchor", "right")
	.text(function (d) {
	if (d.if_experiment) {
	return 'R2'
	} else {
	return " "
	}
	});

	svg.append("text")
	.attr("dx", -35)
	.attr("dy", "-35")
	.style("text-anchor", "left")
	.text(function (d) {
	if (d.if_experiment) {
	return 'R1'
	} else {
	return " "
	}
	});


	// $(".arc").onclick(function(){transition().duration(1000)});

	$(".arc").tipsy({
	gravity: $.fn.tipsy.autoNS,
	html: true,
	title: function () {
	var d = this.__data__//, c = colors(d.i);
	console.log('in tipsy, d', d)
	return d.data.test_name;
	// return 'Click here to see the FASTQC report for';
	}
	});