Plot points and chromosome lines are now correct

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() {