created by http://livecoding.io

README.md

View this code at http://livecoding.io/5188778

options.json

{
    "libraries": [
        "d3"
    ],
    "mode": "javascript",
    "layout": "fullscreen mode (vertical)",
    "resolution": "reset"
}

water.css

body {
  font: 10px sans-serif;
}

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

.arc {
  stroke: #fff;
}

water.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(r1Colors('WARN'));

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("https://gist.github.com/olgabot/5188421#file-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);
                    }
                }
            }
            document.write("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(d[v]);
                } else {
                    return r2Colors(d[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 '#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", 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';
        }
    });

});

water.json

null