From bd48ca02770735cff482b1612399f236e8ac377f Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Fri, 3 Jan 2014 21:47:58 +0000 Subject: Wrote some code for the histogram figure Changed some code in dataset to try and track down the issue with Amelie's file --- wqflask/base/data_set.py | 13 +- wqflask/wqflask/my_pylmm/data/genofile_parser.py | 4 +- wqflask/wqflask/static/new/css/bar_chart.css | 1 + .../wqflask/static/new/javascript/bar_chart.coffee | 43 +++--- wqflask/wqflask/static/new/javascript/bar_chart.js | 27 ++-- .../wqflask/static/new/javascript/histogram.coffee | 149 +++++++++++++++++++++ wqflask/wqflask/static/new/javascript/histogram.js | 140 +++++++++++++++++++ .../static/new/javascript/show_trait.coffee | 17 +-- .../wqflask/static/new/javascript/show_trait.js | 7 +- wqflask/wqflask/templates/show_trait.html | 1 + .../templates/show_trait_statistics_new.html | 16 +++ 11 files changed, 367 insertions(+), 51 deletions(-) create mode 100644 wqflask/wqflask/static/new/javascript/histogram.coffee create mode 100644 wqflask/wqflask/static/new/javascript/histogram.js (limited to 'wqflask') diff --git a/wqflask/base/data_set.py b/wqflask/base/data_set.py index fbe78d5d..d421f21e 100755 --- a/wqflask/base/data_set.py +++ b/wqflask/base/data_set.py @@ -168,13 +168,14 @@ class Markers(object): for marker, p_value in itertools.izip(self.markers, p_values): marker['p_value'] = p_value - if math.isnan(marker['p_value']): + if math.isnan(marker['p_value']) or marker['p_value'] <= 0: print("p_value is:", marker['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 - - + marker['lod_score'] = 0 + marker['lrs_value'] = 0 + else: + 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 HumanMarkers(Markers): diff --git a/wqflask/wqflask/my_pylmm/data/genofile_parser.py b/wqflask/wqflask/my_pylmm/data/genofile_parser.py index af855fb4..c8c0929f 100644 --- a/wqflask/wqflask/my_pylmm/data/genofile_parser.py +++ b/wqflask/wqflask/my_pylmm/data/genofile_parser.py @@ -106,8 +106,8 @@ class ConvertGenoFile(object): this_marker.genotypes.append("NA") #print("this_marker is:", pf(this_marker.__dict__)) - - self.markers.append(this_marker.__dict__) + if this_marker.chr == "5": + self.markers.append(this_marker.__dict__) with open(self.output_file, 'w') as fh: json.dump(self.markers, fh, indent=" ", sort_keys=True) diff --git a/wqflask/wqflask/static/new/css/bar_chart.css b/wqflask/wqflask/static/new/css/bar_chart.css index ba14fe4e..c8e081f9 100644 --- a/wqflask/wqflask/static/new/css/bar_chart.css +++ b/wqflask/wqflask/static/new/css/bar_chart.css @@ -7,6 +7,7 @@ .bar { fill: steelblue; + shape-rendering: crispEdges; } .x.axis path { diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee index 27a8d284..3f12d956 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee @@ -132,7 +132,6 @@ class Bar_Chart d3.select("#color_by_trait").on("click", => @open_trait_selection() - ) rebuild_bar_graph: (samples) -> @@ -141,20 +140,11 @@ class Bar_Chart .data(samples) .transition() .duration(1000) - .attr("y", (d) => - return @y_scale(d[1]) - ) - .attr("height", (d) => - return @plot_height - @y_scale(d[1]) - ) - .select("title") - .text((d) => - return d[1] - ) .style("fill", (d) => - if @attributes.length == 0 + if @attributes.length == 0 and @trait_color_dict? console.log("SAMPLE:", d[0]) console.log("CHECKING:", @trait_color_dict[d[0]]) + #return "steelblue" return @trait_color_dict[d[0]] else if @attributes.length > 0 and @attribute != "None" console.log("@attribute:", @attribute) @@ -164,6 +154,16 @@ class Bar_Chart else return "steelblue" ) + .attr("y", (d) => + return @y_scale(d[1]) + ) + .attr("height", (d) => + return @plot_height - @y_scale(d[1]) + ) + .select("title") + .text((d) => + return d[1] + ) #.style("fill", (d) => # return @trait_color_dict[d[0]] # #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]] @@ -419,29 +419,34 @@ class Bar_Chart #@get_attr_color_dict(distinct_values) @get_trait_color_dict(trimmed_samples, distinct_values) console.log("TRAIT_COLOR_DICT:", @trait_color_dict) - if $("#update_bar_chart").html() == 'Sort By Name' + console.log("SAMPLES:", @samples) + if @sort_by = "value" @svg.selectAll(".bar") - .data(@sorted_samples()) + .data(@samples) .transition() .duration(1000) .style("fill", (d) => + console.log("this color:", @trait_color_dict[d[0]]) return @trait_color_dict[d[0]] - #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]] ) .select("title") .text((d) => return d[1] - ) + ) + else @svg.selectAll(".bar") - .data(@samples) + .data(@sorted_samples()) .transition() .duration(1000) .style("fill", (d) => + console.log("this color:", @trait_color_dict[d[0]]) return @trait_color_dict[d[0]] - #return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]] ) - + .select("title") + .text((d) => + return d[1] + ) trim_values: (trait_sample_data) -> trimmed_samples = {} diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js index faf66cd4..c0b056f8 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.js +++ b/wqflask/wqflask/static/new/javascript/bar_chart.js @@ -95,14 +95,8 @@ var sample, sample_names, x_scale, _this = this; console.log("samples:", samples); - this.svg.selectAll(".bar").data(samples).transition().duration(1000).attr("y", function(d) { - return _this.y_scale(d[1]); - }).attr("height", function(d) { - return _this.plot_height - _this.y_scale(d[1]); - }).select("title").text(function(d) { - return d[1]; - }).style("fill", function(d) { - if (_this.attributes.length === 0) { + this.svg.selectAll(".bar").data(samples).transition().duration(1000).style("fill", function(d) { + if (_this.attributes.length === 0 && (_this.trait_color_dict != null)) { console.log("SAMPLE:", d[0]); console.log("CHECKING:", _this.trait_color_dict[d[0]]); return _this.trait_color_dict[d[0]]; @@ -114,6 +108,12 @@ } else { return "steelblue"; } + }).attr("y", function(d) { + return _this.y_scale(d[1]); + }).attr("height", function(d) { + return _this.plot_height - _this.y_scale(d[1]); + }).select("title").text(function(d) { + return d[1]; }); sample_names = (function() { var _i, _len, _results; @@ -394,15 +394,20 @@ distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples); this.get_trait_color_dict(trimmed_samples, distinct_values); console.log("TRAIT_COLOR_DICT:", this.trait_color_dict); - if ($("#update_bar_chart").html() === 'Sort By Name') { - return this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", function(d) { + console.log("SAMPLES:", this.samples); + if (this.sort_by = "value") { + return this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", function(d) { + console.log("this color:", _this.trait_color_dict[d[0]]); return _this.trait_color_dict[d[0]]; }).select("title").text(function(d) { return d[1]; }); } else { - return this.svg.selectAll(".bar").data(this.samples).transition().duration(1000).style("fill", function(d) { + return this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", function(d) { + console.log("this color:", _this.trait_color_dict[d[0]]); return _this.trait_color_dict[d[0]]; + }).select("title").text(function(d) { + return d[1]; }); } }; diff --git a/wqflask/wqflask/static/new/javascript/histogram.coffee b/wqflask/wqflask/static/new/javascript/histogram.coffee new file mode 100644 index 00000000..03332835 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/histogram.coffee @@ -0,0 +1,149 @@ +root = exports ? this + +class Histogram + constructor: (@sample_list, @sample_group) -> + @sort_by = "name" + @format_count = d3.format(",.0f") #a formatter for counts + @get_samples() + #if @sample_attr_vals.length > 0 + # @get_distinct_attr_vals() + # @get_attr_color_dict(@distinct_attr_vals) + + @margin = {top: 10, right: 30, bottom: 30, left: 30} + @plot_width = 960 - @margin.left - @margin.right + @plot_height = 500 - @margin.top - @margin.bottom + + @x_buffer = @plot_width/20 + @y_buffer = @plot_height/20 + + @y_min = d3.min(@sample_vals) + @y_max = d3.max(@sample_vals) * 1.1 + + @plot_height -= @y_buffer + @create_x_scale() + @get_histogram_data() + @create_y_scale() + + @svg = @create_svg() + + @create_graph() + + get_samples: () -> + @sample_names = (sample.name for sample in @sample_list when sample.value != null) + @sample_vals = (sample.value for sample in @sample_list when sample.value != null) + + @attributes = (key for key of @sample_list[0]["extra_attributes"]) + console.log("attributes:", @attributes) + @sample_attr_vals = [] + if @attributes.length > 0 + for sample in @sample_list + attr_vals = {} + for attribute in @attributes + attr_vals[attribute] = sample["extra_attributes"][attribute] + @sample_attr_vals.push(attr_vals) + @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals) + + create_svg: () -> + svg = d3.select("#histogram") + .append("svg") + .attr("class", "bar_chart") + .attr("width", @plot_width + @margin.left + @margin.right) + .attr("height", @plot_height + @margin.top + @margin.bottom) + .append("g") + .attr("transform", "translate(" + @margin.left + "," + @margin.top + ")") + + return svg + + create_x_scale: () -> + @x_scale = d3.scale.linear() + .domain([d3.min(@sample_vals), d3.max(@sample_vals)]) + .range([0, @plot_width]) + + get_histogram_data: () -> + console.log("sample_vals:", @sample_vals) + @histogram_data = d3.layout.histogram() + .bins(@x_scale.ticks(10))(@sample_vals) + console.log("histogram_data:", @histogram_data[0]) + + create_y_scale: () -> + @y_scale = d3.scale.linear() + .domain([0, d3.max(@histogram_data, (d) => return d.y )]) + .range([@plot_height, 0]) + + create_graph: () -> + + @add_x_axis() + #@add_y_axis() + + @add_bars() + + add_x_axis: () -> + x_axis = d3.svg.axis() + .scale(@x_scale) + .orient("bottom"); + + @svg.append("g") + .attr("class", "x axis") + .attr("transform", "translate(0," + @plot_height + ")") + .call(x_axis) + #.selectAll("text") + # .style("text-anchor", "end") + # .style("font-size", "12px") + # .attr("dx", "-.8em") + # .attr("dy", "-.3em") + # .attr("transform", (d) => + # return "rotate(-90)" + # ) + + #add_y_axis: () -> + # y_axis = d3.svg.axis() + # .scale(@y_scale) + # .orient("left") + # .ticks(5) + # + # @svg.append("g") + # .attr("class", "y axis") + # .call(y_axis) + # .append("text") + # .attr("transform", "rotate(-90)") + # .attr("y", 6) + # .attr("dy", ".71em") + # .style("text-anchor", "end") + + add_bars: () -> + @svg.selectAll(".bar") + .data(@histogram_data) + .enter().append("g") + .attr("class", "bar") + .attr("transform", (d) => + return "translate(" + @margin.left + "," + @margin.top + ")") + .append("rect") + .attr("x", 1) + .attr("width", @x_scale(@histogram_data[0].dx) - 1) + .attr("height", (d) => + return @plot_height - @y_scale(d.y) + ) + .append("text") + .attr("dy", ".75em") + .attr("y", 6) + .attr("x", @x_scale(@histogram_data[0].dx) / 2) + .attr("text-anchor", "middle") + .text((d) => + return @format_count(d.y) + ) + + #open_trait_selection: () -> + # $('#collections_holder').load('/collections/list?color_by_trait #collections_list', => + # $.colorbox( + # inline: true + # href: "#collections_holder" + # ) + # #Removes the links from the collection names, because clicking them would leave the page + # #instead of loading the list of traits in the colorbox + # $('a.collection_name').attr( 'onClick', 'return false' ) + # #$('.collection_name').each (index, element) => + # # console.log("contents:", $(element).contents()) + # # $(element).contents().unwrap() + # ) + +root.Histogram = Histogram \ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/histogram.js b/wqflask/wqflask/static/new/javascript/histogram.js new file mode 100644 index 00000000..e7926ab1 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/histogram.js @@ -0,0 +1,140 @@ +// Generated by CoffeeScript 1.6.1 +(function() { + var Histogram, root; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; + + Histogram = (function() { + + function Histogram(sample_list, sample_group) { + this.sample_list = sample_list; + this.sample_group = sample_group; + this.sort_by = "name"; + this.format_count = d3.format(",.0f"); + this.get_samples(); + this.margin = { + top: 10, + right: 30, + bottom: 30, + left: 30 + }; + this.plot_width = 960 - this.margin.left - this.margin.right; + this.plot_height = 500 - this.margin.top - this.margin.bottom; + this.x_buffer = this.plot_width / 20; + this.y_buffer = this.plot_height / 20; + this.y_min = d3.min(this.sample_vals); + this.y_max = d3.max(this.sample_vals) * 1.1; + this.plot_height -= this.y_buffer; + this.create_x_scale(); + this.get_histogram_data(); + this.create_y_scale(); + this.svg = this.create_svg(); + this.create_graph(); + } + + Histogram.prototype.get_samples = function() { + var attr_vals, attribute, key, sample, _i, _j, _len, _len1, _ref, _ref1; + this.sample_names = (function() { + var _i, _len, _ref, _results; + _ref = this.sample_list; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + sample = _ref[_i]; + if (sample.value !== null) { + _results.push(sample.name); + } + } + return _results; + }).call(this); + this.sample_vals = (function() { + var _i, _len, _ref, _results; + _ref = this.sample_list; + _results = []; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + sample = _ref[_i]; + if (sample.value !== null) { + _results.push(sample.value); + } + } + return _results; + }).call(this); + this.attributes = (function() { + var _results; + _results = []; + for (key in this.sample_list[0]["extra_attributes"]) { + _results.push(key); + } + return _results; + }).call(this); + console.log("attributes:", this.attributes); + this.sample_attr_vals = []; + if (this.attributes.length > 0) { + _ref = this.sample_list; + for (_i = 0, _len = _ref.length; _i < _len; _i++) { + sample = _ref[_i]; + attr_vals = {}; + _ref1 = this.attributes; + for (_j = 0, _len1 = _ref1.length; _j < _len1; _j++) { + attribute = _ref1[_j]; + attr_vals[attribute] = sample["extra_attributes"][attribute]; + } + this.sample_attr_vals.push(attr_vals); + } + } + return this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals); + }; + + Histogram.prototype.create_svg = function() { + var svg; + svg = d3.select("#histogram").append("svg").attr("class", "bar_chart").attr("width", this.plot_width + this.margin.left + this.margin.right).attr("height", this.plot_height + this.margin.top + this.margin.bottom).append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")"); + return svg; + }; + + Histogram.prototype.create_x_scale = function() { + return this.x_scale = d3.scale.linear().domain([d3.min(this.sample_vals), d3.max(this.sample_vals)]).range([0, this.plot_width]); + }; + + Histogram.prototype.get_histogram_data = function() { + console.log("sample_vals:", this.sample_vals); + this.histogram_data = d3.layout.histogram().bins(this.x_scale.ticks(10))(this.sample_vals); + return console.log("histogram_data:", this.histogram_data[0]); + }; + + Histogram.prototype.create_y_scale = function() { + var _this = this; + return this.y_scale = d3.scale.linear().domain([ + 0, d3.max(this.histogram_data, function(d) { + return d.y; + }) + ]).range([this.plot_height, 0]); + }; + + Histogram.prototype.create_graph = function() { + this.add_x_axis(); + return this.add_bars(); + }; + + Histogram.prototype.add_x_axis = function() { + var x_axis; + x_axis = d3.svg.axis().scale(this.x_scale).orient("bottom"); + return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(x_axis); + }; + + Histogram.prototype.add_bars = function() { + var _this = this; + return this.svg.selectAll(".bar").data(this.histogram_data).enter().append("g").attr("class", "bar").attr("transform", function(d) { + return "translate(" + _this.margin.left + "," + _this.margin.top + ")"; + }).append("rect").attr("x", 1).attr("width", this.x_scale(this.histogram_data[0].dx) - 1).attr("height", function(d) { + return _this.plot_height - _this.y_scale(d.y); + }).append("text").attr("dy", ".75em").attr("y", 6).attr("x", this.x_scale(this.histogram_data[0].dx) / 2).attr("text-anchor", "middle").text(function(d) { + return _this.format_count(d.y); + }); + }; + + return Histogram; + + })(); + + root.Histogram = Histogram; + +}).call(this); diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee index 1df033d6..e42a7d82 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee @@ -66,6 +66,7 @@ $ -> $("#update_bar_chart.btn-group").button() root.bar_chart = new Bar_Chart(sample_lists[0]) + root.histogram = new Histogram(sample_lists[0]) new Box_Plot(sample_lists[0]) $('.bar_chart_samples_group').change -> @@ -73,13 +74,12 @@ $ -> $('#bar_chart_container').append('
') group = $(this).val() if group == "samples_primary" - new Bar_Chart(sample_lists[0]) + root.bar_chart = new Bar_Chart(sample_lists[0]) else if group == "samples_other" - new Bar_Chart(sample_lists[1]) + root.bar_chart = new Bar_Chart(sample_lists[1]) else if group == "samples_all" all_samples = sample_lists[0].concat sample_lists[1] - new Bar_Chart(all_samples) - #$(".btn-group").button() + root.bar_chart = new Bar_Chart(all_samples) $('.box_plot_samples_group').change -> $('#box_plot').remove() @@ -93,18 +93,18 @@ $ -> all_samples = sample_lists[0].concat sample_lists[1] new Box_Plot(all_samples) - + hide_tabs = (start) -> for x in [start..10] $("#stats_tabs" + x).hide() + # Changes stats table between all, bxd only and non-bxd, etc. stats_mdp_change = -> selected = $(this).val() hide_tabs(0) $("#stats_tabs" + selected).show() - #$(".stats_mdp").change(stats_mdp_change) change_stats_value = (sample_sets, category, value_type, decimal_places)-> id = "#" + process_id(category, value_type) @@ -130,12 +130,9 @@ $ -> if title_value $(id).attr('title', title_value) + update_stat_values = (sample_sets)-> for category in ['samples_primary', 'samples_other', 'samples_all'] - #change_stats_value(sample_sets, category, "n_of_samples", 0) - - #for stat in ["mean", "median", "std_dev", "std_error", "min", "max"] - #for stat in (row.vn for row in Stat_Table_Rows) for row in Stat_Table_Rows console.log("Calling change_stats_value") change_stats_value(sample_sets, category, row.vn, row.digits) diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index 90fa8228..d3a34166 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -63,6 +63,7 @@ sample_group_types = js_data.sample_group_types; $("#update_bar_chart.btn-group").button(); root.bar_chart = new Bar_Chart(sample_lists[0]); + root.histogram = new Histogram(sample_lists[0]); new Box_Plot(sample_lists[0]); $('.bar_chart_samples_group').change(function() { var all_samples, group; @@ -70,12 +71,12 @@ $('#bar_chart_container').append('
'); group = $(this).val(); if (group === "samples_primary") { - return new Bar_Chart(sample_lists[0]); + return root.bar_chart = new Bar_Chart(sample_lists[0]); } else if (group === "samples_other") { - return new Bar_Chart(sample_lists[1]); + return root.bar_chart = new Bar_Chart(sample_lists[1]); } else if (group === "samples_all") { all_samples = sample_lists[0].concat(sample_lists[1]); - return new Bar_Chart(all_samples); + return root.bar_chart = new Bar_Chart(all_samples); } }); $('.box_plot_samples_group').change(function() { diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html index 86891bb0..26f21f08 100644 --- a/wqflask/wqflask/templates/show_trait.html +++ b/wqflask/wqflask/templates/show_trait.html @@ -58,6 +58,7 @@ + diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html index 9393e9bd..28f7e0c7 100644 --- a/wqflask/wqflask/templates/show_trait_statistics_new.html +++ b/wqflask/wqflask/templates/show_trait_statistics_new.html @@ -7,6 +7,9 @@
  • Bar Chart
    • +
  • + Histogram +
  • Box Plot
    • @@ -51,6 +54,19 @@
    +
    + {% if sample_groups|length > 1 %} + +

    + {% endif %} +
    +
    +
    +
    {% if sample_groups|length > 1 %}