From e334da7dd55dd102c471a144ef0a63389830a256 Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Thu, 14 Feb 2013 17:45:10 -0600 Subject: Have marker regression results displaying as a scatterplot (just the points) using d3.js --- wqflask/base/data_set.py | 2 + .../static/new/javascript/marker_regression.coffee | 260 +++++---------------- .../static/new/javascript/marker_regression.js | 254 ++++---------------- .../new/javascript/marker_regression_old.coffee | 212 +++++++++++++++++ wqflask/wqflask/templates/marker_regression.html | 9 +- 5 files changed, 310 insertions(+), 427 deletions(-) create mode 100644 wqflask/wqflask/static/new/javascript/marker_regression_old.coffee (limited to 'wqflask') diff --git a/wqflask/base/data_set.py b/wqflask/base/data_set.py index d4e97370..0b3b5248 100755 --- a/wqflask/base/data_set.py +++ b/wqflask/base/data_set.py @@ -77,9 +77,11 @@ class Markers(object): def add_pvalues(self, p_values): for marker, p_value in itertools.izip(self.markers, p_values): marker['p_value'] = p_value + marker['lod_score'] = -math.log10(marker['p_value']) #Using -log(p) for the LRS; need to ask Rob how he wants to get LRS from p-values marker['lrs_value'] = -math.log10(marker['p_value']) * 4.61 + class DatasetGroup(object): """ Each group has multiple datasets; each species has multiple groups. diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee index 7eb62ec1..6a10d95e 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee +++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee @@ -1,212 +1,56 @@ $ -> - sort_number = (a, b) -> - return a - b - - class Permutation_Histogram - constructor: -> - @process_data() - @display_graph() - - process_data: -> - # Put the data in a format needed for graphing - # The permutation count for a particular integer range (10-11 or 12-13 for example) - # will be on the y-axis; LRS values will be on the x-axis - lrs_array = js_data.lrs_array - bars = {} - for lrs in lrs_array - floored = Math.floor(lrs) - if floored not of bars - bars[floored] = 0 - bars[floored] += 1 - - # Now we need to take the unordered hash - # And order the keys - keys = [] - for key of bars - keys.push(key) - - keys.sort(sort_number) - - - # Now that we have the ordered keys above - # We can build an array of arrays that jqPlot will use - @bars_ordered = [] - for key in keys - @bars_ordered.push([parseInt(key), bars[key]]) + x_coords = [] + y_coords = [] - console.log("bars is:", bars) - console.log("keys are:", keys) - console.log("bars_ordered are:", @bars_ordered) - #return bars_ordered - - display_graph: -> - - $.jqplot('permutation_histogram', [@bars_ordered], - title: 'Permutation Histogram' - seriesDefaults: - renderer:$.jqplot.BarRenderer - rendererOptions: - barWidth: 15 - pointLabels: - show: true - axesDefaults: - labelRenderer: $.jqplot.CanvasAxisLabelRenderer - axes: - xaxis: - min: 0 - label: "LRS" - pad: 1.1 - yaxis: - min: 0 - label: "Frequency" - ) - - #process_qtl_results = -> - # qtl_results = js_data.qtl_results - - #display_manhattan_plot = -> - - - - #bars_ordered = process_lrs_array() - #display_permutation_histogram(bars_ordered) - - class Chromosome - constructor: (@name) -> - @max_mb = 0 - @plot_points = [] - - process_point: (mb, lrs) -> - if mb > @max_mb - @max_mb = mb - @plot_points.push([mb, lrs]) - - display_graph: (max_lrs) -> - div_name = 'manhattan_plot_' + @name - console.log("div_name:", div_name) - - #console.log("max_lrs is", max_lrs) - - - x_axis_max = Math.ceil(@max_mb/25) * 25 - x_axis_ticks = [] - x_tick = 0 - while (x_tick <= x_axis_max) - x_axis_ticks.push(x_tick) - x_tick += 25 - - - plot_options = - title: @name - seriesDefaults: - showLine: false - markerRenderer: $.jqplot.MarkerRenderer - markerOptions: - style: "filledCircle" - size: 3 - axesDefaults: - tickRenderer: $.jqplot.CanvasAxisTickRenderer - labelRenderer: $.jqplot.CanvasAxisLabelRenderer - axes: - xaxis: - min: 0 - max: x_axis_max - ticks: x_axis_ticks - tickOptions: - angle: 90 - showGridline: false - formatString: '%d' - label: "Megabases" - - - if @name == "1" - plot_options.axes.yaxis = - min: 0 - max: Math.floor(max_lrs + 0.1 * max_lrs) - tickInterval: 1 - label: "LRS" - tickOptions: - formatString: '%d' - showGridline: false - else - plot_options.axes.yaxis = - show: false - min: 0 - max: Math.floor(max_lrs + 0.1 * max_lrs) - tickInterval: 1 - tickOptions: - formatString: '%d' - showGridline: false - - $.jqplot(div_name, [@plot_points], plot_options) - - class Manhattan_Plot - constructor: -> - @max_lrs = 0 - - @chromosomes = {} - @build_chromosomes() - - @display_graphs() - - build_chromosomes: -> - for result in js_data.qtl_results - #if result.locus.chromosome == '1' - chromosome = result.locus.chromosome - if chromosome not of @chromosomes - @chromosomes[chromosome] = new Chromosome(chromosome) - mb = parseInt(result.locus.mb) - if result.lrs > @max_lrs - @max_lrs = result.lrs - @chromosomes[chromosome].process_point(mb, result.lrs) - - display_graphs: -> - ### Call display_graph for each chromosome ### - - # First get everything in the right order - numbered_keys = [] - extra_keys = [] - for key of @chromosomes - if isNaN(key) - extra_keys.push(key) - else - numbered_keys.push(key) - - numbered_keys.sort(sort_number) - extra_keys.sort() - keys = numbered_keys.concat(extra_keys) - console.log("keys are:", keys) - - for key in keys - this_class = "manhattan_plot_segment" - if key != "1" - this_class += " no_y_axis" - html = """
""" - console.log("html is:", html) - $("#manhattan_plots").append(html) - @chromosomes[key].display_graph(@max_lrs) - - $('.jqplot-yaxis').hide() - $('#manhattan_plot_1').find('.jqplot-yaxis').show() - - #$(".jqplot-yaxis").hide() - #$(".jqplot-yaxis-tick").hide() - - - #process_data: -> - # qtl_results = js_data.qtl_results - # #console.log("qtl_results: ", qtl_results) - # @plot_points = [] - # @max_mb = 0 - # for result in qtl_results - # if result.locus.chromosome == '1' - # mb = parseInt(result.locus.mb) - # if mb > @max_mb - # @max_mb = mb - # @plot_points.push([mb, result.lrs]) + largest_chr = 0 + for result in js_data.qtl_results + chr = parseInt(result.chr) + console.log("foo:", chr, typeof(chr)) + if _.isNaN(chr) + console.log("Got NaN") + else + if chr > largest_chr + largest_chr = chr - - - new Permutation_Histogram - new Manhattan_Plot \ No newline at end of file + console.log("largest_chr is:", largest_chr) + + for result in js_data.qtl_results + chr = parseInt(result.chr) + if _.isNaN(chr) + if result.chr == "X" + chr = largest_chr + 1 + else if result.chr == "Y" + chr = largest_chr + 2 + + x_coords.push((chr * 200) + parseFloat(result.Mb)) + y_coords.push(result.lrs_value) + #plot_coordinates.push([x_coord, y_coord]) + + x_max = d3.max(x_coords) + y_max = d3.max(y_coords) + + plot_coordinates = _.zip(x_coords, y_coords) + + console.log(plot_coordinates) + + svg = d3.select("#manhattan_plots") + .append("svg") + .attr("width", 1000) + .attr("height", 800) + #.attr("transform", "translate(0," + y_max + ")") + #.attr("transform", "scale(1,-1)") + + + 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) + ) + .attr("cy", (d) => + return 800 - (600 * d[1]/y_max) + ) + .attr("r", 3) \ 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 19a7d051..d231ba5b 100644 --- a/wqflask/wqflask/static/new/javascript/marker_regression.js +++ b/wqflask/wqflask/static/new/javascript/marker_regression.js @@ -2,225 +2,49 @@ (function() { $(function() { - var Chromosome, Manhattan_Plot, Permutation_Histogram, sort_number; - sort_number = function(a, b) { - return a - b; - }; - Permutation_Histogram = (function() { - - function Permutation_Histogram() { - this.process_data(); - this.display_graph(); - } - - Permutation_Histogram.prototype.process_data = function() { - var bars, floored, key, keys, lrs, lrs_array, _i, _j, _len, _len1; - lrs_array = js_data.lrs_array; - bars = {}; - for (_i = 0, _len = lrs_array.length; _i < _len; _i++) { - lrs = lrs_array[_i]; - floored = Math.floor(lrs); - if (!(floored in bars)) { - bars[floored] = 0; - } - bars[floored] += 1; + var chr, largest_chr, plot_coordinates, result, svg, x_coords, x_max, y_coords, y_max, _i, _j, _len, _len1, _ref, _ref1, + _this = this; + x_coords = []; + y_coords = []; + largest_chr = 0; + _ref = js_data.qtl_results; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + result = _ref[_i]; + chr = parseInt(result.chr); + console.log("foo:", chr, typeof chr); + if (_.isNaN(chr)) { + console.log("Got NaN"); + } else { + if (chr > largest_chr) { + largest_chr = chr; } - keys = []; - for (key in bars) { - keys.push(key); - } - keys.sort(sort_number); - this.bars_ordered = []; - for (_j = 0, _len1 = keys.length; _j < _len1; _j++) { - key = keys[_j]; - this.bars_ordered.push([parseInt(key), bars[key]]); - } - console.log("bars is:", bars); - console.log("keys are:", keys); - return console.log("bars_ordered are:", this.bars_ordered); - }; - - Permutation_Histogram.prototype.display_graph = function() { - return $.jqplot('permutation_histogram', [this.bars_ordered], { - title: 'Permutation Histogram', - seriesDefaults: { - renderer: $.jqplot.BarRenderer, - rendererOptions: { - barWidth: 15 - }, - pointLabels: { - show: true - } - }, - axesDefaults: { - labelRenderer: $.jqplot.CanvasAxisLabelRenderer - }, - axes: { - xaxis: { - min: 0, - label: "LRS", - pad: 1.1 - }, - yaxis: { - min: 0, - label: "Frequency" - } - } - }); - }; - - return Permutation_Histogram; - - })(); - Chromosome = (function() { - - function Chromosome(name) { - this.name = name; - this.max_mb = 0; - this.plot_points = []; } - - Chromosome.prototype.process_point = function(mb, lrs) { - if (mb > this.max_mb) { - this.max_mb = mb; - } - return this.plot_points.push([mb, lrs]); - }; - - Chromosome.prototype.display_graph = function(max_lrs) { - var div_name, plot_options, x_axis_max, x_axis_ticks, x_tick; - div_name = 'manhattan_plot_' + this.name; - console.log("div_name:", div_name); - x_axis_max = Math.ceil(this.max_mb / 25) * 25; - x_axis_ticks = []; - x_tick = 0; - while (x_tick <= x_axis_max) { - x_axis_ticks.push(x_tick); - x_tick += 25; + } + console.log("largest_chr is:", largest_chr); + _ref1 = js_data.qtl_results; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + result = _ref1[_j]; + chr = parseInt(result.chr); + if (_.isNaN(chr)) { + if (result.chr === "X") { + chr = largest_chr + 1; + } else if (result.chr === "Y") { + chr = largest_chr + 2; } - plot_options = { - title: this.name, - seriesDefaults: { - showLine: false, - markerRenderer: $.jqplot.MarkerRenderer, - markerOptions: { - style: "filledCircle", - size: 3 - } - }, - axesDefaults: { - tickRenderer: $.jqplot.CanvasAxisTickRenderer, - labelRenderer: $.jqplot.CanvasAxisLabelRenderer - }, - axes: { - xaxis: { - min: 0, - max: x_axis_max, - ticks: x_axis_ticks, - tickOptions: { - angle: 90, - showGridline: false, - formatString: '%d' - }, - label: "Megabases" - } - } - }; - if (this.name === "1") { - plot_options.axes.yaxis = { - min: 0, - max: Math.floor(max_lrs + 0.1 * max_lrs), - tickInterval: 1, - label: "LRS", - tickOptions: { - formatString: '%d', - showGridline: false - } - }; - } else { - plot_options.axes.yaxis = { - show: false, - min: 0, - max: Math.floor(max_lrs + 0.1 * max_lrs), - tickInterval: 1, - tickOptions: { - formatString: '%d', - showGridline: false - } - }; - } - return $.jqplot(div_name, [this.plot_points], plot_options); - }; - - return Chromosome; - - })(); - Manhattan_Plot = (function() { - - function Manhattan_Plot() { - this.max_lrs = 0; - this.chromosomes = {}; - this.build_chromosomes(); - this.display_graphs(); } - - Manhattan_Plot.prototype.build_chromosomes = function() { - var chromosome, mb, result, _i, _len, _ref, _results; - _ref = js_data.qtl_results; - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - result = _ref[_i]; - chromosome = result.locus.chromosome; - if (!(chromosome in this.chromosomes)) { - this.chromosomes[chromosome] = new Chromosome(chromosome); - } - mb = parseInt(result.locus.mb); - if (result.lrs > this.max_lrs) { - this.max_lrs = result.lrs; - } - _results.push(this.chromosomes[chromosome].process_point(mb, result.lrs)); - } - return _results; - }; - - Manhattan_Plot.prototype.display_graphs = function() { - /* Call display_graph for each chromosome - */ - - var extra_keys, html, key, keys, numbered_keys, this_class, _i, _len; - numbered_keys = []; - extra_keys = []; - for (key in this.chromosomes) { - if (isNaN(key)) { - extra_keys.push(key); - } else { - numbered_keys.push(key); - } - } - numbered_keys.sort(sort_number); - extra_keys.sort(); - keys = numbered_keys.concat(extra_keys); - console.log("keys are:", keys); - for (_i = 0, _len = keys.length; _i < _len; _i++) { - key = keys[_i]; - this_class = "manhattan_plot_segment"; - if (key !== "1") { - this_class += " no_y_axis"; - } - html = "
"; - console.log("html is:", html); - $("#manhattan_plots").append(html); - this.chromosomes[key].display_graph(this.max_lrs); - } - $('.jqplot-yaxis').hide(); - return $('#manhattan_plot_1').find('.jqplot-yaxis').show(); - }; - - return Manhattan_Plot; - - })(); - new Permutation_Histogram; - return new Manhattan_Plot; + x_coords.push((chr * 200) + parseFloat(result.Mb)); + y_coords.push(result.lrs_value); + } + x_max = d3.max(x_coords); + y_max = d3.max(y_coords); + plot_coordinates = _.zip(x_coords, y_coords); + console.log(plot_coordinates); + svg = d3.select("#manhattan_plots").append("svg").attr("width", 1000).attr("height", 800); + return svg.selectAll("circle").data(plot_coordinates).enter().append("circle").attr("cx", function(d) { + return 1000 * d[0] / x_max; + }).attr("cy", function(d) { + return 800 - (600 * d[1] / y_max); + }).attr("r", 3); }); }).call(this); diff --git a/wqflask/wqflask/static/new/javascript/marker_regression_old.coffee b/wqflask/wqflask/static/new/javascript/marker_regression_old.coffee new file mode 100644 index 00000000..7eb62ec1 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/marker_regression_old.coffee @@ -0,0 +1,212 @@ +$ -> + sort_number = (a, b) -> + return a - b + + + class Permutation_Histogram + constructor: -> + @process_data() + @display_graph() + + process_data: -> + # Put the data in a format needed for graphing + # The permutation count for a particular integer range (10-11 or 12-13 for example) + # will be on the y-axis; LRS values will be on the x-axis + lrs_array = js_data.lrs_array + bars = {} + for lrs in lrs_array + floored = Math.floor(lrs) + if floored not of bars + bars[floored] = 0 + bars[floored] += 1 + + # Now we need to take the unordered hash + # And order the keys + keys = [] + for key of bars + keys.push(key) + + keys.sort(sort_number) + + + # Now that we have the ordered keys above + # We can build an array of arrays that jqPlot will use + @bars_ordered = [] + for key in keys + @bars_ordered.push([parseInt(key), bars[key]]) + + console.log("bars is:", bars) + console.log("keys are:", keys) + console.log("bars_ordered are:", @bars_ordered) + #return bars_ordered + + display_graph: -> + + $.jqplot('permutation_histogram', [@bars_ordered], + title: 'Permutation Histogram' + seriesDefaults: + renderer:$.jqplot.BarRenderer + rendererOptions: + barWidth: 15 + pointLabels: + show: true + axesDefaults: + labelRenderer: $.jqplot.CanvasAxisLabelRenderer + axes: + xaxis: + min: 0 + label: "LRS" + pad: 1.1 + yaxis: + min: 0 + label: "Frequency" + ) + + #process_qtl_results = -> + # qtl_results = js_data.qtl_results + + #display_manhattan_plot = -> + + + + #bars_ordered = process_lrs_array() + #display_permutation_histogram(bars_ordered) + + class Chromosome + constructor: (@name) -> + @max_mb = 0 + @plot_points = [] + + process_point: (mb, lrs) -> + if mb > @max_mb + @max_mb = mb + @plot_points.push([mb, lrs]) + + display_graph: (max_lrs) -> + div_name = 'manhattan_plot_' + @name + console.log("div_name:", div_name) + + #console.log("max_lrs is", max_lrs) + + + x_axis_max = Math.ceil(@max_mb/25) * 25 + x_axis_ticks = [] + x_tick = 0 + while (x_tick <= x_axis_max) + x_axis_ticks.push(x_tick) + x_tick += 25 + + + plot_options = + title: @name + seriesDefaults: + showLine: false + markerRenderer: $.jqplot.MarkerRenderer + markerOptions: + style: "filledCircle" + size: 3 + axesDefaults: + tickRenderer: $.jqplot.CanvasAxisTickRenderer + labelRenderer: $.jqplot.CanvasAxisLabelRenderer + axes: + xaxis: + min: 0 + max: x_axis_max + ticks: x_axis_ticks + tickOptions: + angle: 90 + showGridline: false + formatString: '%d' + label: "Megabases" + + + if @name == "1" + plot_options.axes.yaxis = + min: 0 + max: Math.floor(max_lrs + 0.1 * max_lrs) + tickInterval: 1 + label: "LRS" + tickOptions: + formatString: '%d' + showGridline: false + else + plot_options.axes.yaxis = + show: false + min: 0 + max: Math.floor(max_lrs + 0.1 * max_lrs) + tickInterval: 1 + tickOptions: + formatString: '%d' + showGridline: false + + $.jqplot(div_name, [@plot_points], plot_options) + + class Manhattan_Plot + constructor: -> + @max_lrs = 0 + + @chromosomes = {} + @build_chromosomes() + + @display_graphs() + + build_chromosomes: -> + for result in js_data.qtl_results + #if result.locus.chromosome == '1' + chromosome = result.locus.chromosome + if chromosome not of @chromosomes + @chromosomes[chromosome] = new Chromosome(chromosome) + mb = parseInt(result.locus.mb) + if result.lrs > @max_lrs + @max_lrs = result.lrs + @chromosomes[chromosome].process_point(mb, result.lrs) + + display_graphs: -> + ### Call display_graph for each chromosome ### + + # First get everything in the right order + numbered_keys = [] + extra_keys = [] + for key of @chromosomes + if isNaN(key) + extra_keys.push(key) + else + numbered_keys.push(key) + + numbered_keys.sort(sort_number) + extra_keys.sort() + keys = numbered_keys.concat(extra_keys) + console.log("keys are:", keys) + + for key in keys + this_class = "manhattan_plot_segment" + if key != "1" + this_class += " no_y_axis" + html = """
""" + console.log("html is:", html) + $("#manhattan_plots").append(html) + @chromosomes[key].display_graph(@max_lrs) + + $('.jqplot-yaxis').hide() + $('#manhattan_plot_1').find('.jqplot-yaxis').show() + + #$(".jqplot-yaxis").hide() + #$(".jqplot-yaxis-tick").hide() + + + #process_data: -> + # qtl_results = js_data.qtl_results + # #console.log("qtl_results: ", qtl_results) + # @plot_points = [] + # @max_mb = 0 + # for result in qtl_results + # if result.locus.chromosome == '1' + # mb = parseInt(result.locus.mb) + # if mb > @max_mb + # @max_mb = mb + # @plot_points.push([mb, result.lrs]) + + + + new Permutation_Histogram + new Manhattan_Plot \ No newline at end of file diff --git a/wqflask/wqflask/templates/marker_regression.html b/wqflask/wqflask/templates/marker_regression.html index 6b0a4813..0c537d19 100644 --- a/wqflask/wqflask/templates/marker_regression.html +++ b/wqflask/wqflask/templates/marker_regression.html @@ -36,7 +36,7 @@ {% for marker in filtered_results %} {{loop.index}} - {{marker.lrs_value}} + {{marker.lod_score}} {{marker.chr}} {{marker.Mb}} {{marker.name}} @@ -59,6 +59,7 @@ + @@ -66,13 +67,13 @@ - + + - {% endblock %} \ No newline at end of file -- cgit v1.2.3