diff options
3 files changed, 99 insertions, 70 deletions
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee index 6bdb3ac6..b7d3c179 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee +++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee @@ -1,23 +1,25 @@ $ -> - class Manhattan_Plot - - constructor: -> + constructor: (@plot_height, @plot_width) -> @qtl_results = js_data.qtl_results @chromosomes = js_data.chromosomes + + #@plot_height = 500 + #@plot_width = 100 + @total_length = 0 + @max_chr = @get_max_chr() - @cumulative_chr_lengths = @get_cumulative_chr_lengths() - - @plot_height = 500 - @plot_width = 1000 + @scaled_chr_lengths = @get_chr_lengths() + console.log("scaled_chr_lengths is", @scaled_chr_lengths) @x_coords = [] @y_coords = [] @marker_names = [] @get_coordinates() - + @x_max = d3.max(@x_coords) - @y_max = d3.max(@y_coords) + console.log("x_max is:", @x_max) + @y_max = d3.max(@y_coords) @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names) @create_graph() @@ -33,44 +35,51 @@ $ -> max_chr = chr return max_chr - get_cumulative_chr_lengths: () -> + get_chr_lengths: () -> + ### + Gets a list of cumulative lengths in order to draw the vertical + lines separating chromosomes (the position of one on the graph is its own length + plus the lengths of all preceding chromosomes) + + ### + cumulative_chr_lengths = [] total_length = 0 for key of @chromosomes this_length = @chromosomes[key] cumulative_chr_lengths.push(total_length + this_length) total_length += this_length + + console.log("@plot_width:", @plot_width) console.log("lengths:", cumulative_chr_lengths) + console.log("total_length:", total_length) + + #scaled_chr_lengths = (@plot_width * (x/total_length) for x in cumulative_chr_lengths) return cumulative_chr_lengths - - get_coordinates: () -> - total_length = 0 + get_coordinates: () -> chr_lengths = [] + chr_seen = [] for result in js_data.qtl_results chr_length = @chromosomes[result.chr] - chr = parseInt(result.chr) - if _.isNaN(chr) - if result.chr == "X" - chr = @max_chr + 1 - else if result.chr == "Y" - chr = @max_chr + 2 - - @x_coords.push(total_length + parseFloat(result.Mb)) - @y_coords.push(result.lrs_value) + if not(result.chr in chr_seen) + chr_seen.push(result.chr) + chr_lengths.push(chr_length) + if result.chr != "1" + @total_length += chr_lengths[chr_lengths.length - 2] + console.log("total_length is:", @total_length) + @x_coords.push(@total_length + parseFloat(result.Mb)) + @y_coords.push(result.lod_score) @marker_names.push(result.name) - - if chr_length in chr_lengths - continue - else - chr_lengths.push(chr_length) - total_length += chr_length - console.log("chr_lengths are:", @chr_lengths) + console.log("chr_lengths are:", chr_lengths) - display_info: (d) -> - $("#coords").text(d[1]) + display_info: (d) -> + $("#qtl_results_filter").find("input:first").val(d[2]).keyup() + + undisplay_info: () -> + $("#qtl_results_filter").find("input:first").val("").keyup() create_graph: () -> svg = d3.select("#manhattan_plots") @@ -80,7 +89,7 @@ $ -> .attr("height", @plot_height) #svg.selectAll("text") - # .data(@plot_coordinates) + # .data(@plot_coordinates); # .enter() # .append("text") # .attr("x", (d) => @@ -111,6 +120,15 @@ $ -> .attr("r", 5) .attr("fill", "yellow") .call(@display_info(d)) + ) + .on("mouseout", () => + d3.select(d3.event.target).classed("d3_highlight", false) + .attr("r", 2) + .attr("fill", "black") + .call(@undisplay_info()) + ) + .attr("title", "foobar") + #.append("svg:text") #.text("test") #.attr("dx", 12) @@ -135,14 +153,7 @@ $ -> #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max)) #.attr("font-family", "sans-serif") #.attr("font-size", "11px") - #.attr("fill", "red") - ) - .on("mouseout", () => - d3.select(d3.event.target).classed("d3_highlight", false) - .attr("r", 2) - .attr("fill", "black") - ) - .attr("title", "foobar") + #.attr("fill", "red") @@ -155,7 +166,7 @@ $ -> .range([0, @plot_height]) svg.selectAll("line") - .data(@cumulative_chr_lengths) + .data(@scaled_chr_lengths) .enter() .append("line") .attr("x1", x) @@ -164,4 +175,4 @@ $ -> .attr("y2", @plot_height) .style("stroke", "#ccc") - new Manhattan_Plot + new Manhattan_Plot(600, 1200) diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js index 19fec21e..65aee69a 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.js +++ b/wqflask/wqflask/static/new/javascript/marker_regression.js @@ -6,18 +6,21 @@ var Manhattan_Plot; Manhattan_Plot = (function() { - function Manhattan_Plot() { + function Manhattan_Plot(plot_height, plot_width) { + this.plot_height = plot_height; + this.plot_width = plot_width; this.qtl_results = js_data.qtl_results; this.chromosomes = js_data.chromosomes; + this.total_length = 0; this.max_chr = this.get_max_chr(); - this.cumulative_chr_lengths = this.get_cumulative_chr_lengths(); - this.plot_height = 500; - this.plot_width = 1000; + this.scaled_chr_lengths = this.get_chr_lengths(); + console.log("scaled_chr_lengths is", this.scaled_chr_lengths); this.x_coords = []; this.y_coords = []; this.marker_names = []; this.get_coordinates(); this.x_max = d3.max(this.x_coords); + console.log("x_max is:", this.x_max); this.y_max = d3.max(this.y_coords); this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names); this.create_graph(); @@ -40,7 +43,13 @@ return max_chr; }; - Manhattan_Plot.prototype.get_cumulative_chr_lengths = function() { + Manhattan_Plot.prototype.get_chr_lengths = function() { + /* + Gets a list of cumulative lengths in order to draw the vertical + lines separating chromosomes (the position of one on the graph is its own length + plus the lengths of all preceding chromosomes) + */ + var cumulative_chr_lengths, key, this_length, total_length; cumulative_chr_lengths = []; total_length = 0; @@ -49,41 +58,41 @@ cumulative_chr_lengths.push(total_length + this_length); total_length += this_length; } + console.log("@plot_width:", this.plot_width); console.log("lengths:", cumulative_chr_lengths); + console.log("total_length:", total_length); return cumulative_chr_lengths; }; Manhattan_Plot.prototype.get_coordinates = function() { - var chr, chr_length, chr_lengths, result, total_length, _i, _len, _ref; - total_length = 0; + var chr_length, chr_lengths, chr_seen, result, _i, _len, _ref, _ref1; chr_lengths = []; + chr_seen = []; _ref = js_data.qtl_results; for (_i = 0, _len = _ref.length; _i < _len; _i++) { result = _ref[_i]; chr_length = this.chromosomes[result.chr]; - chr = parseInt(result.chr); - if (_.isNaN(chr)) { - if (result.chr === "X") { - chr = this.max_chr + 1; - } else if (result.chr === "Y") { - chr = this.max_chr + 2; + if (!(_ref1 = result.chr, __indexOf.call(chr_seen, _ref1) >= 0)) { + chr_seen.push(result.chr); + chr_lengths.push(chr_length); + if (result.chr !== "1") { + this.total_length += chr_lengths[chr_lengths.length - 2]; + console.log("total_length is:", this.total_length); } } - this.x_coords.push(total_length + parseFloat(result.Mb)); - this.y_coords.push(result.lrs_value); + this.x_coords.push(this.total_length + parseFloat(result.Mb)); + this.y_coords.push(result.lod_score); this.marker_names.push(result.name); - if (__indexOf.call(chr_lengths, chr_length) >= 0) { - continue; - } else { - chr_lengths.push(chr_length); - total_length += chr_length; - } } - return console.log("chr_lengths are:", this.chr_lengths); + return console.log("chr_lengths are:", chr_lengths); }; Manhattan_Plot.prototype.display_info = function(d) { - return $("#coords").text(d[1]); + return $("#qtl_results_filter").find("input:first").val(d[2]).keyup(); + }; + + Manhattan_Plot.prototype.undisplay_info = function() { + return $("#qtl_results_filter").find("input:first").val("").keyup(); }; Manhattan_Plot.prototype.create_graph = function() { @@ -97,17 +106,17 @@ }).attr("r", 2).classed("circle", true).on("mouseover", function(d) { return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.display_info(d)); }).on("mouseout", function() { - return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black"); + return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.undisplay_info()); }).attr("title", "foobar"); x = d3.scale.linear().domain([0, this.x_max]).range([0, this.plot_width]); y = d3.scale.linear().domain([0, this.y_max]).range([0, this.plot_height]); - return svg.selectAll("line").data(this.cumulative_chr_lengths).enter().append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", this.plot_height).style("stroke", "#ccc"); + return svg.selectAll("line").data(this.scaled_chr_lengths).enter().append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", this.plot_height).style("stroke", "#ccc"); }; return Manhattan_Plot; })(); - return new Manhattan_Plot; + return new Manhattan_Plot(600, 1200); }); }).call(this); diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html index b4f8300f..ffd1033e 100644 --- a/wqflask/wqflask/templates/marker_regression.html +++ b/wqflask/wqflask/templates/marker_regression.html @@ -18,10 +18,19 @@ </header> <div class="container"> - <div id="coords">Foobar</div> + <div> + <h2> + Manhattan Plot + </h2> + </div> <div id="manhattan_plots" class="manhattan_plots"> </div> + <div> + <h2> + Genome Association Results + </h2> + </div> <table cellpadding="0" cellspacing="0" border="0" id="qtl_results" class="table table-hover table-striped table-bordered"> <thead> <tr> @@ -33,7 +42,7 @@ </tr> </thead> <tbody> - {% for marker in filtered_results %} + {% for marker in pure_qtl_results %} <tr> <td>{{loop.index}}</td> <td>{{marker.lod_score}}</td> |