Glyphs

by Eamonn Maguire

HTML

<h3>Glyphs</h3>

<div...

CSS

body {
    background-color:#2c3e50;
    color: white;
}
pre {
    display:none;
}
svg .foreground path {
    fill: none;
    stroke: #F15A29;
    stroke-opacity: .7;
}
.axis path, .axis line {
    fill: none;
    stroke:white;
    shape-rendering: crispEdges;
}
.brush .extent {
    fill-opacity: .1;
    stroke: #fff;
    shape-rendering: crispEdges;
}

text {
    fill:white;
    font-family: 'Sans serif';
    font-size: 10px;
}

JavaScript

/**
 * Created by eamonnmaguire on 20/11/15.
 */

var gene_glyphs = (function () {

    var cleanup_value = function (string) {
        // force to be a string so we can use string functions.
        string += '';
        string = string.replace(/^[[\-|\+]*[\*\s]+/gi, "");
        return string.replace(/[^a-zA-Z0-9]+/gi, "");
    };

    var legend_toggle = function (scope, class_name) {
        if (d3.select(scope).style('opacity') == 0.5) {
            d3.select(scope).transition('elastic').duration(300).style('opacity', 1)
            d3.selectAll(class_name).transition('elastic').duration(300).style('opacity', 0.5);
        } else {
            d3.select(scope).transition('elastic').duration(300).style('opacity', 0.5)
            d3.selectAll(class_name).transition('elastic').duration(300).style('opacity', 0);
        }
    };

    return {

        create_glyph_visualization: function (placement, data_url, options) {

            d3.select(placement).html("");

            var svg = d3.select(placement).append("svg").attr("width", options.width).attr("height", options.height).append("g");

            var data = d3.csv.parse(d3.select("pre").text());

            var genes = d3.nest().key(function (d) {
                return d.gene;
            }).entries(data);

            var yScoreScale = d3.scale.linear().domain(d3.extent(data, function (d) {
                return +d.score;
            })).range([90, 10]);

            var xGeneScale = d3.scale.ordinal().domain(["GENE_1", "GENE_2", "GENE_3", "GENE_4", "GENE_5"])
                .rangePoints([40, options.width - 100]);

            var xDrugScale = d3.scale.ordinal().domain(["DRUG_1", "DRUG_2", "DRUG_3", "DRUG_4", "DRUG_5"])
                .rangePoints([10, 90]);

            var cellColorScale = d3.scale.ordinal().range(["#26b99a", "#d25627", "#3b97d3"]);

            var doseScale = d3.scale.log().domain(d3.extent(data, function (d) {
                return +d.dose;
            })).range([3, 10]);

...