diff options
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/marker_regression.coffee | 56 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/marker_regression.js | 50 |
2 files changed, 66 insertions, 40 deletions
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee index 2b09fbc8..4b0915c2 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee +++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee @@ -12,16 +12,14 @@ $ -> @y_coords = [] @marker_names = [] @create_coordinates() - @scaled_chr_lengths = @get_chr_lengths() + [@chr_lengths, @cumulative_chr_lengths] = @get_chr_lengths() # Buffer to allow for the ticks/labels to be drawn - @x_buffer = @plot_width/25 + @x_buffer = @plot_width/30 @y_buffer = @plot_height/20 #@x_max = d3.max(@x_coords) - console.log("x_max is", d3.max(@x_coords)) @x_max = @total_length - console.log("x_max is", @x_max) @y_max = d3.max(@y_coords) * 1.2 @svg = @create_svg() @@ -42,22 +40,24 @@ $ -> 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) + 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 ### 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("total length is:", total_length) - return cumulative_chr_lengths + return [chr_lengths, cumulative_chr_lengths] create_coordinates: () -> chr_lengths = [] @@ -85,9 +85,6 @@ $ -> else marker_name = "" $("#qtl_results_filter").find("input:first").val(marker_name).keyup() - - #unselect_marker: () -> - # $("#qtl_results_filter").find("input:first").val("").keyup() create_svg: () -> svg = d3.select("#manhattan_plots") @@ -97,15 +94,6 @@ $ -> return svg - create_scales: () -> - @x_scale = d3.scale.linear() - .domain([0, d3.max(@x_coords)]) - .range([@x_buffer, @plot_width]) - - @y_scale = d3.scale.linear() - .domain([0, @y_max]) - .range([@plot_height, @y_buffer]) - create_graph: () -> @add_border() @add_y_axis() @@ -136,6 +124,16 @@ $ -> ) .style("stroke", "#000") + create_scales: () -> + console.log("plot_width is: ", @plot_width) + @x_scale = d3.scale.linear() + .domain([0, d3.max(@x_coords)]) + .range([@x_buffer, @plot_width]) + + @y_scale = d3.scale.linear() + .domain([0, @y_max]) + .range([@plot_height, @y_buffer]) + add_y_axis: () -> yAxis = d3.svg.axis() .scale(@y_scale) @@ -149,7 +147,7 @@ $ -> add_chr_lines: () -> @svg.selectAll("line") - .data(@scaled_chr_lengths, (d) => + .data(@cumulative_chr_lengths, (d) => return d ) .enter() @@ -159,18 +157,30 @@ $ -> .attr("y1", @y_buffer) .attr("y2", @plot_height) .style("stroke", "#ccc") + + add_chr_labels: () -> + @svg.selectAll("text") + .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) => + label_positions = [] + for chr in d + label_positions.push(chr[1] - chr[0]/2) + return label_positions + ) + .enter() + .append("text") add_plot_points: () -> + console.log("x_max is:", @x_max) @svg.selectAll("circle") .data(@plot_coordinates) .enter() .append("circle") .attr("cx", (d) => - return @x_buffer + (@plot_width * d[0]/@x_max) + return @x_buffer + ((@plot_width-@x_buffer) * d[0]/@x_max) ) .attr("cy", (d) => - return @plot_height - ((@plot_height) * d[1]/@y_max) + return @plot_height - ((@plot_height-@y_buffer) * d[1]/@y_max) ) .attr("r", 2) .classed("circle", true) diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js index 38d88208..a1c73913 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.js +++ b/wqflask/wqflask/static/new/javascript/marker_regression.js @@ -7,6 +7,7 @@ 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; @@ -17,12 +18,10 @@ this.y_coords = []; this.marker_names = []; this.create_coordinates(); - this.scaled_chr_lengths = this.get_chr_lengths(); - this.x_buffer = this.plot_width / 25; + _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; - console.log("x_max is", d3.max(this.x_coords)); this.x_max = this.total_length; - console.log("x_max is", this.x_max); 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); @@ -50,21 +49,23 @@ 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) + 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 cumulative_chr_lengths, key, this_length, total_length; + var chr_lengths, cumulative_chr_lengths, key, this_length, total_length; 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("total length is:", total_length); - return cumulative_chr_lengths; + return [chr_lengths, cumulative_chr_lengths]; }; Manhattan_Plot.prototype.create_coordinates = function() { @@ -111,11 +112,6 @@ return svg; }; - Manhattan_Plot.prototype.create_scales = function() { - this.x_scale = d3.scale.linear().domain([0, d3.max(this.x_coords)]).range([this.x_buffer, this.plot_width]); - return this.y_scale = d3.scale.linear().domain([0, this.y_max]).range([this.plot_height, this.y_buffer]); - }; - Manhattan_Plot.prototype.create_graph = function() { this.add_border(); this.add_y_axis(); @@ -138,6 +134,12 @@ }).style("stroke", "#000"); }; + Manhattan_Plot.prototype.create_scales = function() { + console.log("plot_width is: ", this.plot_width); + this.x_scale = d3.scale.linear().domain([0, d3.max(this.x_coords)]).range([this.x_buffer, this.plot_width]); + return this.y_scale = d3.scale.linear().domain([0, this.y_max]).range([this.plot_height, this.y_buffer]); + }; + Manhattan_Plot.prototype.add_y_axis = function() { var yAxis; yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5); @@ -146,17 +148,31 @@ Manhattan_Plot.prototype.add_chr_lines = function() { var _this = this; - return this.svg.selectAll("line").data(this.scaled_chr_lengths, function(d) { + 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_chr_labels = function() { + var _this = this; + return this.svg.selectAll("text").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) { + var chr, label_positions, _i, _len; + label_positions = []; + for (_i = 0, _len = d.length; _i < _len; _i++) { + chr = d[_i]; + label_positions.push(chr[1] - chr[0] / 2); + } + return label_positions; + }).enter().append("text"); + }; + Manhattan_Plot.prototype.add_plot_points = function() { var _this = this; + console.log("x_max is:", this.x_max); return this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) { - return _this.x_buffer + (_this.plot_width * d[0] / _this.x_max); + return _this.x_buffer + ((_this.plot_width - _this.x_buffer) * d[0] / _this.x_max); }).attr("cy", function(d) { - return _this.plot_height - (_this.plot_height * d[1] / _this.y_max); + return _this.plot_height - ((_this.plot_height - _this.y_buffer) * d[1] / _this.y_max); }).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.show_marker_in_table(d)); }).on("mouseout", function() { |