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