olgabot · March 18, 2013 16:12
diff --git a/_.md b/_.md
diff --git a/config.json b/config.json
 {"description":"FASTQC tests","endpoint":"","display":"svg","public":true,"require":[{"name":"d3","url":"http://d3js.org/d3.v3.min.js"},{"name":"jQuery","url":"http://code.jquery.com/jquery-1.9.1.min.js"}],"fileconfigs":{"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"inlet.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"fastqc_tests.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"metadata.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"fastqc.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,"editor_editor":{"coffee":false,"vim":false,"emacs":false,"width":600,"height":300,"hide":false}}
diff --git a/fastqc.css b/fastqc.css
 body {
  font: 10px sans-serif;
 }

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

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

 var color = d3.scale.ordinal()
    .range(["#3182bd", "#6baed6", "#ffffff"]);

 var test_colors_scale = d3.scale.ordinal()
    .range()

 var test_colors = {
    "PASS": "#31a354",
        "WARN": "#FD8D3C",
        "FAIL": "#E6550D"
 };

 var test_colors_colorbrewer = {
    // Derived from "Paired" set of ColorBrewer
    'R1': {
        "PASS": "#1F78B4", // Dark blue
        "WARN": "#FF7F00", // Dark orange
        "FAIL": "#E31A1C" // Dark red
    },
        'R2': {
        "PASS": "#A6CEE3", // Light blue
        "WARN": "#FDBF6F", // Light orange
        "FAIL": "#FB9A99" // Light red
    }
 }

 // Derived from "Paired" set of ColorBrewer
 var r1Colors = d3.scale.ordinal()
    .domain(['PASS', 'WARN', 'FAIL'])
    .range(['#1F78B4', '#FF7F00', '#E31A1C']);

 var r2Colors = d3.scale.ordinal()
    .domain(['PASS', 'WARN', 'FAIL'])
    .range(['#A6CEE3', '#FDBF6F', '#FB9A99']);


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

 //document.write(color)

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

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

 d3.csv("metadata.csv", function (data) {

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

    d3.select("body").selectAll("p")
        .data(data)
        .enter();
    // .append("p")
    // .text(data.read1);

    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")
        } //else {
        //     console.log("did not create test_names")
        // };

        if (d.read1_fastqc_report != "no_experiment") {
            d.read_colors = {
                "R2": color('Read 2'),
                'R1': color('Read 1')
            };
            d.links = {
                "R2": d.read2_fastqc_report,
                'R1': d.read1_fastqc_report
            };
            d.if_experiment = true;

            // 'v' is one of test_names
            // 'n' is one of R1, R2
            d.test_colors = function (n, v) {
                if (n === 'R1') {
                    return r1Colors(v);
                } else {
                    return r2Colors(v);
                }
            };
            // 	{
            // 	// 'v' is one of test_names
            // 	'R1': function(v, i){
            // 	    return test_colors[d[v]];
            // 	},
            // 	'R2': function(v, i){
            // 	    return test_colors[d[v]];
            // }
        } else {
            d.read_colors = {
                "R1": '#FFFFFF',
                    "R2": '#FFFFFF'
            };
            d.links = {
                "R2": "#",
                'R1': "#"
            };
            d.if_experiment = false;
        }

        d.reads = color.domain().map(function (name) {
            var get_short_name = function (name) {
                var names = {}
                names["Read 1"] = "R1";
                names["Read 2"] = "R2";
                return names[name];
            };
            //return {name: name, population: 50};   
            return {
                name: name,
                population: 50,
                short_name: get_short_name(name),
                test_names: test_names,
                colors: d.test_colors,
                links: d.links
            };
        });

        // window.console.log(d);
    });


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

    legend.append("rect")
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

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

    d3.select("body").append("p").text("");

    var svg = d3.select("body").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.reads);
    })
        .enter().append("path")
        .attr("class", "arc")
        .attr("d", arc)
        .attr('xlink:href',

    function (d) {
        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) {
        return 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", 28)
        .attr("dy", ".35em")
        .style("text-anchor", "right")
        .text(function (d) {
        if (d.if_experiment) {
            return 'R2'
        } else {
            return " "
        }
    });

    svg.append("text")
        .attr("dx", -38)
        .attr("dy", ".35em")
        .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);
            return 'Click here to see the FASTQC report for';
        }
    });

 });
