diff options
9 files changed, 1216 insertions, 656 deletions
diff --git a/wqflask/wqflask/marker_regression/marker_regression.py b/wqflask/wqflask/marker_regression/marker_regression.py index 3435d0db..0dd55729 100755 --- a/wqflask/wqflask/marker_regression/marker_regression.py +++ b/wqflask/wqflask/marker_regression/marker_regression.py @@ -54,6 +54,7 @@ class MarkerRegression(object): #self.qtl_results = self.gen_data(tempdata) self.qtl_results = self.gen_data(str(temp_uuid)) + self.lod_cutoff = self.get_lod_score_cutoff() #Get chromosome lengths for drawing the manhattan plot chromosome_mb_lengths = {} @@ -142,6 +143,9 @@ class MarkerRegression(object): #print("p_values:", p_values) self.dataset.group.markers.add_pvalues(p_values) + + self.get_lod_score_cutoff() + return self.dataset.group.markers.markers @@ -203,6 +207,17 @@ class MarkerRegression(object): return p_values, t_stats + def get_lod_score_cutoff(self): + high_qtl_count = 0 + for marker in self.dataset.group.markers.markers: + if marker['lod_score'] > 2: + high_qtl_count += 1 + + if high_qtl_count > 10000: + return 1 + else: + return 2 + def identify_empty_samples(self): no_val_samples = [] for sample_count, val in enumerate(self.vals): diff --git a/wqflask/wqflask/my_pylmm/pyLMM/lmm.py b/wqflask/wqflask/my_pylmm/pyLMM/lmm.py index 2345e132..a0ff31ef 100755 --- a/wqflask/wqflask/my_pylmm/pyLMM/lmm.py +++ b/wqflask/wqflask/my_pylmm/pyLMM/lmm.py @@ -277,7 +277,7 @@ def run_other(pheno_vector, refit=False, temp_data=tempdata) Bench().report() - return t_stats, p_values + return p_values, t_stats def matrixMult(A,B): diff --git a/wqflask/wqflask/static/new/css/marker_regression.css b/wqflask/wqflask/static/new/css/marker_regression.css index a737c97e..56980026 100644 --- a/wqflask/wqflask/static/new/css/marker_regression.css +++ b/wqflask/wqflask/static/new/css/marker_regression.css @@ -15,10 +15,17 @@ stroke: black; shape-rendering: crispEdges; } + .manhattan_plot .x_axis text { text-anchor: end; font-family: sans-serif; - font-size: 8px; + font-size: 10px; +} + +rect.pane { + cursor: move; + fill: none; + pointer-events: all; } /*rect { diff --git a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee new file mode 100644 index 00000000..30e6ea5e --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee @@ -0,0 +1,211 @@ +root = exports ? this + +class Chr_Manhattan_Plot + constructor: (@plot_height, @plot_width, @chr) -> + @qtl_results = js_data.qtl_results + console.log("qtl_results are:", @qtl_results) + console.log("chr is:", @chr) + + @get_max_chr() + + @filter_qtl_results() + console.log("filtered results:", @these_results) + @get_qtl_count() + + @x_coords = [] + @y_coords = [] + @marker_names = [] + + console.time('Create coordinates') + @create_coordinates() + console.log("@x_coords: ", @x_coords) + console.log("@y_coords: ", @y_coords) + console.timeEnd('Create coordinates') + + # Buffer to allow for the ticks/labels to be drawn + @x_buffer = @plot_width/30 + @y_buffer = @plot_height/20 + + @x_max = d3.max(@x_coords) + @y_max = d3.max(@y_coords) * 1.2 + + @svg = @create_svg() + + @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names) + console.log("coordinates:", @plot_coordinates) + + @plot_height -= @y_buffer + + @create_scales() + + console.time('Create graph') + @create_graph() + console.timeEnd('Create graph') + + get_max_chr: () -> + @max_chr = 0 + for key of js_data.chromosomes + console.log("key is:", key) + if parseInt(key) > @max_chr + @max_chr = parseInt(key) + + filter_qtl_results: () -> + @these_results = [] + this_chr = 100 + for result in @qtl_results + if result.chr == "X" + this_chr = @max_chr + else + this_chr = result.chr + console.log("this_chr is:", this_chr) + console.log("@chr[0] is:", parseInt(@chr[0])) + if this_chr > parseInt(@chr[0]) + break + if parseInt(this_chr) == parseInt(@chr[0]) + @these_results.push(result) + + get_qtl_count: () -> + high_qtl_count = 0 + for result in @these_results + if result.lod_score > 1 + high_qtl_count += 1 + console.log("high_qtl_count:", high_qtl_count) + + if high_qtl_count > 10000 + @y_axis_filter = 2 + else if high_qtl_count > 1000 + @y_axis_filter = 1 + else + @y_axis_filter = 0 + + create_coordinates: () -> + for result in @these_results + @x_coords.push(parseFloat(result.Mb)) + @y_coords.push(result.lod_score) + @marker_names.push(result.name) + + create_svg: () -> + svg = d3.select("#manhattan_plot") + .append("svg") + .attr("class", "manhattan_plot") + .attr("width", @plot_width+@x_buffer) + .attr("height", @plot_height+@y_buffer) + .append("g") + return svg + + create_scales: () -> + @x_scale = d3.scale.linear() + .domain([0, @chr[1]]) + .range([@x_buffer, @plot_width]) + @y_scale = d3.scale.linear() + .domain([@y_axis_filter, @y_max]) + .range([@plot_height, @y_buffer]) + + create_graph: () -> + @add_border() + @add_x_axis() + @add_y_axis() + @add_plot_points() + + add_border: () -> + border_coords = [[@y_buffer, @plot_height, @x_buffer, @x_buffer], + [@y_buffer, @plot_height, @plot_width, @plot_width], + [@y_buffer, @y_buffer, @x_buffer, @plot_width], + [@plot_height, @plot_height, @x_buffer, @plot_width]] + + @svg.selectAll("line") + .data(border_coords) + .enter() + .append("line") + .attr("y1", (d) => + return d[0] + ) + .attr("y2", (d) => + return d[1] + ) + .attr("x1", (d) => + return d[2] + ) + .attr("x2", (d) => + return d[3] + ) + .style("stroke", "#000") + + add_x_axis: () -> + @xAxis = d3.svg.axis() + .scale(@x_scale) + .orient("bottom") + .ticks(20) + + @xAxis.tickFormat((d) => + d3.format("d") #format as integer + return (d) + ) + + @svg.append("g") + .attr("class", "x_axis") + .attr("transform", "translate(0," + @plot_height + ")") + .call(@xAxis) + .selectAll("text") + .attr("text-anchor", "right") + .attr("font-size", "12px") + .attr("dx", "-1.6em") + .attr("transform", (d) => + return "translate(-12,0) rotate(-90)" + ) + + add_y_axis: () -> + @yAxis = d3.svg.axis() + .scale(@y_scale) + .orient("left") + .ticks(5) + + @svg.append("g") + .attr("class", "y_axis") + .attr("transform", "translate(" + @x_buffer + ",0)") + .call(@yAxis) + + add_plot_points: () -> + @plot_point = @svg.selectAll("circle") + .data(@plot_coordinates) + .enter() + .append("circle") + .attr("cx", (d) => + return @x_scale(d[0]) + ) + .attr("cy", (d) => + return @y_scale(d[1]) + ) + .attr("r", 2) + .attr("id", (d) => + return "point_" + String(d[2]) + ) + .classed("circle", true) + .on("mouseover", (d) => + console.log("d3.event is:", d3.event) + console.log("d is:", d) + this_id = "point_" + String(d[2]) + d3.select("#" + this_id).classed("d3_highlight", true) + .attr("r", 5) + .attr("fill", "yellow") + .call(@show_marker_in_table(d)) + ) + .on("mouseout", (d) => + this_id = "point_" + String(d[2]) + d3.select("#" + this_id).classed("d3_highlight", false) + .attr("r", 2) + .attr("fill", "black") + #.call(@show_marker_in_table()) + ) + + show_marker_in_table: (marker_info) -> + console.log("in show_marker_in_table") + ### Searches for the select marker in the results table below ### + if marker_info + marker_name = marker_info[2] + $("#qtl_results_filter").find("input:first").val(marker_name).change() + #else + # marker_name = "" + #$("#qtl_results_filter").find("input:first").val(marker_name).change() + +root.Chr_Manhattan_Plot = Chr_Manhattan_Plot \ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js new file mode 100644 index 00000000..2cbab00c --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js @@ -0,0 +1,206 @@ +// Generated by CoffeeScript 1.6.1 +(function() { + var Chr_Manhattan_Plot, root; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; + + Chr_Manhattan_Plot = (function() { + + function Chr_Manhattan_Plot(plot_height, plot_width, chr) { + this.plot_height = plot_height; + this.plot_width = plot_width; + this.chr = chr; + this.qtl_results = js_data.qtl_results; + console.log("qtl_results are:", this.qtl_results); + console.log("chr is:", this.chr); + this.get_max_chr(); + this.filter_qtl_results(); + console.log("filtered results:", this.these_results); + this.get_qtl_count(); + this.x_coords = []; + this.y_coords = []; + this.marker_names = []; + console.time('Create coordinates'); + this.create_coordinates(); + console.log("@x_coords: ", this.x_coords); + console.log("@y_coords: ", this.y_coords); + console.timeEnd('Create coordinates'); + this.x_buffer = this.plot_width / 30; + this.y_buffer = this.plot_height / 20; + this.x_max = d3.max(this.x_coords); + this.y_max = d3.max(this.y_coords) * 1.2; + this.svg = this.create_svg(); + this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names); + console.log("coordinates:", this.plot_coordinates); + this.plot_height -= this.y_buffer; + this.create_scales(); + console.time('Create graph'); + this.create_graph(); + console.timeEnd('Create graph'); + } + + Chr_Manhattan_Plot.prototype.get_max_chr = function() { + var key, _results; + this.max_chr = 0; + _results = []; + for (key in js_data.chromosomes) { + console.log("key is:", key); + if (parseInt(key) > this.max_chr) { + _results.push(this.max_chr = parseInt(key)); + } else { + _results.push(void 0); + } + } + return _results; + }; + + Chr_Manhattan_Plot.prototype.filter_qtl_results = function() { + var result, this_chr, _i, _len, _ref, _results; + this.these_results = []; + this_chr = 100; + _ref = this.qtl_results; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + result = _ref[_i]; + if (result.chr === "X") { + this_chr = this.max_chr; + } else { + this_chr = result.chr; + } + console.log("this_chr is:", this_chr); + console.log("@chr[0] is:", parseInt(this.chr[0])); + if (this_chr > parseInt(this.chr[0])) { + break; + } + if (parseInt(this_chr) === parseInt(this.chr[0])) { + _results.push(this.these_results.push(result)); + } else { + _results.push(void 0); + } + } + return _results; + }; + + Chr_Manhattan_Plot.prototype.get_qtl_count = function() { + var high_qtl_count, result, _i, _len, _ref; + high_qtl_count = 0; + _ref = this.these_results; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + result = _ref[_i]; + if (result.lod_score > 1) { + high_qtl_count += 1; + } + } + console.log("high_qtl_count:", high_qtl_count); + if (high_qtl_count > 10000) { + return this.y_axis_filter = 2; + } else if (high_qtl_count > 1000) { + return this.y_axis_filter = 1; + } else { + return this.y_axis_filter = 0; + } + }; + + Chr_Manhattan_Plot.prototype.create_coordinates = function() { + var result, _i, _len, _ref, _results; + _ref = this.these_results; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + result = _ref[_i]; + this.x_coords.push(parseFloat(result.Mb)); + this.y_coords.push(result.lod_score); + _results.push(this.marker_names.push(result.name)); + } + return _results; + }; + + Chr_Manhattan_Plot.prototype.create_svg = function() { + var svg; + svg = d3.select("#manhattan_plot").append("svg").attr("class", "manhattan_plot").attr("width", this.plot_width + this.x_buffer).attr("height", this.plot_height + this.y_buffer).append("g"); + return svg; + }; + + Chr_Manhattan_Plot.prototype.create_scales = function() { + this.x_scale = d3.scale.linear().domain([0, this.chr[1]]).range([this.x_buffer, this.plot_width]); + return this.y_scale = d3.scale.linear().domain([this.y_axis_filter, this.y_max]).range([this.plot_height, this.y_buffer]); + }; + + Chr_Manhattan_Plot.prototype.create_graph = function() { + this.add_border(); + this.add_x_axis(); + this.add_y_axis(); + return this.add_plot_points(); + }; + + Chr_Manhattan_Plot.prototype.add_border = function() { + var border_coords, + _this = this; + border_coords = [[this.y_buffer, this.plot_height, this.x_buffer, this.x_buffer], [this.y_buffer, this.plot_height, this.plot_width, this.plot_width], [this.y_buffer, this.y_buffer, this.x_buffer, this.plot_width], [this.plot_height, this.plot_height, this.x_buffer, this.plot_width]]; + return this.svg.selectAll("line").data(border_coords).enter().append("line").attr("y1", function(d) { + return d[0]; + }).attr("y2", function(d) { + return d[1]; + }).attr("x1", function(d) { + return d[2]; + }).attr("x2", function(d) { + return d[3]; + }).style("stroke", "#000"); + }; + + Chr_Manhattan_Plot.prototype.add_x_axis = function() { + var _this = this; + this.xAxis = d3.svg.axis().scale(this.x_scale).orient("bottom").ticks(20); + this.xAxis.tickFormat(function(d) { + d3.format("d"); + return d; + }); + return this.svg.append("g").attr("class", "x_axis").attr("transform", "translate(0," + this.plot_height + ")").call(this.xAxis).selectAll("text").attr("text-anchor", "right").attr("font-size", "12px").attr("dx", "-1.6em").attr("transform", function(d) { + return "translate(-12,0) rotate(-90)"; + }); + }; + + Chr_Manhattan_Plot.prototype.add_y_axis = function() { + this.yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5); + return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(this.yAxis); + }; + + Chr_Manhattan_Plot.prototype.add_plot_points = function() { + var _this = this; + return this.plot_point = this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) { + return _this.x_scale(d[0]); + }).attr("cy", function(d) { + return _this.y_scale(d[1]); + }).attr("r", 2).attr("id", function(d) { + return "point_" + String(d[2]); + }).classed("circle", true).on("mouseover", function(d) { + var this_id; + console.log("d3.event is:", d3.event); + console.log("d is:", d); + this_id = "point_" + String(d[2]); + return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d)); + }).on("mouseout", function(d) { + var this_id; + this_id = "point_" + String(d[2]); + return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", 2).attr("fill", "black"); + }); + }; + + Chr_Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) { + var marker_name; + console.log("in show_marker_in_table"); + /* Searches for the select marker in the results table below + */ + + if (marker_info) { + marker_name = marker_info[2]; + return $("#qtl_results_filter").find("input:first").val(marker_name).change(); + } + }; + + return Chr_Manhattan_Plot; + + })(); + + root.Chr_Manhattan_Plot = Chr_Manhattan_Plot; + +}).call(this); diff --git a/wqflask/wqflask/static/new/javascript/histogram.coffee b/wqflask/wqflask/static/new/javascript/histogram.coffee index f1799307..97b833fd 100644 --- a/wqflask/wqflask/static/new/javascript/histogram.coffee +++ b/wqflask/wqflask/static/new/javascript/histogram.coffee @@ -75,6 +75,7 @@ class Histogram .scale(@y_scale) .orient("left") .ticks(5) + add_bars: () -> console.log("bar_width:", @x_scale(@histogram_data[0].dx)) bar = @svg.selectAll(".bar") diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee index 2063e638..771703df 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee +++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee @@ -1,373 +1,443 @@ -$ -> - class Manhattan_Plot - constructor: (@plot_height, @plot_width) -> - @qtl_results = js_data.qtl_results - console.log("qtl_results are:", @qtl_results) - @chromosomes = js_data.chromosomes - - @total_length = 0 - - @max_chr = @get_max_chr() - - @x_coords = [] - @y_coords = [] - @marker_names = [] - console.time('Create coordinates') - @create_coordinates() - console.log("@x_coords: ", @x_coords) - console.log("@y_coords: ", @y_coords) - console.timeEnd('Create coordinates') - [@chr_lengths, @cumulative_chr_lengths] = @get_chr_lengths() - - # Buffer to allow for the ticks/labels to be drawn - @x_buffer = @plot_width/30 - @y_buffer = @plot_height/20 +root = exports ? this + +class Manhattan_Plot + constructor: (@plot_height, @plot_width) -> + @qtl_results = js_data.qtl_results + console.log("qtl_results are:", @qtl_results) + @chromosomes = js_data.chromosomes + + @total_length = 0 + + @max_chr = @get_max_chr() + + @x_coords = [] + @y_coords = [] + @marker_names = [] + console.time('Create coordinates') + @get_qtl_count() + @create_coordinates() + console.log("@x_coords: ", @x_coords) + console.log("@y_coords: ", @y_coords) + console.timeEnd('Create coordinates') + [@chr_lengths, @cumulative_chr_lengths] = @get_chr_lengths() + + # Buffer to allow for the ticks/labels to be drawn + @x_buffer = @plot_width/30 + @y_buffer = @plot_height/20 + + #@x_max = d3.max(@x_coords) + @x_max = @total_length + console.log("@x_max: ", @x_max) + console.log("@x_buffer: ", @x_buffer) + @y_max = d3.max(@y_coords) * 1.2 + + @svg = @create_svg() + console.log("svg created") + + @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names) + console.log("coordinates:", @plot_coordinates) + + @plot_height -= @y_buffer + + @create_scales() + + console.time('Create graph') + @create_graph() + console.timeEnd('Create graph') + + get_max_chr: () -> + max_chr = 0 + for result in @qtl_results + chr = parseInt(result.chr) + if not _.isNaN(chr) + if chr > max_chr + max_chr = chr + return max_chr + + get_chr_lengths: () -> + ### + #Gets a list of both individual and cumulative (the position of one on the graph + #is its own length plus the lengths of all preceding chromosomes) lengths in order + #to draw the vertical lines separating chromosomes and the chromosome labels + # + ### + + console.log("@chromosomes: ", @chromosomes) + + cumulative_chr_lengths = [] + chr_lengths = [] + total_length = 0 + for key of @chromosomes + this_length = @chromosomes[key] + chr_lengths.push(this_length) + cumulative_chr_lengths.push(total_length + this_length) + total_length += this_length + + console.log("chr_lengths: ", chr_lengths) + + return [chr_lengths, cumulative_chr_lengths] + + get_qtl_count: () -> + high_qtl_count = 0 + for result in js_data.qtl_results + if result.lod_score > 1 + high_qtl_count += 1 + console.log("high_qtl_count:", high_qtl_count) + + if high_qtl_count > 10000 + @y_axis_filter = 2 + else if high_qtl_count > 1000 + @y_axis_filter = 1 + else + @y_axis_filter = 0 + - #@x_max = d3.max(@x_coords) - @x_max = @total_length - console.log("@x_max: ", @x_max) - console.log("@x_buffer: ", @x_buffer) - @y_max = d3.max(@y_coords) * 1.2 - - @svg = @create_svg() - console.log("svg created") - @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names) - #console.log("coordinates:", @plot_coordinates) + create_coordinates: () -> + chr_lengths = [] + chr_seen = [] + for result in js_data.qtl_results + if result.chr == "X" + chr_length = parseFloat(@chromosomes[20]) + else + chr_length = parseFloat(@chromosomes[result.chr]) + if not(result.chr in chr_seen) + chr_seen.push(result.chr) + chr_lengths.push(chr_length) + console.log("result.chr:", result.chr) + console.log("total_length:", @total_length) + if parseInt(result.chr) != 1 + console.log("plus:", chr_lengths.length - 2) + @total_length += parseFloat(chr_lengths[chr_lengths.length - 2]) + if result.lod_score > @y_axis_filter + @x_coords.push(@total_length + parseFloat(result.Mb)) + @y_coords.push(result.lod_score) + @marker_names.push(result.name) + @total_length += parseFloat(chr_lengths[chr_lengths.length-1]) + + show_marker_in_table: (marker_info) -> + console.log("in show_marker_in_table") + ### Searches for the select marker in the results table below ### + if marker_info + marker_name = marker_info[2] + $("#qtl_results_filter").find("input:first").val(marker_name).change() + #else + # marker_name = "" + #$("#qtl_results_filter").find("input:first").val(marker_name).change() + + create_svg: () -> + svg = d3.select("#manhattan_plot") + .append("svg") + .attr("class", "manhattan_plot") + .attr("width", @plot_width+@x_buffer) + .attr("height", @plot_height+@y_buffer) + .append("g") + #.call(d3.behavior.zoom().x(@x_scale).y(@y_scale).scaleExtent([1,8]).on("zoom", () -> + # @svg.selectAll("circle") + # .attr("transform", transform) + #)) + return svg + + #zoom: () -> + # #@svg.selectAll.attr("transform", @transform) + # @svg.selectAll("circle") + # .attr("transform", transform) + # + #transform: (d) -> + # return "translate(" + @x_scale(d[0]) + "," + @y_scale(d[1]) + ")" + + create_graph: () -> + @add_border() + @add_x_axis() + @add_y_axis() + @add_axis_labels() + @add_chr_lines() + #@fill_chr_areas() + @add_chr_labels() + @add_plot_points() + #@create_zoom_pane() + + add_border: () -> + border_coords = [[@y_buffer, @plot_height, @x_buffer, @x_buffer], + [@y_buffer, @plot_height, @plot_width, @plot_width], + [@y_buffer, @y_buffer, @x_buffer, @plot_width], + [@plot_height, @plot_height, @x_buffer, @plot_width]] + + @svg.selectAll("line") + .data(border_coords) + .enter() + .append("line") + .attr("y1", (d) => + return d[0] + ) + .attr("y2", (d) => + return d[1] + ) + .attr("x1", (d) => + return d[2] + ) + .attr("x2", (d) => + return d[3] + ) + .style("stroke", "#000") + + create_scales: () -> + #@x_scale = d3.scale.linear() + # .domain([0, d3.max(@x_coords)]) + # .range([@x_buffer, @plot_width]) + if '24' of @chromosomes + console.log("@chromosomes[24]:", @chromosomes['24']) + console.log("@chromosomes[23]:", @chromosomes['23']) + console.log("@total_length:", @total_length) + console.log("d3.max(@xcoords):", d3.max(@x_coords)) + @x_scale = d3.scale.linear() + .domain([0, (@total_length + @chromosomes['24'])]) + .range([@x_buffer, @plot_width]) + else + @x_scale = d3.scale.linear() + .domain([0, (@total_length + @chromosomes['20'])]) + .range([@x_buffer, @plot_width]) + @y_scale = d3.scale.linear() + .domain([@y_axis_filter, @y_max]) + .range([@plot_height, @y_buffer]) + + create_x_axis_tick_values: () -> + tick_vals = [] + for val in [25..@cumulative_chr_lengths[0]] when val%25 == 0 + tick_vals.push(val) + for length, i in @cumulative_chr_lengths + if i == 0 + continue + chr_ticks = [] + tick_count = Math.floor(@chr_lengths[i]/25) + tick_val = parseInt(@cumulative_chr_lengths[i-1]) + for tick in [0..(tick_count-1)] + tick_val += 25 + chr_ticks.push(tick_val) + Array::push.apply tick_vals, chr_ticks + + #console.log("tick_vals:", tick_vals) + return tick_vals + + add_x_axis: () -> + @xAxis = d3.svg.axis() + .scale(@x_scale) + .orient("bottom") + .tickValues(@create_x_axis_tick_values()) + + next_chr = 1 + tmp_tick_val = 0 + @xAxis.tickFormat((d) => + d3.format("d") #format as integer + if d < @cumulative_chr_lengths[0] + tick_val = d + else + next_chr_length = @cumulative_chr_lengths[next_chr] + if d > next_chr_length + next_chr += 1 + tmp_tick_val = 25 + tick_val = tmp_tick_val + else + tmp_tick_val += 25 + tick_val = tmp_tick_val + return (tick_val) + ) + + @svg.append("g") + .attr("class", "x_axis") + .attr("transform", "translate(0," + @plot_height + ")") + .call(@xAxis) + .selectAll("text") + .attr("text-anchor", "right") + .attr("dx", "-1.6em") + .attr("transform", (d) => + return "translate(-12,0) rotate(-90)" + ) + #.attr("dy", "-1.0em") + + + add_y_axis: () -> + @yAxis = d3.svg.axis() + .scale(@y_scale) + .orient("left") + .ticks(5) + + @svg.append("g") + .attr("class", "y_axis") + .attr("transform", "translate(" + @x_buffer + ",0)") + .call(@yAxis) - @plot_height -= @y_buffer - @create_scales() - console.time('Create graph') - @create_graph() - console.timeEnd('Create graph') - - get_max_chr: () -> - max_chr = 0 - for result in @qtl_results - chr = parseInt(result.chr) - if not _.isNaN(chr) - if chr > max_chr - max_chr = chr - return max_chr - - get_chr_lengths: () -> - ### - #Gets a list of both individual and cumulative (the position of one on the graph - #is its own length plus the lengths of all preceding chromosomes) lengths in order - #to draw the vertical lines separating chromosomes and the chromosome labels - # - ### + add_axis_labels: () -> + @svg.append("text") + .attr("transform","rotate(-90)") + .attr("y", 0 - (@plot_height / 2)) + .attr("x", @x_buffer) + .attr("dy", "1em") + .style("text-anchor", "middle") + .text("LOD Score") + + add_chr_lines: () -> + @svg.selectAll("line") + .data(@cumulative_chr_lengths, (d) => + return d + ) + .enter() + .append("line") + .attr("x1", @x_scale) + .attr("x2", @x_scale) + .attr("y1", @y_buffer) + .attr("y2", @plot_height) + .style("stroke", "#ccc") - console.log("@chromosomes: ", @chromosomes) - cumulative_chr_lengths = [] - chr_lengths = [] - total_length = 0 - for key of @chromosomes - this_length = @chromosomes[key] - chr_lengths.push(this_length) - cumulative_chr_lengths.push(total_length + this_length) - total_length += this_length - - console.log("chr_lengths: ", chr_lengths) - - return [chr_lengths, cumulative_chr_lengths] - - create_coordinates: () -> - chr_lengths = [] - chr_seen = [] - #console.log("total_length2:", @total_length) - for result in js_data.qtl_results - if result.chr == "X" - chr_length = parseFloat(@chromosomes[20]) + fill_chr_areas: () -> + console.log("cumu_chr_lengths:", @cumulative_chr_lengths) + console.log("example:", @x_scale(@cumulative_chr_lengths[0])) + @svg.selectAll("rect.chr_fill_area") + .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) => + return d + ) + .enter() + .append("rect") + .attr("x", (d) => + if i == 0 + return @x_scale(0) else - chr_length = parseFloat(@chromosomes[result.chr]) - if not(result.chr in chr_seen) - chr_seen.push(result.chr) - chr_lengths.push(chr_length) - console.log("result.chr:", result.chr) - console.log("total_length:", @total_length) - if result.chr != 1 - console.log("plus:", chr_lengths.length - 2) - @total_length += parseFloat(chr_lengths[chr_lengths.length - 2]) - #console.log("total_length3:", @total_length) - #console.log("Mb:", result.Mb) - if result.lod_score > 2 - @x_coords.push(@total_length + parseFloat(result.Mb)) - @y_coords.push(result.lod_score) - @marker_names.push(result.name) - @total_length += parseFloat(chr_lengths[chr_lengths.length-1]) - #console.log("chr_lengths: ", chr_lengths) - - show_marker_in_table: (marker_info) -> - console.log("in show_marker_in_table") - ### Searches for the select marker in the results table below ### - if marker_info - marker_name = marker_info[2] - else - marker_name = "" - $("#qtl_results_filter").find("input:first").val(marker_name).keypress() - - create_svg: () -> - svg = d3.select("#manhattan_plots") - .append("svg") - .attr("class", "manhattan_plot") - .attr("width", @plot_width+@x_buffer) - .attr("height", @plot_height+@y_buffer) + return @x_scale(d[1]) + ) + .attr("y", @y_buffer) + .attr("width", (d) => + return @x_scale(d[0]) + ) + .attr("height", @plot_height-@y_buffer) + #.attr("fill", (d, i) => + # if i%2 + # return "whitesmoke" + # else + # return "none" + #) - return svg - - create_graph: () -> - @add_border() - @add_x_axis() - @add_y_axis() - @add_chr_lines() - #@fill_chr_areas() - @add_chr_labels() - @add_plot_points() - - add_border: () -> - border_coords = [[@y_buffer, @plot_height, @x_buffer, @x_buffer], - [@y_buffer, @plot_height, @plot_width, @plot_width], - [@y_buffer, @y_buffer, @x_buffer, @plot_width], - [@plot_height, @plot_height, @x_buffer, @plot_width]] - - @svg.selectAll("line") - .data(border_coords) - .enter() - .append("line") - .attr("y1", (d) => - return d[0] - ) - .attr("y2", (d) => - return d[1] - ) - .attr("x1", (d) => - return d[2] - ) - .attr("x2", (d) => - return d[3] - ) - .style("stroke", "#000") - - create_scales: () -> - #@x_scale = d3.scale.linear() - # .domain([0, d3.max(@x_coords)]) - # .range([@x_buffer, @plot_width]) - if '24' of @chromosomes - console.log("@chromosomes[24]:", @chromosomes['24']) - console.log("@chromosomes[23]:", @chromosomes['23']) - console.log("@total_length:", @total_length) - console.log("d3.max(@xcoords):", d3.max(@x_coords)) - @x_scale = d3.scale.linear() - .domain([0, (@total_length + @chromosomes['24'])]) - .range([@x_buffer, @plot_width]) - else - @x_scale = d3.scale.linear() - .domain([0, (@total_length + @chromosomes['20'])]) - .range([@x_buffer, @plot_width]) - @y_scale = d3.scale.linear() - .domain([2, @y_max]) - .range([@plot_height, @y_buffer]) - - create_x_axis_tick_values: () -> - tick_vals = [] - for val in [25..@cumulative_chr_lengths[0]] when val%25 == 0 - tick_vals.push(val) - - for length, i in @cumulative_chr_lengths + fill_chr_areas2: () -> + console.log("cumu_chr_lengths:", @cumulative_chr_lengths) + console.log("example:", @x_scale(@cumulative_chr_lengths[0])) + @svg.selectAll("rect.chr_fill_area") + .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) => + return d + ) + .enter() + .append("rect") + .attr("x", (d) => if i == 0 - continue - chr_ticks = [] - tick_count = Math.floor(@chr_lengths[i]/25) - tick_val = parseInt(@cumulative_chr_lengths[i-1]) - for tick in [0..(tick_count-1)] - tick_val += 25 - chr_ticks.push(tick_val) - Array::push.apply tick_vals, chr_ticks - - #console.log("tick_vals:", tick_vals) - return tick_vals - - add_x_axis: () -> - xAxis = d3.svg.axis() - .scale(@x_scale) - .orient("bottom") - .tickValues(@create_x_axis_tick_values()) - - next_chr = 1 - tmp_tick_val = 0 - xAxis.tickFormat((d) => - d3.format("d") #format as integer - if d < @cumulative_chr_lengths[0] - tick_val = d + return @x_scale(0) else - next_chr_length = @cumulative_chr_lengths[next_chr] - if d > next_chr_length - next_chr += 1 - tmp_tick_val = 25 - tick_val = tmp_tick_val - else - tmp_tick_val += 25 - tick_val = tmp_tick_val - return (tick_val) + return @x_scale(d[1]) + ) + .attr("y", @y_buffer) + .attr("width", (d) => + return @x_scale(d[0]) + ) + .attr("height", @plot_height-@y_buffer) + .attr("fill", (d, i) => + return "whitesmoke" + #if i%2 + # return "whitesmoke" + #else + # return "none" ) - @svg.append("g") - .attr("class", "x_axis") - .attr("transform", "translate(0," + @plot_height + ")") - .call(xAxis) - .selectAll("text") - .attr("text-anchor", "right") - .attr("dx", "-1.6em") - .attr("transform", (d) => - return "translate(-12,0) rotate(-90)" - ) - #.attr("dy", "-1.0em") - - - add_y_axis: () -> - yAxis = d3.svg.axis() - .scale(@y_scale) - .orient("left") - .ticks(5) + add_chr_labels: () -> + chr_names = [] + for key of @chromosomes + chr_names.push(key) + chr_info = _.zip(chr_names, @chr_lengths, @cumulative_chr_lengths) + @svg.selectAll("text") + .data(chr_info, (d) => + return d + ) + .enter() + .append("text") + .attr("class", "chr_label") + .text((d) => + if d[0] == "23" + return "X" + else if d[0] == "24" + return "X/Y" + else + return d[0] + ) + .attr("x", (d) => + return @x_scale(d[2] - d[1]/2) + ) + .attr("y", @plot_height * 0.1) + .attr("dx", "0em") + .attr("text-anchor", "middle") + .attr("font-family", "sans-serif") + .attr("font-size", "18px") + .attr("fill", "black") + .on("click", (d) => + this_chr = d + @redraw_plot(d) + ) + + add_plot_points: () -> + @plot_point = @svg.selectAll("circle") + .data(@plot_coordinates) + .enter() + .append("circle") + .attr("cx", (d) => + return @x_scale(d[0]) + ) + .attr("cy", (d) => + return @y_scale(d[1]) + ) + .attr("r", 2) + .attr("id", (d) => + return "point_" + String(d[2]) + ) + .classed("circle", true) + .on("mouseover", (d) => + console.log("d3.event is:", d3.event) + console.log("d is:", d) + this_id = "point_" + String(d[2]) + d3.select("#" + this_id).classed("d3_highlight", true) + .attr("r", 5) + .attr("fill", "yellow") + .call(@show_marker_in_table(d)) + ) + .on("mouseout", (d) => + this_id = "point_" + String(d[2]) + d3.select("#" + this_id).classed("d3_highlight", false) + .attr("r", 2) + .attr("fill", "black") + ) - @svg.append("g") - .attr("class", "y_axis") - .attr("transform", "translate(" + @x_buffer + ",0)") - .call(yAxis) - - add_chr_lines: () -> - @svg.selectAll("line") - .data(@cumulative_chr_lengths, (d) => - return d - ) - .enter() - .append("line") - .attr("x1", @x_scale) - .attr("x2", @x_scale) - .attr("y1", @y_buffer) - .attr("y2", @plot_height) - .style("stroke", "#ccc") - - - fill_chr_areas: () -> - console.log("cumu_chr_lengths:", @cumulative_chr_lengths) - console.log("example:", @x_scale(@cumulative_chr_lengths[0])) - @svg.selectAll("rect.chr_fill_area") - .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) => - return d - ) - .enter() - .append("rect") - .attr("x", (d) => - if i == 0 - return @x_scale(0) - else - return @x_scale(d[1]) - ) - .attr("y", @y_buffer) - .attr("width", (d) => - return @x_scale(d[0]) - ) - .attr("height", @plot_height-@y_buffer) - #.attr("fill", (d, i) => - # if i%2 - # return "whitesmoke" - # else - # return "none" - #) - - fill_chr_areas2: () -> - console.log("cumu_chr_lengths:", @cumulative_chr_lengths) - console.log("example:", @x_scale(@cumulative_chr_lengths[0])) - @svg.selectAll("rect.chr_fill_area") - .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) => - return d - ) - .enter() - .append("rect") - .attr("x", (d) => - if i == 0 - return @x_scale(0) - else - return @x_scale(d[1]) - ) - .attr("y", @y_buffer) - .attr("width", (d) => - return @x_scale(d[0]) - ) - .attr("height", @plot_height-@y_buffer) - .attr("fill", (d, i) => - return "whitesmoke" - #if i%2 - # return "whitesmoke" - #else - # return "none" - ) + redraw_plot: (chr_ob) -> + console.log("chr_name is:", chr_ob[0]) + console.log("chr_length is:", chr_ob[1]) + $('#manhattan_plot').remove() + $('#manhattan_plot_container').append('<div id="manhattan_plot"></div>') + root.chr_plot = new Chr_Manhattan_Plot(600, 1200, chr_ob) + - add_chr_labels: () -> - chr_names = [] - for key of @chromosomes - chr_names.push(key) - chr_info = _.zip(chr_names, @chr_lengths, @cumulative_chr_lengths) - @svg.selectAll("text") - .data(chr_info, (d) => - return d - ) - .enter() - .append("text") - .text((d) => - if d[0] == "23" - return "X" - else if d[0] == "24" - return "X/Y" - else - return d[0] - ) - .attr("x", (d) => - return @x_scale(d[2] - d[1]/2) - ) - .attr("y", @plot_height * 0.1) - .attr("dx", "0em") - .attr("text-anchor", "middle") - .attr("font-family", "sans-serif") - .attr("font-size", "18px") - .attr("fill", "black") - - add_plot_points: () -> - @svg.selectAll("circle") - .data(@plot_coordinates) - .enter() - .append("circle") - .attr("cx", (d) => - return @x_scale(d[0]) - ) - .attr("cy", (d) => - return @y_scale(d[1]) - ) - .attr("r", 2) - .attr("id", (d) => - return "point_" + String(d[2]) - ) - .classed("circle", true) - .on("mouseover", (d) => - console.log("d3.event is:", d3.event) - console.log("d is:", d) - this_id = "point_" + String(d[2]) - d3.select("#" + this_id).classed("d3_highlight", true) - .attr("r", 5) - .attr("fill", "yellow") - .call(@show_marker_in_table(d)) - ) - .on("mouseout", (d) => - this_id = "point_" + String(d[2]) - d3.select("#" + this_id).classed("d3_highlight", false) - .attr("r", 2) - .attr("fill", "black") - .call(@show_marker_in_table()) - ) + create_zoom_pane: () -> + zoom = d3.behavior.zoom() + .on("zoom", draw); + + @svg.append("rect") + .attr("class", "pane") + .attr("width", @plot_width) + .attr("height", @plot_height) + .call(zoom) + + draw: () -> + @svg.select("g.x_axis").call(@xAxis); + @svg.select("g.y_axis").call(@yAxis); + @svg.select("path.area").attr("d", area); + @svg.select("path.line").attr("d", line); + - console.time('Create manhattan plot') - new Manhattan_Plot(600, 1200) - console.timeEnd('Create manhattan plot') \ No newline at end of file + #console.time('Create manhattan plot') + #new Manhattan_Plot(600, 1200) + #console.timeEnd('Create manhattan plot') + +root.Manhattan_Plot = new Manhattan_Plot(600, 1200) \ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js index af6e0dbe..86509316 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.js +++ b/wqflask/wqflask/static/new/javascript/marker_regression.js @@ -1,326 +1,374 @@ // Generated by CoffeeScript 1.6.1 (function() { - var __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; + var Manhattan_Plot, root, + __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; - $(function() { - var Manhattan_Plot; - Manhattan_Plot = (function() { + root = typeof exports !== "undefined" && exports !== null ? exports : this; - function Manhattan_Plot(plot_height, plot_width) { - var _ref; - this.plot_height = plot_height; - this.plot_width = plot_width; - this.qtl_results = js_data.qtl_results; - console.log("qtl_results are:", this.qtl_results); - this.chromosomes = js_data.chromosomes; - this.total_length = 0; - this.max_chr = this.get_max_chr(); - this.x_coords = []; - this.y_coords = []; - this.marker_names = []; - console.time('Create coordinates'); - this.create_coordinates(); - console.log("@x_coords: ", this.x_coords); - console.log("@y_coords: ", this.y_coords); - console.timeEnd('Create coordinates'); - _ref = this.get_chr_lengths(), this.chr_lengths = _ref[0], this.cumulative_chr_lengths = _ref[1]; - this.x_buffer = this.plot_width / 30; - this.y_buffer = this.plot_height / 20; - this.x_max = this.total_length; - console.log("@x_max: ", this.x_max); - console.log("@x_buffer: ", this.x_buffer); - this.y_max = d3.max(this.y_coords) * 1.2; - this.svg = this.create_svg(); - console.log("svg created"); - this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names); - this.plot_height -= this.y_buffer; - this.create_scales(); - console.time('Create graph'); - this.create_graph(); - console.timeEnd('Create graph'); - } + Manhattan_Plot = (function() { + + function Manhattan_Plot(plot_height, plot_width) { + var _ref; + this.plot_height = plot_height; + this.plot_width = plot_width; + this.qtl_results = js_data.qtl_results; + console.log("qtl_results are:", this.qtl_results); + this.chromosomes = js_data.chromosomes; + this.total_length = 0; + this.max_chr = this.get_max_chr(); + this.x_coords = []; + this.y_coords = []; + this.marker_names = []; + console.time('Create coordinates'); + this.get_qtl_count(); + this.create_coordinates(); + console.log("@x_coords: ", this.x_coords); + console.log("@y_coords: ", this.y_coords); + console.timeEnd('Create coordinates'); + _ref = this.get_chr_lengths(), this.chr_lengths = _ref[0], this.cumulative_chr_lengths = _ref[1]; + this.x_buffer = this.plot_width / 30; + this.y_buffer = this.plot_height / 20; + this.x_max = this.total_length; + console.log("@x_max: ", this.x_max); + console.log("@x_buffer: ", this.x_buffer); + this.y_max = d3.max(this.y_coords) * 1.2; + this.svg = this.create_svg(); + console.log("svg created"); + this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names); + console.log("coordinates:", this.plot_coordinates); + this.plot_height -= this.y_buffer; + this.create_scales(); + console.time('Create graph'); + this.create_graph(); + console.timeEnd('Create graph'); + } - Manhattan_Plot.prototype.get_max_chr = function() { - var chr, max_chr, result, _i, _len, _ref; - max_chr = 0; - _ref = this.qtl_results; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - result = _ref[_i]; - chr = parseInt(result.chr); - if (!_.isNaN(chr)) { - if (chr > max_chr) { - max_chr = chr; - } + Manhattan_Plot.prototype.get_max_chr = function() { + var chr, max_chr, result, _i, _len, _ref; + max_chr = 0; + _ref = this.qtl_results; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + result = _ref[_i]; + chr = parseInt(result.chr); + if (!_.isNaN(chr)) { + if (chr > max_chr) { + max_chr = chr; } } - return max_chr; - }; + } + return max_chr; + }; - Manhattan_Plot.prototype.get_chr_lengths = function() { - /* - #Gets a list of both individual and cumulative (the position of one on the graph - #is its own length plus the lengths of all preceding chromosomes) lengths in order - #to draw the vertical lines separating chromosomes and the chromosome labels - # - */ + Manhattan_Plot.prototype.get_chr_lengths = function() { + /* + #Gets a list of both individual and cumulative (the position of one on the graph + #is its own length plus the lengths of all preceding chromosomes) lengths in order + #to draw the vertical lines separating chromosomes and the chromosome labels + # + */ - var chr_lengths, cumulative_chr_lengths, key, this_length, total_length; - console.log("@chromosomes: ", this.chromosomes); - cumulative_chr_lengths = []; - chr_lengths = []; - total_length = 0; - for (key in this.chromosomes) { - this_length = this.chromosomes[key]; - chr_lengths.push(this_length); - cumulative_chr_lengths.push(total_length + this_length); - total_length += this_length; + var chr_lengths, cumulative_chr_lengths, key, this_length, total_length; + console.log("@chromosomes: ", this.chromosomes); + cumulative_chr_lengths = []; + chr_lengths = []; + total_length = 0; + for (key in this.chromosomes) { + this_length = this.chromosomes[key]; + chr_lengths.push(this_length); + cumulative_chr_lengths.push(total_length + this_length); + total_length += this_length; + } + console.log("chr_lengths: ", chr_lengths); + return [chr_lengths, cumulative_chr_lengths]; + }; + + Manhattan_Plot.prototype.get_qtl_count = function() { + var high_qtl_count, result, _i, _len, _ref; + high_qtl_count = 0; + _ref = js_data.qtl_results; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + result = _ref[_i]; + if (result.lod_score > 1) { + high_qtl_count += 1; } - console.log("chr_lengths: ", chr_lengths); - return [chr_lengths, cumulative_chr_lengths]; - }; + } + console.log("high_qtl_count:", high_qtl_count); + if (high_qtl_count > 10000) { + return this.y_axis_filter = 2; + } else if (high_qtl_count > 1000) { + return this.y_axis_filter = 1; + } else { + return this.y_axis_filter = 0; + } + }; - Manhattan_Plot.prototype.create_coordinates = function() { - 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]; - if (result.chr === "X") { - chr_length = parseFloat(this.chromosomes[20]); - } else { - chr_length = parseFloat(this.chromosomes[result.chr]); - } - if (!(_ref1 = result.chr, __indexOf.call(chr_seen, _ref1) >= 0)) { - chr_seen.push(result.chr); - chr_lengths.push(chr_length); - console.log("result.chr:", result.chr); - console.log("total_length:", this.total_length); - if (result.chr !== 1) { - console.log("plus:", chr_lengths.length - 2); - this.total_length += parseFloat(chr_lengths[chr_lengths.length - 2]); - } - } - if (result.lod_score > 2) { - this.x_coords.push(this.total_length + parseFloat(result.Mb)); - this.y_coords.push(result.lod_score); - this.marker_names.push(result.name); + Manhattan_Plot.prototype.create_coordinates = function() { + 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]; + if (result.chr === "X") { + chr_length = parseFloat(this.chromosomes[20]); + } else { + chr_length = parseFloat(this.chromosomes[result.chr]); + } + if (!(_ref1 = result.chr, __indexOf.call(chr_seen, _ref1) >= 0)) { + chr_seen.push(result.chr); + chr_lengths.push(chr_length); + console.log("result.chr:", result.chr); + console.log("total_length:", this.total_length); + if (parseInt(result.chr) !== 1) { + console.log("plus:", chr_lengths.length - 2); + this.total_length += parseFloat(chr_lengths[chr_lengths.length - 2]); } } - return this.total_length += parseFloat(chr_lengths[chr_lengths.length - 1]); - }; + if (result.lod_score > this.y_axis_filter) { + this.x_coords.push(this.total_length + parseFloat(result.Mb)); + this.y_coords.push(result.lod_score); + this.marker_names.push(result.name); + } + } + return this.total_length += parseFloat(chr_lengths[chr_lengths.length - 1]); + }; - Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) { - var marker_name; - console.log("in show_marker_in_table"); - /* Searches for the select marker in the results table below - */ + Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) { + var marker_name; + console.log("in show_marker_in_table"); + /* Searches for the select marker in the results table below + */ - if (marker_info) { - marker_name = marker_info[2]; - } else { - marker_name = ""; - } - return $("#qtl_results_filter").find("input:first").val(marker_name).keypress(); - }; + if (marker_info) { + marker_name = marker_info[2]; + return $("#qtl_results_filter").find("input:first").val(marker_name).change(); + } + }; - Manhattan_Plot.prototype.create_svg = function() { - var svg; - svg = d3.select("#manhattan_plots").append("svg").attr("class", "manhattan_plot").attr("width", this.plot_width + this.x_buffer).attr("height", this.plot_height + this.y_buffer); - return svg; - }; + Manhattan_Plot.prototype.create_svg = function() { + var svg; + svg = d3.select("#manhattan_plot").append("svg").attr("class", "manhattan_plot").attr("width", this.plot_width + this.x_buffer).attr("height", this.plot_height + this.y_buffer).append("g"); + return svg; + }; - Manhattan_Plot.prototype.create_graph = function() { - this.add_border(); - this.add_x_axis(); - this.add_y_axis(); - this.add_chr_lines(); - this.add_chr_labels(); - return this.add_plot_points(); - }; + Manhattan_Plot.prototype.create_graph = function() { + this.add_border(); + this.add_x_axis(); + this.add_y_axis(); + this.add_axis_labels(); + this.add_chr_lines(); + this.add_chr_labels(); + return this.add_plot_points(); + }; - Manhattan_Plot.prototype.add_border = function() { - var border_coords, - _this = this; - border_coords = [[this.y_buffer, this.plot_height, this.x_buffer, this.x_buffer], [this.y_buffer, this.plot_height, this.plot_width, this.plot_width], [this.y_buffer, this.y_buffer, this.x_buffer, this.plot_width], [this.plot_height, this.plot_height, this.x_buffer, this.plot_width]]; - return this.svg.selectAll("line").data(border_coords).enter().append("line").attr("y1", function(d) { - return d[0]; - }).attr("y2", function(d) { - return d[1]; - }).attr("x1", function(d) { - return d[2]; - }).attr("x2", function(d) { - return d[3]; - }).style("stroke", "#000"); - }; + Manhattan_Plot.prototype.add_border = function() { + var border_coords, + _this = this; + border_coords = [[this.y_buffer, this.plot_height, this.x_buffer, this.x_buffer], [this.y_buffer, this.plot_height, this.plot_width, this.plot_width], [this.y_buffer, this.y_buffer, this.x_buffer, this.plot_width], [this.plot_height, this.plot_height, this.x_buffer, this.plot_width]]; + return this.svg.selectAll("line").data(border_coords).enter().append("line").attr("y1", function(d) { + return d[0]; + }).attr("y2", function(d) { + return d[1]; + }).attr("x1", function(d) { + return d[2]; + }).attr("x2", function(d) { + return d[3]; + }).style("stroke", "#000"); + }; - Manhattan_Plot.prototype.create_scales = function() { - if ('24' in this.chromosomes) { - console.log("@chromosomes[24]:", this.chromosomes['24']); - console.log("@chromosomes[23]:", this.chromosomes['23']); - console.log("@total_length:", this.total_length); - console.log("d3.max(@xcoords):", d3.max(this.x_coords)); - this.x_scale = d3.scale.linear().domain([0, this.total_length + this.chromosomes['24']]).range([this.x_buffer, this.plot_width]); - } else { - this.x_scale = d3.scale.linear().domain([0, this.total_length + this.chromosomes['20']]).range([this.x_buffer, this.plot_width]); - } - return this.y_scale = d3.scale.linear().domain([2, this.y_max]).range([this.plot_height, this.y_buffer]); - }; + Manhattan_Plot.prototype.create_scales = function() { + if ('24' in this.chromosomes) { + console.log("@chromosomes[24]:", this.chromosomes['24']); + console.log("@chromosomes[23]:", this.chromosomes['23']); + console.log("@total_length:", this.total_length); + console.log("d3.max(@xcoords):", d3.max(this.x_coords)); + this.x_scale = d3.scale.linear().domain([0, this.total_length + this.chromosomes['24']]).range([this.x_buffer, this.plot_width]); + } else { + this.x_scale = d3.scale.linear().domain([0, this.total_length + this.chromosomes['20']]).range([this.x_buffer, this.plot_width]); + } + return this.y_scale = d3.scale.linear().domain([this.y_axis_filter, this.y_max]).range([this.plot_height, this.y_buffer]); + }; - Manhattan_Plot.prototype.create_x_axis_tick_values = function() { - var chr_ticks, i, length, tick, tick_count, tick_val, tick_vals, val, _i, _j, _k, _len, _ref, _ref1, _ref2; - tick_vals = []; - for (val = _i = 25, _ref = this.cumulative_chr_lengths[0]; 25 <= _ref ? _i <= _ref : _i >= _ref; val = 25 <= _ref ? ++_i : --_i) { - if (val % 25 === 0) { - tick_vals.push(val); - } + Manhattan_Plot.prototype.create_x_axis_tick_values = function() { + var chr_ticks, i, length, tick, tick_count, tick_val, tick_vals, val, _i, _j, _k, _len, _ref, _ref1, _ref2; + tick_vals = []; + for (val = _i = 25, _ref = this.cumulative_chr_lengths[0]; 25 <= _ref ? _i <= _ref : _i >= _ref; val = 25 <= _ref ? ++_i : --_i) { + if (val % 25 === 0) { + tick_vals.push(val); } - _ref1 = this.cumulative_chr_lengths; - for (i = _j = 0, _len = _ref1.length; _j < _len; i = ++_j) { - length = _ref1[i]; - if (i === 0) { - continue; - } - chr_ticks = []; - tick_count = Math.floor(this.chr_lengths[i] / 25); - tick_val = parseInt(this.cumulative_chr_lengths[i - 1]); - for (tick = _k = 0, _ref2 = tick_count - 1; 0 <= _ref2 ? _k <= _ref2 : _k >= _ref2; tick = 0 <= _ref2 ? ++_k : --_k) { - tick_val += 25; - chr_ticks.push(tick_val); - } - Array.prototype.push.apply(tick_vals, chr_ticks); + } + _ref1 = this.cumulative_chr_lengths; + for (i = _j = 0, _len = _ref1.length; _j < _len; i = ++_j) { + length = _ref1[i]; + if (i === 0) { + continue; + } + chr_ticks = []; + tick_count = Math.floor(this.chr_lengths[i] / 25); + tick_val = parseInt(this.cumulative_chr_lengths[i - 1]); + for (tick = _k = 0, _ref2 = tick_count - 1; 0 <= _ref2 ? _k <= _ref2 : _k >= _ref2; tick = 0 <= _ref2 ? ++_k : --_k) { + tick_val += 25; + chr_ticks.push(tick_val); } - return tick_vals; - }; + Array.prototype.push.apply(tick_vals, chr_ticks); + } + return tick_vals; + }; - Manhattan_Plot.prototype.add_x_axis = function() { - var next_chr, tmp_tick_val, xAxis, - _this = this; - xAxis = d3.svg.axis().scale(this.x_scale).orient("bottom").tickValues(this.create_x_axis_tick_values()); - next_chr = 1; - tmp_tick_val = 0; - xAxis.tickFormat(function(d) { - var next_chr_length, tick_val; - d3.format("d"); - if (d < _this.cumulative_chr_lengths[0]) { - tick_val = d; + Manhattan_Plot.prototype.add_x_axis = function() { + var next_chr, tmp_tick_val, + _this = this; + this.xAxis = d3.svg.axis().scale(this.x_scale).orient("bottom").tickValues(this.create_x_axis_tick_values()); + next_chr = 1; + tmp_tick_val = 0; + this.xAxis.tickFormat(function(d) { + var next_chr_length, tick_val; + d3.format("d"); + if (d < _this.cumulative_chr_lengths[0]) { + tick_val = d; + } else { + next_chr_length = _this.cumulative_chr_lengths[next_chr]; + if (d > next_chr_length) { + next_chr += 1; + tmp_tick_val = 25; + tick_val = tmp_tick_val; } else { - next_chr_length = _this.cumulative_chr_lengths[next_chr]; - if (d > next_chr_length) { - next_chr += 1; - tmp_tick_val = 25; - tick_val = tmp_tick_val; - } else { - tmp_tick_val += 25; - tick_val = tmp_tick_val; - } + tmp_tick_val += 25; + tick_val = tmp_tick_val; } - return tick_val; - }); - return this.svg.append("g").attr("class", "x_axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").attr("text-anchor", "right").attr("dx", "-1.6em").attr("transform", function(d) { - return "translate(-12,0) rotate(-90)"; - }); - }; + } + return tick_val; + }); + return this.svg.append("g").attr("class", "x_axis").attr("transform", "translate(0," + this.plot_height + ")").call(this.xAxis).selectAll("text").attr("text-anchor", "right").attr("dx", "-1.6em").attr("transform", function(d) { + return "translate(-12,0) rotate(-90)"; + }); + }; - Manhattan_Plot.prototype.add_y_axis = function() { - var yAxis; - yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5); - return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(yAxis); - }; + Manhattan_Plot.prototype.add_y_axis = function() { + this.yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5); + return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(this.yAxis); + }; - Manhattan_Plot.prototype.add_chr_lines = function() { - var _this = this; - return this.svg.selectAll("line").data(this.cumulative_chr_lengths, function(d) { - return d; - }).enter().append("line").attr("x1", this.x_scale).attr("x2", this.x_scale).attr("y1", this.y_buffer).attr("y2", this.plot_height).style("stroke", "#ccc"); - }; + Manhattan_Plot.prototype.add_axis_labels = function() { + return this.svg.append("text").attr("transform", "rotate(-90)").attr("y", 0 - (this.plot_height / 2)).attr("x", this.x_buffer).attr("dy", "1em").style("text-anchor", "middle").text("LOD Score"); + }; - Manhattan_Plot.prototype.fill_chr_areas = function() { - var _this = this; - console.log("cumu_chr_lengths:", this.cumulative_chr_lengths); - console.log("example:", this.x_scale(this.cumulative_chr_lengths[0])); - return this.svg.selectAll("rect.chr_fill_area").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) { - return d; - }).enter().append("rect").attr("x", function(d) { - if (i === 0) { - return _this.x_scale(0); - } else { - return _this.x_scale(d[1]); - } - }).attr("y", this.y_buffer).attr("width", function(d) { - return _this.x_scale(d[0]); - }).attr("height", this.plot_height - this.y_buffer); - }; + Manhattan_Plot.prototype.add_chr_lines = function() { + var _this = this; + return this.svg.selectAll("line").data(this.cumulative_chr_lengths, function(d) { + return d; + }).enter().append("line").attr("x1", this.x_scale).attr("x2", this.x_scale).attr("y1", this.y_buffer).attr("y2", this.plot_height).style("stroke", "#ccc"); + }; - Manhattan_Plot.prototype.fill_chr_areas2 = function() { - var _this = this; - console.log("cumu_chr_lengths:", this.cumulative_chr_lengths); - console.log("example:", this.x_scale(this.cumulative_chr_lengths[0])); - return this.svg.selectAll("rect.chr_fill_area").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) { - return d; - }).enter().append("rect").attr("x", function(d) { - if (i === 0) { - return _this.x_scale(0); - } else { - return _this.x_scale(d[1]); - } - }).attr("y", this.y_buffer).attr("width", function(d) { - return _this.x_scale(d[0]); - }).attr("height", this.plot_height - this.y_buffer).attr("fill", function(d, i) { - return "whitesmoke"; - }); - }; + Manhattan_Plot.prototype.fill_chr_areas = function() { + var _this = this; + console.log("cumu_chr_lengths:", this.cumulative_chr_lengths); + console.log("example:", this.x_scale(this.cumulative_chr_lengths[0])); + return this.svg.selectAll("rect.chr_fill_area").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) { + return d; + }).enter().append("rect").attr("x", function(d) { + if (i === 0) { + return _this.x_scale(0); + } else { + return _this.x_scale(d[1]); + } + }).attr("y", this.y_buffer).attr("width", function(d) { + return _this.x_scale(d[0]); + }).attr("height", this.plot_height - this.y_buffer); + }; - Manhattan_Plot.prototype.add_chr_labels = function() { - var chr_info, chr_names, key, - _this = this; - chr_names = []; - for (key in this.chromosomes) { - chr_names.push(key); + Manhattan_Plot.prototype.fill_chr_areas2 = function() { + var _this = this; + console.log("cumu_chr_lengths:", this.cumulative_chr_lengths); + console.log("example:", this.x_scale(this.cumulative_chr_lengths[0])); + return this.svg.selectAll("rect.chr_fill_area").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) { + return d; + }).enter().append("rect").attr("x", function(d) { + if (i === 0) { + return _this.x_scale(0); + } else { + return _this.x_scale(d[1]); } - chr_info = _.zip(chr_names, this.chr_lengths, this.cumulative_chr_lengths); - return this.svg.selectAll("text").data(chr_info, function(d) { - return d; - }).enter().append("text").text(function(d) { - if (d[0] === "23") { - return "X"; - } else if (d[0] === "24") { - return "X/Y"; - } else { - return d[0]; - } - }).attr("x", function(d) { - return _this.x_scale(d[2] - d[1] / 2); - }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("fill", "black"); - }; + }).attr("y", this.y_buffer).attr("width", function(d) { + return _this.x_scale(d[0]); + }).attr("height", this.plot_height - this.y_buffer).attr("fill", function(d, i) { + return "whitesmoke"; + }); + }; + + Manhattan_Plot.prototype.add_chr_labels = function() { + var chr_info, chr_names, key, + _this = this; + chr_names = []; + for (key in this.chromosomes) { + chr_names.push(key); + } + chr_info = _.zip(chr_names, this.chr_lengths, this.cumulative_chr_lengths); + return this.svg.selectAll("text").data(chr_info, function(d) { + return d; + }).enter().append("text").attr("class", "chr_label").text(function(d) { + if (d[0] === "23") { + return "X"; + } else if (d[0] === "24") { + return "X/Y"; + } else { + return d[0]; + } + }).attr("x", function(d) { + return _this.x_scale(d[2] - d[1] / 2); + }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("fill", "black").on("click", function(d) { + var this_chr; + this_chr = d; + return _this.redraw_plot(d); + }); + }; + + Manhattan_Plot.prototype.add_plot_points = function() { + var _this = this; + return this.plot_point = this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) { + return _this.x_scale(d[0]); + }).attr("cy", function(d) { + return _this.y_scale(d[1]); + }).attr("r", 2).attr("id", function(d) { + return "point_" + String(d[2]); + }).classed("circle", true).on("mouseover", function(d) { + var this_id; + console.log("d3.event is:", d3.event); + console.log("d is:", d); + this_id = "point_" + String(d[2]); + return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d)); + }).on("mouseout", function(d) { + var this_id; + this_id = "point_" + String(d[2]); + return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", 2).attr("fill", "black"); + }); + }; + + Manhattan_Plot.prototype.redraw_plot = function(chr_ob) { + console.log("chr_name is:", chr_ob[0]); + console.log("chr_length is:", chr_ob[1]); + $('#manhattan_plot').remove(); + $('#manhattan_plot_container').append('<div id="manhattan_plot"></div>'); + return root.chr_plot = new Chr_Manhattan_Plot(600, 1200, chr_ob); + }; + + Manhattan_Plot.prototype.create_zoom_pane = function() { + var zoom; + zoom = d3.behavior.zoom().on("zoom", draw); + return this.svg.append("rect").attr("class", "pane").attr("width", this.plot_width).attr("height", this.plot_height).call(zoom); + }; + + Manhattan_Plot.prototype.draw = function() { + this.svg.select("g.x_axis").call(this.xAxis); + this.svg.select("g.y_axis").call(this.yAxis); + this.svg.select("path.area").attr("d", area); + return this.svg.select("path.line").attr("d", line); + }; - Manhattan_Plot.prototype.add_plot_points = function() { - var _this = this; - return this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) { - return _this.x_scale(d[0]); - }).attr("cy", function(d) { - return _this.y_scale(d[1]); - }).attr("r", 2).attr("id", function(d) { - return "point_" + String(d[2]); - }).classed("circle", true).on("mouseover", function(d) { - var this_id; - console.log("d3.event is:", d3.event); - console.log("d is:", d); - this_id = "point_" + String(d[2]); - return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d)); - }).on("mouseout", function(d) { - var this_id; - this_id = "point_" + String(d[2]); - return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.show_marker_in_table()); - }); - }; + return Manhattan_Plot; - return Manhattan_Plot; + })(); - })(); - console.time('Create manhattan plot'); - new Manhattan_Plot(600, 1200); - return console.timeEnd('Create manhattan plot'); - }); + root.Manhattan_Plot = new Manhattan_Plot(600, 1200); }).call(this); diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html index 61a18e66..05fb9845 100644 --- a/wqflask/wqflask/templates/marker_regression.html +++ b/wqflask/wqflask/templates/marker_regression.html @@ -18,8 +18,10 @@ Manhattan Plot </h2> </div> - <div id="manhattan_plots" class="manhattan_plots"> - + <div id="manhattan_plot_container" class="manhattan_plot_container"> + <div id="manhattan_plot" class="manhattan_plots"> + + </div> </div> <div> <h2> @@ -39,7 +41,7 @@ </thead> <tbody> {% for marker in qtl_results %} - {% if marker.lod_score > 2 %} + {% if marker.lod_score > lod_cutoff %} <tr> <td>{{loop.index}}</td> <td>{{marker.lod_score}}</td> @@ -51,7 +53,6 @@ {% endfor %} </tbody> </table> - </div> <!-- End of body --> @@ -67,12 +68,13 @@ <!-- <script language="javascript" type="text/javascript" src="/static/packages/jqplot/excanvas.js"></script>--> <![endif]--> <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> - <script language="javascript" type="text/javascript" src="/static/new/javascript/marker_regression.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/DT_bootstrap/DT_bootstrap.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/TableTools/media/js/TableTools.min.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/marker_regression.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/chr_manhattan_plot.js"></script> <script type="text/javascript" charset="utf-8"> |