Chromosome zoom is working for the marker regression manhattan plot

and results show up correctly in the table again

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">