From dacbe604011514d7db2d3827e74c47cd7913dd40 Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Wed, 11 Dec 2013 20:13:45 +0000 Subject: Got color by trait working, but still need to add a legend and make some other small changes (like removing samples that don't overlap with the selected trait) Tentatively removed jquery-ui from base.html; I'm not sure if we're still using this anywhere, but removing it doesn't seem to have had an impact on the trait page --- .../wqflask/static/new/javascript/bar_chart.coffee | 60 +++++++++++++++++----- wqflask/wqflask/static/new/javascript/bar_chart.js | 53 ++++++++++++------- .../static/new/javascript/show_trait.coffee | 6 +-- .../wqflask/static/new/javascript/show_trait.js | 1 + wqflask/wqflask/templates/base.html | 2 +- .../templates/show_trait_statistics_new.html | 10 ++-- 6 files changed, 93 insertions(+), 39 deletions(-) (limited to 'wqflask') diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee index 05955188..6af14687 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee @@ -6,7 +6,7 @@ class Bar_Chart console.log("sample names:", @sample_names) if @sample_attr_vals.length > 0 @get_distinct_attr_vals() - @get_attr_color_dict() + @get_attr_color_dict(@distinct_attr_vals) #Used to calculate the bottom margin so sample names aren't cut off longest_sample_name = d3.max(sample.length for sample in @sample_names) @@ -29,6 +29,7 @@ class Bar_Chart d3.select("#color_attribute").on("change", => attribute = $("#color_attribute").val() + console.log("attr_color_dict:", @attr_color_dict) if $("#update_bar_chart").html() == 'Sort By Name' @svg.selectAll(".bar") .data(@sorted_samples()) @@ -57,13 +58,17 @@ class Bar_Chart ) @add_legend(attribute, @distinct_attr_vals[attribute]) ) - - - d3.select("#update_bar_chart").on("click", => + + + d3.select(".update_bar_chart").on("click", => + sort_by = $('.update_bar_chart.active').val() + console.log("sort_by: ", sort_by) if @attributes.length > 0 attribute = $("#color_attribute").val() - if $("#update_bar_chart").html() == 'Sort By Value' - $("#update_bar_chart").html('Sort By Name') + if sort_by = "value" + console.log("sorting by value") + #if $("#update_bar_chart").html() == 'Sort By Value' + #$("#update_bar_chart").html('Sort By Name') sortItems = (a, b) -> return a[1] - b[1] @@ -72,6 +77,7 @@ class Bar_Chart .transition() .duration(1000) .attr("y", (d) => + return @y_scale(d[1]) ) .attr("height", (d) => @@ -94,7 +100,8 @@ class Bar_Chart $('.x.axis').remove() @add_x_axis(x_scale) else - $("#update_bar_chart").html('Sort By Value') + console.log("sorting by name") + #$("#update_bar_chart").html('Sort By Value') @svg.selectAll(".bar") .data(@samples) .transition() @@ -127,10 +134,10 @@ class Bar_Chart ) - get_attr_color_dict: () -> + get_attr_color_dict: (vals) -> @attr_color_dict = {} - console.log("distinct_attr_vals:", @distinct_attr_vals) - for own key, distinct_vals of @distinct_attr_vals + console.log("vals:", vals) + for own key, distinct_vals of vals this_color_dict = {} if distinct_vals.length < 10 color = d3.scale.category10() @@ -151,8 +158,8 @@ class Bar_Chart d3.max(distinct_vals)]) .range([0,255]) for value, i in distinct_vals - console.log("color_range(value):", color_range(parseInt(value))) - this_color_dict[value] = d3.rgb(color_range(parseInt(value)),0, 0) + console.log("color_range(value):", parseInt(color_range(value))) + this_color_dict[value] = d3.rgb(parseInt(color_range(value)),0, 0) #this_color_dict[value] = d3.rgb("lightblue").darker(color_range(parseInt(value))) #this_color_dict[value] = "rgb(0, 0, " + color_range(parseInt(value)) + ")" @attr_color_dict[key] = this_color_dict @@ -336,7 +343,31 @@ class Bar_Chart console.log("BXD1:", trait_sample_data["BXD1"]) console.log("trait_sample_data:", trait_sample_data) trimmed_samples = @trim_values(trait_sample_data) - @get_distinct_values(trimmed_samples) + distinct_values = {} + distinct_values["collection_trait"] = @get_distinct_values(trimmed_samples) + @get_attr_color_dict(distinct_values) + if $("#update_bar_chart").html() == 'Sort By Name' + @svg.selectAll(".bar") + .data(@sorted_samples()) + .transition() + .duration(1000) + .style("fill", (d) => + return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]] + ) + .select("title") + .text((d) => + return d[1] + ) + else + @svg.selectAll(".bar") + .data(@samples) + .transition() + .duration(1000) + .style("fill", (d) => + return @attr_color_dict["collection_trait"][trimmed_samples[d[0]]] + ) + + trim_values: (trait_sample_data) -> trimmed_samples = {} @@ -348,9 +379,10 @@ class Bar_Chart get_distinct_values: (samples) -> distinct_values = _.uniq(_.values(samples)) + console.log("distinct_values:", distinct_values) + return distinct_values #distinct_values = [] #for sample in samples # if samples[sample] in distinct_values - console.log("distinct_values:", distinct_values) root.Bar_Chart = Bar_Chart \ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js index 05625dc9..17bada7e 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.js +++ b/wqflask/wqflask/static/new/javascript/bar_chart.js @@ -17,7 +17,7 @@ console.log("sample names:", this.sample_names); if (this.sample_attr_vals.length > 0) { this.get_distinct_attr_vals(); - this.get_attr_color_dict(); + this.get_attr_color_dict(this.distinct_attr_vals); } longest_sample_name = d3.max((function() { var _i, _len, _ref, _results; @@ -48,6 +48,7 @@ d3.select("#color_attribute").on("change", function() { var attribute; attribute = $("#color_attribute").val(); + console.log("attr_color_dict:", _this.attr_color_dict); if ($("#update_bar_chart").html() === 'Sort By Name') { _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) { if (attribute === "None") { @@ -69,13 +70,15 @@ } return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]); }); - d3.select("#update_bar_chart").on("click", function() { - var attribute, sortItems, sorted_sample_names, x_scale; + d3.select(".update_bar_chart").on("click", function() { + var attribute, sortItems, sort_by, sorted_sample_names, x_scale; + sort_by = $('.update_bar_chart.active').val(); + console.log("sort_by: ", sort_by); if (_this.attributes.length > 0) { attribute = $("#color_attribute").val(); } - if ($("#update_bar_chart").html() === 'Sort By Value') { - $("#update_bar_chart").html('Sort By Name'); + if (sort_by = "value") { + console.log("sorting by value"); sortItems = function(a, b) { return a[1] - b[1]; }; @@ -106,7 +109,7 @@ $('.x.axis').remove(); return _this.add_x_axis(x_scale); } else { - $("#update_bar_chart").html('Sort By Value'); + console.log("sorting by name"); _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).attr("y", function(d) { return _this.y_scale(d[1]); }).attr("height", function(d) { @@ -130,16 +133,15 @@ }); } - Bar_Chart.prototype.get_attr_color_dict = function() { - var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _ref, _results, + Bar_Chart.prototype.get_attr_color_dict = function(vals) { + var color, color_range, distinct_vals, i, key, this_color_dict, value, _i, _j, _len, _len1, _results, _this = this; this.attr_color_dict = {}; - console.log("distinct_attr_vals:", this.distinct_attr_vals); - _ref = this.distinct_attr_vals; + console.log("vals:", vals); _results = []; - for (key in _ref) { - if (!__hasProp.call(_ref, key)) continue; - distinct_vals = _ref[key]; + for (key in vals) { + if (!__hasProp.call(vals, key)) continue; + distinct_vals = vals[key]; this_color_dict = {}; if (distinct_vals.length < 10) { color = d3.scale.category10(); @@ -159,8 +161,8 @@ color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]); for (i = _j = 0, _len1 = distinct_vals.length; _j < _len1; i = ++_j) { value = distinct_vals[i]; - console.log("color_range(value):", color_range(parseInt(value))); - this_color_dict[value] = d3.rgb(color_range(parseInt(value)), 0, 0); + console.log("color_range(value):", parseInt(color_range(value))); + this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0); } } } @@ -344,11 +346,25 @@ }; Bar_Chart.prototype.color_by_trait = function(trait_sample_data) { - var trimmed_samples; + var distinct_values, trimmed_samples, + _this = this; console.log("BXD1:", trait_sample_data["BXD1"]); console.log("trait_sample_data:", trait_sample_data); trimmed_samples = this.trim_values(trait_sample_data); - return this.get_distinct_values(trimmed_samples); + distinct_values = {}; + distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples); + this.get_attr_color_dict(distinct_values); + if ($("#update_bar_chart").html() === 'Sort By Name') { + return this.svg.selectAll(".bar").data(this.sorted_samples()).transition().duration(1000).style("fill", function(d) { + return _this.attr_color_dict["collection_trait"][trimmed_samples[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.attr_color_dict["collection_trait"][trimmed_samples[d[0]]]; + }); + } }; Bar_Chart.prototype.trim_values = function(trait_sample_data) { @@ -368,7 +384,8 @@ Bar_Chart.prototype.get_distinct_values = function(samples) { var distinct_values; distinct_values = _.uniq(_.values(samples)); - return console.log("distinct_values:", distinct_values); + console.log("distinct_values:", distinct_values); + return distinct_values; }; return Bar_Chart; diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee index 82b85436..1df033d6 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee @@ -64,11 +64,10 @@ $ -> sample_lists = js_data.sample_lists sample_group_types = js_data.sample_group_types + $("#update_bar_chart.btn-group").button() root.bar_chart = new Bar_Chart(sample_lists[0]) - new Box_Plot(sample_lists[0]) - $('.bar_chart_samples_group').change -> $('#bar_chart').remove() $('#bar_chart_container').append('
') @@ -80,7 +79,8 @@ $ -> else if group == "samples_all" all_samples = sample_lists[0].concat sample_lists[1] new Bar_Chart(all_samples) - + #$(".btn-group").button() + $('.box_plot_samples_group').change -> $('#box_plot').remove() $('#box_plot_container').append('
') diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index 320f705b..90fa8228 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -61,6 +61,7 @@ var block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, populate_sample_attributes_values_dropdown, process_id, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values; sample_lists = js_data.sample_lists; sample_group_types = js_data.sample_group_types; + $("#update_bar_chart.btn-group").button(); root.bar_chart = new Bar_Chart(sample_lists[0]); new Box_Plot(sample_lists[0]); $('.bar_chart_samples_group').change(function() { diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html index 9b98c955..0360f619 100644 --- a/wqflask/wqflask/templates/base.html +++ b/wqflask/wqflask/templates/base.html @@ -212,7 +212,7 @@ - + diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html index 33538626..e658484e 100644 --- a/wqflask/wqflask/templates/show_trait_statistics_new.html +++ b/wqflask/wqflask/templates/show_trait_statistics_new.html @@ -30,10 +30,14 @@ {% endfor %} - {% endif %} - + + + -- cgit v1.2.3