olgabot · April 7, 2013 20:20
diff --git a/_.md b/_.md
diff --git a/config.json b/config.json
 {"description":"fastqc tests heatmap","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;
 }

 text.active {
  fill: red;
 }
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 i = 0;
 var test = '';

 var color = r2Colors;

 var test_names = {
    R1: [],
    R2: []
 };
 var test_names_array = [];
 //var sample_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();

 short_ids = [];

 var matrix = [];

 data.forEach(function (d) {
  
  short_ids.push(d.short_id);

    // 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.R1, test_names.R2);
      
      // Initialize data matrix
      // It doesn't matter that we use the length of the array vs
      // The two arrays in the object test_names since we just
      // need the number
      for( i = 0; i < test_names_array.length; i++ ){
 		  matrix[i] = []
 		}
    }
 
 //  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( 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, links:d.links});
          }

    } 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(test_names_array.length, '#FFFFFF');
        d.test_results = initArray(test_names_array.length, 'no_experiment');
      d.tests = initArray(test_names_array.length, {color: '#FFFFFF', result: 'no_experiment', 
                               slice:100, test_name:'no_experiment', links:d.links});
    }
  
  for( i = 0; i < test_names.R1.length ; i++){
    test = test_names.R1[i];
    matrix[i].push(d[test]);
  }
    for( i = 0; i < test_names.R2.length ; i++){
      j =i+test_names.R1.length
    test = test_names.R2[i];
    matrix[j].push(d[test]);
  }
    d.slices = slices;
 });


 var column_names = short_ids,
    ncol = column_names.length,
    row_names = test_names,
    nrow = row_names.length;


 // Begin heatmap code!


 var margin = {top: 10, right: 0, bottom: 10, left: 80},
    cell_size = 25,
    width = short_ids.length*cell_size,
    height = test_names_array.length*cell_size;

 var legendR1 = d3.select("#display").append("svg")
    .attr("class", "legend")
    .attr("width", radius * 3)
    .attr("height", radius * 2.5)
 	.style("margin-left", +margin.left + "px")
    .selectAll("g")
    .data(r1Colors.domain().slice())
    .enter().append("g")
    .attr("transform", function (d, i) {
    return "translate(1," + (10 + 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').append('svg')
    .attr('width', width+margin.left + margin.right)
 	.attr("height", height + margin.top + margin.bottom)
    .style("margin-left", +0 + "px")
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


 // Hack to make this work in Tributary
 //var svg = d3.select("#display").append("rect")
 svg.append("rect")
      .attr("class", "background")
      .attr("width", width)
      .attr("height", height);

 var x = d3.scale.ordinal().domain(short_ids).rangeBands([0, width]),
    y = d3.scale.ordinal().domain(test_names_array).rangeBands([0, height]),
    z = d3.scale.linear().domain([0, 4]).clamp(true);
 //    c = d3.scale.category10().domain(d3.range(10));

 c = r1Colors;
 //console.log('c',c);

 //console.log(x('read1_test3_sequence_quality'));

 var row = svg.selectAll(".row")
      .data(matrix)
    .enter().append("g")
      .attr("class", "row")
      .attr("transform", function(d, i) { 
 //        console.log('in transform d', d);
 //        console.log('in transform x(test_names_array[i])', x(test_names_array[i]));
        return "translate(0," + x(test_names_array[i]) + ")"; })
      .each(row);

 row.append("line")
      .attr("x2", width);

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

 //console.log(short_ids[0]);

 // Along the left
  row.append("text")
      .attr("x", 0)
      .attr("y", x.rangeBand() / 2)
      .attr("dy", ".32em")
      .attr("text-anchor", "start")
      .style('position','dynamic')
      .text(function(d, i) { return test_names_array[i]; })
      .on('scroll', function(d,x){
       console.log(d)
  });

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

  var column = svg.selectAll(".column")
      .data(short_ids)
    .enter().append("g")
      .attr("class", "column")
      .attr("transform", function(d, i) { 
        return "translate(" + x(short_ids[i]) + ", -30)"; });

  column.append("line")
      .attr("x1", -width);

 // Along the left
  column.append("text")
      .attr("x", x.rangeBand()/2)
      .attr("y", x.rangeBand())
      .attr("dy", ".32em")
      .attr("text-anchor", "middle")
      .style('position','fixed')
      .text(function(d, i) { 
 //        a = i*12;
 //        b = i*12 + 12;
        return d;
 //        console.log('column', d.length, i);
 //        return short_ids[i]; 
      });

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

  function row(row) {
    var cell = d3.select(this).selectAll(".cell")
        .data(function(d) { 
 //          console.log('in function row, data, row.filter, d', d.length);
          return d; })
      .enter().append("rect")
        .attr("class", "cell")
        .attr("x", function(d,i) { 
 //          console.log('in function row, attr x, d', d)
          return x(short_ids[i]); })
        .attr("width", x.rangeBand())
        .attr("height", x.rangeBand())
 //        .style("fill-opacity", function(d) { return z(d); })
        .style("fill", function(d,i) 
               { 
 //                 console.log(d,i);
 //                 console.log(c(d));
                 return c(d); })
        .on("mouseover", mouseover)
        .on("mouseout", mouseout);
  }

  function mouseover(p) {
    d3.selectAll(".row text").classed("active", function(d, i) { 
 //      console.log('p', p)
      return i == p.y; });
    d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
  }

  function mouseout() {
    d3.selectAll("text").classed("active", false);
  }


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;
	}

	text.active {
	fill: red;
	}
	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 i = 0;
	var test = '';

	var color = r2Colors;

	var test_names = {
	R1: [],
	R2: []
	};
	var test_names_array = [];
	//var sample_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();

	short_ids = [];

	var matrix = [];

	data.forEach(function (d) {

	short_ids.push(d.short_id);

	// 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.R1, test_names.R2);

	// Initialize data matrix
	// It doesn't matter that we use the length of the array vs
	// The two arrays in the object test_names since we just
	// need the number
	for( i = 0; i < test_names_array.length; i++ ){
	matrix[i] = []
	}
	}

	// 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( 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, links:d.links});
	}

	} 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(test_names_array.length, '#FFFFFF');
	d.test_results = initArray(test_names_array.length, 'no_experiment');
	d.tests = initArray(test_names_array.length, {color: '#FFFFFF', result: 'no_experiment',
	slice:100, test_name:'no_experiment', links:d.links});
	}

	for( i = 0; i < test_names.R1.length ; i++){
	test = test_names.R1[i];
	matrix[i].push(d[test]);
	}
	for( i = 0; i < test_names.R2.length ; i++){
	j =i+test_names.R1.length
	test = test_names.R2[i];
	matrix[j].push(d[test]);
	}
	d.slices = slices;
	});


	var column_names = short_ids,
	ncol = column_names.length,
	row_names = test_names,
	nrow = row_names.length;


	// Begin heatmap code!


	var margin = {top: 10, right: 0, bottom: 10, left: 80},
	cell_size = 25,
	width = short_ids.length*cell_size,
	height = test_names_array.length*cell_size;

	var legendR1 = d3.select("#display").append("svg")
	.attr("class", "legend")
	.attr("width", radius * 3)
	.attr("height", radius * 2.5)
	.style("margin-left", +margin.left + "px")
	.selectAll("g")
	.data(r1Colors.domain().slice())
	.enter().append("g")
	.attr("transform", function (d, i) {
	return "translate(1," + (10 + 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').append('svg')
	.attr('width', width+margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.style("margin-left", +0 + "px")
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


	// Hack to make this work in Tributary
	//var svg = d3.select("#display").append("rect")
	svg.append("rect")
	.attr("class", "background")
	.attr("width", width)
	.attr("height", height);

	var x = d3.scale.ordinal().domain(short_ids).rangeBands([0, width]),
	y = d3.scale.ordinal().domain(test_names_array).rangeBands([0, height]),
	z = d3.scale.linear().domain([0, 4]).clamp(true);
	// c = d3.scale.category10().domain(d3.range(10));

	c = r1Colors;
	//console.log('c',c);

	//console.log(x('read1_test3_sequence_quality'));

	var row = svg.selectAll(".row")
	.data(matrix)
	.enter().append("g")
	.attr("class", "row")
	.attr("transform", function(d, i) {
	// console.log('in transform d', d);
	// console.log('in transform x(test_names_array[i])', x(test_names_array[i]));
	return "translate(0," + x(test_names_array[i]) + ")"; })
	.each(row);

	row.append("line")
	.attr("x2", width);

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

	//console.log(short_ids[0]);

	// Along the left
	row.append("text")
	.attr("x", 0)
	.attr("y", x.rangeBand() / 2)
	.attr("dy", ".32em")
	.attr("text-anchor", "start")
	.style('position','dynamic')
	.text(function(d, i) { return test_names_array[i]; })
	.on('scroll', function(d,x){
	console.log(d)
	});

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

	var column = svg.selectAll(".column")
	.data(short_ids)
	.enter().append("g")
	.attr("class", "column")
	.attr("transform", function(d, i) {
	return "translate(" + x(short_ids[i]) + ", -30)"; });

	column.append("line")
	.attr("x1", -width);

	// Along the left
	column.append("text")
	.attr("x", x.rangeBand()/2)
	.attr("y", x.rangeBand())
	.attr("dy", ".32em")
	.attr("text-anchor", "middle")
	.style('position','fixed')
	.text(function(d, i) {
	// a = i*12;
	// b = i*12 + 12;
	return d;
	// console.log('column', d.length, i);
	// return short_ids[i];
	});

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

	function row(row) {
	var cell = d3.select(this).selectAll(".cell")
	.data(function(d) {
	// console.log('in function row, data, row.filter, d', d.length);
	return d; })
	.enter().append("rect")
	.attr("class", "cell")
	.attr("x", function(d,i) {
	// console.log('in function row, attr x, d', d)
	return x(short_ids[i]); })
	.attr("width", x.rangeBand())
	.attr("height", x.rangeBand())
	// .style("fill-opacity", function(d) { return z(d); })
	.style("fill", function(d,i)
	{
	// console.log(d,i);
	// console.log(c(d));
	return c(d); })
	.on("mouseover", mouseover)
	.on("mouseout", mouseout);
	}

	function mouseover(p) {
	d3.selectAll(".row text").classed("active", function(d, i) {
	// console.log('p', p)
	return i == p.y; });
	d3.selectAll(".column text").classed("active", function(d, i) { return i == p.x; });
	}

	function mouseout() {
	d3.selectAll("text").classed("active", false);
	}