Created lines in marker regression scatter plot separating

chromosomes

3 files changed, 42 insertions, 18 deletions

diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index 4ea35593..53f52704 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -5,14 +5,17 @@ $ ->
         constructor: ->
             @qtl_results = js_data.qtl_results
             @max_chr = @get_max_chr()
-            
+
+            @plot_height = 500
+            @plot_width = 1000
+
             @x_coords = []
             @y_coords = []
             @get_coordinates()
             
             @x_max = d3.max(@x_coords)
             @y_max = d3.max(@y_coords)
-            
+
             @plot_coordinates = _.zip(@x_coords, @y_coords)
             @create_graph()
 
@@ -37,27 +40,45 @@ $ ->
                     else if result.chr == "Y"
                         chr = @max_chr + 2
         
-                @x_coords.push((chr * 200) + parseFloat(result.Mb))
+                @x_coords.push(((chr-1) * 200) + parseFloat(result.Mb))
                 @y_coords.push(result.lrs_value)
 
 
         create_graph: () ->
             svg = d3.select("#manhattan_plots")
                         .append("svg")
-                        .attr("width", 1000)
-                        .attr("height", 800)
+                        .style('border', '2px solid black')
+                        .attr("width", @plot_width)
+                        .attr("height", @plot_height)
         
             svg.selectAll("circle")
                 .data(@plot_coordinates)
                 .enter()
                 .append("circle")
                 .attr("cx", (d) =>
-                    return (1000 * d[0]/@x_max)
-                     #return ((900 * (d[0]/x_max)) + 50)
+                    return (@plot_width * d[0]/@x_max)
                 )
                 .attr("cy", (d) =>
-                     return 800 - (600 * d[1]/@y_max)
+                    return @plot_height - ((0.8*@plot_height) * d[1]/@y_max)
                 )
-                .attr("r", 3)
+                .attr("r", 2)
+
+            x = d3.scale.linear()
+                .domain([0, @x_max])
+                .range([0, @plot_width])
+                
+            y = d3.scale.linear()
+                .domain([0, @y_max])
+                .range([0, @plot_height])
+                
+            svg.selectAll("line")
+                .data(x.ticks(@max_chr))
+                .enter()
+                .append("line")
+                .attr("x1", x)
+                .attr("x2", x)
+                .attr("y1", 0)
+                .attr("y2", @plot_height)
+                .style("stroke", "#ccc")
 
     new Manhattan_Plot
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index d2bc02d7..1d3afacd 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -8,6 +8,8 @@
       function Manhattan_Plot() {
         this.qtl_results = js_data.qtl_results;
         this.max_chr = this.get_max_chr();
+        this.plot_height = 500;
+        this.plot_width = 1000;
         this.x_coords = [];
         this.y_coords = [];
         this.get_coordinates();
@@ -48,21 +50,24 @@
               chr = this.max_chr + 2;
             }
           }
-          this.x_coords.push((chr * 200) + parseFloat(result.Mb));
+          this.x_coords.push(((chr - 1) * 200) + parseFloat(result.Mb));
           _results.push(this.y_coords.push(result.lrs_value));
         }
         return _results;
       };
 
       Manhattan_Plot.prototype.create_graph = function() {
-        var svg,
+        var svg, x, y,
           _this = this;
-        svg = d3.select("#manhattan_plots").append("svg").attr("width", 1000).attr("height", 800);
-        return svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
-          return 1000 * d[0] / _this.x_max;
+        svg = d3.select("#manhattan_plots").append("svg").style('border', '2px solid black').attr("width", this.plot_width).attr("height", this.plot_height);
+        svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
+          return _this.plot_width * d[0] / _this.x_max;
         }).attr("cy", function(d) {
-          return 800 - (600 * d[1] / _this.y_max);
-        }).attr("r", 3);
+          return _this.plot_height - ((0.8 * _this.plot_height) * d[1] / _this.y_max);
+        }).attr("r", 2);
+        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(x.ticks(this.max_chr)).enter().append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", this.plot_height).style("stroke", "#ccc");
       };
 
       return Manhattan_Plot;
diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html
index 0c537d19..b55580c3 100644
--- a/wqflask/wqflask/templates/marker_regression.html
+++ b/wqflask/wqflask/templates/marker_regression.html
@@ -20,8 +20,6 @@
 
     <div class="container">
         <div id="manhattan_plots" class="manhattan_plots"></div>
-        <div id="permutation_histogram" class="permutation_histogram"></div>
-        
         <table cellpadding="0" cellspacing="0" border="0" id="qtl_results" class="table table-hover table-striped table-bordered">
             <thead>
                 <tr>