aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZachary Sloan2014-02-24 22:07:19 +0000
committerZachary Sloan2014-02-24 22:07:19 +0000
commit6147c1f64ccb822512dce6fadb56d0d71eab7572 (patch)
tree65a6737809859e237a455507f35f4bc1c414d29d
parent1a5ac67c8ac0a47deeea6fe2d1c4f59f94793a6c (diff)
downloadgenenetwork2-6147c1f64ccb822512dce6fadb56d0d71eab7572.tar.gz
Chromosome zoom is working for the marker regression manhattan plot
and results show up correctly in the table again
-rwxr-xr-xwqflask/wqflask/marker_regression/marker_regression.py15
-rwxr-xr-xwqflask/wqflask/my_pylmm/pyLMM/lmm.py2
-rw-r--r--wqflask/wqflask/static/new/css/marker_regression.css9
-rw-r--r--wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee211
-rw-r--r--wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js206
-rw-r--r--wqflask/wqflask/static/new/javascript/histogram.coffee1
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.coffee788
-rw-r--r--wqflask/wqflask/static/new/javascript/marker_regression.js628
-rw-r--r--wqflask/wqflask/templates/marker_regression.html12
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">