From 475c96934a97bf56f4f7a6940249f2f25923e7c5 Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Wed, 20 Feb 2013 16:01:18 -0600 Subject: Created y-axis Split create_graph into many functions Added a buffer to the x and y dimensions in order to add tick labels for the x and y axis --- wqflask/wqflask/search_results.py | 10 -- .../static/new/javascript/marker_regression.coffee | 190 +++++++++++---------- .../static/new/javascript/marker_regression.js | 92 +++++++--- wqflask/wqflask/templates/marker_regression.html | 2 +- 4 files changed, 168 insertions(+), 126 deletions(-) diff --git a/wqflask/wqflask/search_results.py b/wqflask/wqflask/search_results.py index d20d7d89..fb8e0921 100644 --- a/wqflask/wqflask/search_results.py +++ b/wqflask/wqflask/search_results.py @@ -41,16 +41,6 @@ class SearchResultPage(): def __init__(self, kw): - print("initing SearchResultPage") - #import logging_tree - #logging_tree.printout() - #self.fd = fd - #templatePage.__init__(self, fd) - #assert self.openMysql(), "Couldn't open MySQL" - - # change back to self.dataset - #if not self.dataset or self.dataset == 'spacer': - # #Error, No dataset selected ########################################### # Names and IDs of group / F2 set diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee index b7d3c179..4c67c5a5 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee +++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee @@ -3,25 +3,28 @@ $ -> constructor: (@plot_height, @plot_width) -> @qtl_results = js_data.qtl_results @chromosomes = js_data.chromosomes - - #@plot_height = 500 - #@plot_width = 100 + @total_length = 0 @max_chr = @get_max_chr() @scaled_chr_lengths = @get_chr_lengths() - console.log("scaled_chr_lengths is", @scaled_chr_lengths) @x_coords = [] @y_coords = [] - @marker_names = [] - @get_coordinates() + @marker_names = [] + @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) - console.log("x_max is:", @x_max) - @y_max = d3.max(@y_coords) + @y_max = d3.max(@y_coords) * 1.2 + @svg = @create_svg() @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names) + @plot_height = @plot_height - @y_buffer + @create_scales() @create_graph() @@ -41,7 +44,7 @@ $ -> lines separating chromosomes (the position of one on the graph is its own length plus the lengths of all preceding chromosomes) - ### + ### cumulative_chr_lengths = [] total_length = 0 @@ -49,15 +52,10 @@ $ -> this_length = @chromosomes[key] cumulative_chr_lengths.push(total_length + this_length) total_length += this_length - - console.log("@plot_width:", @plot_width) - console.log("lengths:", cumulative_chr_lengths) - console.log("total_length:", total_length) - - #scaled_chr_lengths = (@plot_width * (x/total_length) for x in cumulative_chr_lengths) + return cumulative_chr_lengths - get_coordinates: () -> + create_coordinates: () -> chr_lengths = [] chr_seen = [] for result in js_data.qtl_results @@ -74,44 +72,99 @@ $ -> console.log("chr_lengths are:", chr_lengths) + show_marker_in_table: (marker_info) -> + ### 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).keyup() + + #unselect_marker: () -> + # $("#qtl_results_filter").find("input:first").val("").keyup() - display_info: (d) -> - $("#qtl_results_filter").find("input:first").val(d[2]).keyup() + create_svg: () -> + svg = d3.select("#manhattan_plots") + .append("svg") + .attr("width", @plot_width) + .attr("height", @plot_height) - undisplay_info: () -> - $("#qtl_results_filter").find("input:first").val("").keyup() + return svg + + create_scales: () -> + @x_scale = d3.scale.linear() + .domain([0, @x_max]) + .range([@x_buffer, @plot_width]) + + @y_scale = d3.scale.linear() + .domain([0, @y_max]) + .range([@plot_height, @y_buffer]) create_graph: () -> - svg = d3.select("#manhattan_plots") - .append("svg") - .style('border', '2px solid black') - .attr("width", @plot_width) - .attr("height", @plot_height) - - #svg.selectAll("text") - # .data(@plot_coordinates); - # .enter() - # .append("text") - # .attr("x", (d) => - # return (@plot_width * d[0]/@x_max) - # ) - # .attr("y", (d) => - # return @plot_height - ((0.8*@plot_height) * d[1]/@y_max) - # ) - # .text((d) => d[2]) - # .attr("font-family", "sans-serif") - # .attr("font-size", "12px") - # .attr("fill", "black"); + @add_border() + @add_y_axis() + @add_chr_lines() + @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_y_axis: () -> + yAxis = d3.svg.axis() + .scale(@y_scale) + .orient("left") + .ticks(5) - svg.selectAll("circle") + @svg.append("g") + .attr("class", "axis") + .attr("transform", "translate(" + @x_buffer + ",0)") + .call(yAxis) + + add_chr_lines: () -> + @svg.selectAll("line") + .data(@scaled_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") + + + add_plot_points: () -> + @svg.selectAll("circle") .data(@plot_coordinates) .enter() .append("circle") .attr("cx", (d) => - return (@plot_width * d[0]/@x_max) + return @x_buffer + (@plot_width * d[0]/@x_max) ) .attr("cy", (d) => - return @plot_height - ((0.8*@plot_height) * d[1]/@y_max) + return @plot_height - ((@plot_height) * d[1]/@y_max) ) .attr("r", 2) .classed("circle", true) @@ -119,60 +172,13 @@ $ -> d3.select(d3.event.target).classed("d3_highlight", true) .attr("r", 5) .attr("fill", "yellow") - .call(@display_info(d)) + .call(@show_marker_in_table(d)) ) .on("mouseout", () => d3.select(d3.event.target).classed("d3_highlight", false) .attr("r", 2) .attr("fill", "black") - .call(@undisplay_info()) + .call(@show_marker_in_table()) ) - .attr("title", "foobar") - - #.append("svg:text") - #.text("test") - #.attr("dx", 12) - #.attr("dy", ".35em") - #.attr("font-family", "sans-serif") - #.attr("font-size", "11px") - #.attr("fill", "red") - #.attr("x", @plot_width * d[0]/@x_max) - #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max)) - - - #d3.select(this).enter().append("svg:text") - # .text("test") - # .attr("x", function(d, i) { return i; } ) - # .attr("y", function(d) { return -1 * d; }) - # }) - #.attr("font-family", "sans-serif") - #.attr("font-size", "11px") - #.attr("fill", "red") - #.text(d[1]) - #.attr("x", @plot_width * d[0]/@x_max) - #.attr("y", @plot_height - ((0.8*@plot_height) * d[1]/@y_max)) - #.attr("font-family", "sans-serif") - #.attr("font-size", "11px") - #.attr("fill", "red") - - - - x = d3.scale.linear() - .domain([0, @x_max]) - .range([0, @plot_width]) - - y = d3.scale.linear() - .domain([0, @y_max]) - .range([0, @plot_height]) - - svg.selectAll("line") - .data(@scaled_chr_lengths) - .enter() - .append("line") - .attr("x1", x) - .attr("x2", x) - .attr("y1", 0) - .attr("y2", @plot_height) - .style("stroke", "#ccc") new Manhattan_Plot(600, 1200) diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js index 65aee69a..8b99b28f 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.js +++ b/wqflask/wqflask/static/new/javascript/marker_regression.js @@ -14,15 +14,18 @@ this.total_length = 0; this.max_chr = this.get_max_chr(); this.scaled_chr_lengths = this.get_chr_lengths(); - console.log("scaled_chr_lengths is", this.scaled_chr_lengths); this.x_coords = []; this.y_coords = []; this.marker_names = []; - this.get_coordinates(); + this.create_coordinates(); + this.x_buffer = this.plot_width / 30; + this.y_buffer = this.plot_height / 20; this.x_max = d3.max(this.x_coords); - console.log("x_max is:", this.x_max); - this.y_max = d3.max(this.y_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); + this.plot_height = this.plot_height - this.y_buffer; + this.create_scales(); this.create_graph(); } @@ -58,13 +61,10 @@ cumulative_chr_lengths.push(total_length + this_length); total_length += this_length; } - console.log("@plot_width:", this.plot_width); - console.log("lengths:", cumulative_chr_lengths); - console.log("total_length:", total_length); return cumulative_chr_lengths; }; - Manhattan_Plot.prototype.get_coordinates = function() { + Manhattan_Plot.prototype.create_coordinates = function() { var chr_length, chr_lengths, chr_seen, result, _i, _len, _ref, _ref1; chr_lengths = []; chr_seen = []; @@ -87,30 +87,76 @@ return console.log("chr_lengths are:", chr_lengths); }; - Manhattan_Plot.prototype.display_info = function(d) { - return $("#qtl_results_filter").find("input:first").val(d[2]).keyup(); + Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) { + /* Searches for the select marker in the results table below + */ + + var marker_name; + if (marker_info) { + marker_name = marker_info[2]; + } else { + marker_name = ""; + } + return $("#qtl_results_filter").find("input:first").val(marker_name).keyup(); }; - Manhattan_Plot.prototype.undisplay_info = function() { - return $("#qtl_results_filter").find("input:first").val("").keyup(); + Manhattan_Plot.prototype.create_svg = function() { + var svg; + svg = d3.select("#manhattan_plots").append("svg").attr("width", this.plot_width).attr("height", this.plot_height); + return svg; + }; + + Manhattan_Plot.prototype.create_scales = function() { + this.x_scale = d3.scale.linear().domain([0, this.x_max]).range([this.x_buffer, this.plot_width]); + return this.y_scale = d3.scale.linear().domain([0, this.y_max]).range([this.plot_height, this.y_buffer]); }; Manhattan_Plot.prototype.create_graph = function() { - var svg, x, y, + this.add_border(); + this.add_y_axis(); + this.add_chr_lines(); + return this.add_plot_points(); + }; + + Manhattan_Plot.prototype.add_border = function() { + var border_coords, _this = this; - svg = d3.select("#manhattan_plots").append("svg").style('border', '2px solid black').attr("width", this.plot_width).attr("height", this.plot_height); - svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) { - return _this.plot_width * d[0] / _this.x_max; + 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_y_axis = function() { + var yAxis; + yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5); + return this.svg.append("g").attr("class", "axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(yAxis); + }; + + Manhattan_Plot.prototype.add_chr_lines = function() { + var _this = this; + return this.svg.selectAll("line").data(this.scaled_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_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_buffer + (_this.plot_width * d[0] / _this.x_max); }).attr("cy", function(d) { - return _this.plot_height - ((0.8 * _this.plot_height) * d[1] / _this.y_max); + return _this.plot_height - (_this.plot_height * d[1] / _this.y_max); }).attr("r", 2).classed("circle", true).on("mouseover", function(d) { - return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.display_info(d)); + return d3.select(d3.event.target).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d)); }).on("mouseout", function() { - return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.undisplay_info()); - }).attr("title", "foobar"); - x = d3.scale.linear().domain([0, this.x_max]).range([0, this.plot_width]); - y = d3.scale.linear().domain([0, this.y_max]).range([0, this.plot_height]); - return svg.selectAll("line").data(this.scaled_chr_lengths).enter().append("line").attr("x1", x).attr("x2", x).attr("y1", 0).attr("y2", this.plot_height).style("stroke", "#ccc"); + return d3.select(d3.event.target).classed("d3_highlight", false).attr("r", 2).attr("fill", "black").call(_this.show_marker_in_table()); + }); }; return Manhattan_Plot; diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html index ffd1033e..fcc5aa52 100644 --- a/wqflask/wqflask/templates/marker_regression.html +++ b/wqflask/wqflask/templates/marker_regression.html @@ -35,7 +35,7 @@ Index - LRS + LOD Score Chr Mb Locus -- cgit v1.2.3