diff --git a/metadata.csv b/metadata.csv
	body {
	font: 10px sans-serif;
	}

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

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

	var color = d3.scale.ordinal()
	.range(["#3182bd", "#6baed6", "#ffffff"]);

	var test_colors_scale = d3.scale.ordinal()
	.range()

	var test_colors = {
	"PASS": "#31a354",
	"WARN": "#FD8D3C",
	"FAIL": "#E6550D"
	};

	var test_colors_colorbrewer = {
	// Derived from "Paired" set of ColorBrewer
	'R1': {
	"PASS": "#1F78B4", // Dark blue
	"WARN": "#FF7F00", // Dark orange
	"FAIL": "#E31A1C" // Dark red
	},
	'R2': {
	"PASS": "#A6CEE3", // Light blue
	"WARN": "#FDBF6F", // Light orange
	"FAIL": "#FB9A99" // Light red
	}
	}

	// Derived from "Paired" set of ColorBrewer
	var r1Colors = d3.scale.ordinal()
	.domain(['PASS', 'WARN', 'FAIL'])
	.range(['#1F78B4', '#FF7F00', '#E31A1C']);

	var r2Colors = d3.scale.ordinal()
	.domain(['PASS', 'WARN', 'FAIL'])
	.range(['#A6CEE3', '#FDBF6F', '#FB9A99']);


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

	//document.write(color)

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

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

	d3.csv("metadata.csv", function (data) {

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

	d3.select("body").selectAll("p")
	.data(data)
	.enter();
	// .append("p")
	// .text(data.read1);

	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")
	} //else {
	// console.log("did not create test_names")
	// };

	if (d.read1_fastqc_report != "no_experiment") {
	d.read_colors = {
	"R2": color('Read 2'),
	'R1': color('Read 1')
	};
	d.links = {
	"R2": d.read2_fastqc_report,
	'R1': d.read1_fastqc_report
	};
	d.if_experiment = true;

	// 'v' is one of test_names
	// 'n' is one of R1, R2
	d.test_colors = function (n, v) {
	if (n === 'R1') {
	return r1Colors(v);
	} else {
	return r2Colors(v);
	}
	};
	// {
	// // 'v' is one of test_names
	// 'R1': function(v, i){
	// return test_colors[d[v]];
	// },
	// 'R2': function(v, i){
	// return test_colors[d[v]];
	// }
	} else {
	d.read_colors = {
	"R1": '#FFFFFF',
	"R2": '#FFFFFF'
	};
	d.links = {
	"R2": "#",
	'R1': "#"
	};
	d.if_experiment = false;
	}

	d.reads = color.domain().map(function (name) {
	var get_short_name = function (name) {
	var names = {}
	names["Read 1"] = "R1";
	names["Read 2"] = "R2";
	return names[name];
	};
	//return {name: name, population: 50};
	return {
	name: name,
	population: 50,
	short_name: get_short_name(name),
	test_names: test_names,
	colors: d.test_colors,
	links: d.links
	};
	});

	// window.console.log(d);
	});


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

	legend.append("rect")
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

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

	d3.select("body").append("p").text("");

	var svg = d3.select("body").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.reads);
	})
	.enter().append("path")
	.attr("class", "arc")
	.attr("d", arc)
	.attr('xlink:href',

	function (d) {
	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) {
	return 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", 28)
	.attr("dy", ".35em")
	.style("text-anchor", "right")
	.text(function (d) {
	if (d.if_experiment) {
	return 'R2'
	} else {
	return " "
	}
	});

	svg.append("text")
	.attr("dx", -38)
	.attr("dy", ".35em")
	.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);
	return 'Click here to see the FASTQC report for';
	}
	});

	});