diff options
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/bar_chart.coffee | 172 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/bar_chart.js | 108 |
2 files changed, 160 insertions, 120 deletions
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee index f59d947d..e1bb36e1 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee @@ -2,6 +2,7 @@ root = exports ? this class Bar_Chart constructor: (@sample_list, @sample_group) -> + @sort_by = "name" @get_samples() console.log("sample names:", @sample_names) if @sample_attr_vals.length > 0 @@ -28,18 +29,19 @@ class Bar_Chart @create_graph() d3.select("#color_attribute").on("change", => - attribute = $("#color_attribute").val() + @attribute = $("#color_attribute").val() console.log("attr_color_dict:", @attr_color_dict) - if $("#update_bar_chart").html() == 'Sort By Name' + #if $("#update_bar_chart").html() == 'Sort By Name' + if @sort_by = "name" @svg.selectAll(".bar") .data(@sorted_samples()) .transition() .duration(1000) .style("fill", (d) => - if attribute == "None" + if @attribute == "None" return "steelblue" else - return @attr_color_dict[attribute][d[2][attribute]] + return @attr_color_dict[@attribute][d[2][@attribute]] ) .select("title") .text((d) => @@ -51,79 +53,85 @@ class Bar_Chart .transition() .duration(1000) .style("fill", (d) => - if attribute == "None" + if @attribute == "None" return "steelblue" else - return @attr_color_dict[attribute][d[2][attribute]] + return @attr_color_dict[@attribute][d[2][@attribute]] ) - @add_legend(attribute, @distinct_attr_vals[attribute]) + @add_legend(@attribute, @distinct_attr_vals[@attribute]) ) - - - + $(".sort_by_value").on("click", => console.log("sorting by value") - sortItems = (a, b) -> - return a[1] - b[1] - - @svg.selectAll(".bar") - .data(@sorted_samples()) - .transition() - .duration(1000) - .attr("y", (d) => - return @y_scale(d[1]) - ) - .attr("height", (d) => - return @plot_height - @y_scale(d[1]) - ) - .style("fill", (d) => - if @attributes.length > 0 - return @attr_color_dict[attribute][d[2][attribute]] - else - return "steelblue" - ) - .select("title") - .text((d) => - return d[1] - ) - sorted_sample_names = (sample[0] for sample in @sorted_samples()) - x_scale = d3.scale.ordinal() - .domain(sorted_sample_names) - .rangeBands([0, @plot_width], .1) - $('.x.axis').remove() - @add_x_axis(x_scale) + @sort_by = "value" + if @attributes.length > 0 + @attribute = $("#color_attribute").val() + #sortItems = (a, b) -> + # return a[1] - b[1] + @rebuild_bar_graph(@sorted_samples()) + #@svg.selectAll(".bar") + # .data(@sorted_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 + # # return @attr_color_dict[attribute][d[2][attribute]] + # # else + # # return "steelblue" + # #) + #sorted_sample_names = (sample[0] for sample in @sorted_samples()) + #x_scale = d3.scale.ordinal() + # .domain(sorted_sample_names) + # .rangeBands([0, @plot_width], .1) + #$('.x.axis').remove() + #@add_x_axis(x_scale) ) $(".sort_by_name").on("click", => console.log("sorting by name") - #$("#update_bar_chart").html('Sort By Value') - @svg.selectAll(".bar") - .data(@samples) - .transition() - .duration(1000) - .attr("y", (d) => - return @y_scale(d[1]) - ) - .attr("height", (d) => - return @plot_height - @y_scale(d[1]) - ) - .style("fill", (d) => - if @attributes.length > 0 - return @attr_color_dict[attribute][d[2][attribute]] - else - return "steelblue" - ) - .select("title") - .text((d) => - return d[1] - ) - x_scale = d3.scale.ordinal() - .domain(@sample_names) - .rangeBands([0, @plot_width], .1) - $('.x.axis').remove() - @add_x_axis(x_scale) + @sort_by = "name" + if @attributes.length > 0 + @attribute = $("#color_attribute").val() + @rebuild_bar_graph(@samples) + #@svg.selectAll(".bar") + # .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 + # return @attr_color_dict[attribute][d[2][attribute]] + # else + # return "steelblue" + # ) + #x_scale = d3.scale.ordinal() + # .domain(@sample_names) + # .rangeBands([0, @plot_width], .1) + #$('.x.axis').remove() + #@add_x_axis(x_scale) ) + + #d3.select(".update_bar_chart").on("click", => # console.log("THIS IS:", $(this)) # sort_by = $(this).val() @@ -197,6 +205,40 @@ class Bar_Chart ) + + rebuild_bar_graph: (samples) -> + console.log("samples:", samples) + @svg.selectAll(".bar") + .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 and @attribute != "None" + console.log("@attribute:", @attribute) + console.log("d[2]", d[2]) + console.log("the_color:", @attr_color_dict[@attribute][d[2][@attribute]]) + return @attr_color_dict[@attribute][d[2][@attribute]] + else + return "steelblue" + ) + sample_names = (sample[0] for sample in samples) + console.log("sample_names2:", sample_names) + x_scale = d3.scale.ordinal() + .domain(sample_names) + .rangeBands([0, @plot_width], .1) + $('.x.axis').remove() + @add_x_axis(x_scale) + get_attr_color_dict: (vals) -> @attr_color_dict = {} console.log("vals:", vals) diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.js b/wqflask/wqflask/static/new/javascript/bar_chart.js index 63a71857..b02ee1da 100644 --- a/wqflask/wqflask/static/new/javascript/bar_chart.js +++ b/wqflask/wqflask/static/new/javascript/bar_chart.js @@ -13,6 +13,7 @@ _this = this; this.sample_list = sample_list; this.sample_group = sample_group; + this.sort_by = "name"; this.get_samples(); console.log("sample names:", this.sample_names); if (this.sample_attr_vals.length > 0) { @@ -46,88 +47,85 @@ this.create_scales(); this.create_graph(); d3.select("#color_attribute").on("change", function() { - var attribute; - attribute = $("#color_attribute").val(); + _this.attribute = $("#color_attribute").val(); console.log("attr_color_dict:", _this.attr_color_dict); - if ($("#update_bar_chart").html() === 'Sort By Name') { + if (_this.sort_by = "name") { _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) { - if (attribute === "None") { + if (_this.attribute === "None") { return "steelblue"; } else { - return _this.attr_color_dict[attribute][d[2][attribute]]; + return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]; } }).select("title").text(function(d) { return d[1]; }); } else { _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).style("fill", function(d) { - if (attribute === "None") { + if (_this.attribute === "None") { return "steelblue"; } else { - return _this.attr_color_dict[attribute][d[2][attribute]]; + return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]; } }); } - return _this.add_legend(attribute, _this.distinct_attr_vals[attribute]); + return _this.add_legend(_this.attribute, _this.distinct_attr_vals[_this.attribute]); }); $(".sort_by_value").on("click", function() { - var sortItems, sorted_sample_names, x_scale; console.log("sorting by value"); - sortItems = function(a, b) { - return a[1] - b[1]; - }; - _this.svg.selectAll(".bar").data(_this.sorted_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]); - }).style("fill", function(d) { - if (_this.attributes.length > 0) { - return _this.attr_color_dict[attribute][d[2][attribute]]; - } else { - return "steelblue"; - } - }).select("title").text(function(d) { - return d[1]; - }); - sorted_sample_names = (function() { - var _i, _len, _ref, _results; - _ref = this.sorted_samples(); - _results = []; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - sample = _ref[_i]; - _results.push(sample[0]); - } - return _results; - }).call(_this); - x_scale = d3.scale.ordinal().domain(sorted_sample_names).rangeBands([0, _this.plot_width], .1); - $('.x.axis').remove(); - return _this.add_x_axis(x_scale); + _this.sort_by = "value"; + if (_this.attributes.length > 0) { + _this.attribute = $("#color_attribute").val(); + } + return _this.rebuild_bar_graph(_this.sorted_samples()); }); $(".sort_by_name").on("click", function() { - var x_scale; 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) { - return _this.plot_height - _this.y_scale(d[1]); - }).style("fill", function(d) { - if (_this.attributes.length > 0) { - return _this.attr_color_dict[attribute][d[2][attribute]]; - } else { - return "steelblue"; - } - }).select("title").text(function(d) { - return d[1]; - }); - x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1); - $('.x.axis').remove(); - return _this.add_x_axis(x_scale); + _this.sort_by = "name"; + if (_this.attributes.length > 0) { + _this.attribute = $("#color_attribute").val(); + } + return _this.rebuild_bar_graph(_this.samples); }); d3.select("#color_by_trait").on("click", function() { return _this.open_trait_selection(); }); } + Bar_Chart.prototype.rebuild_bar_graph = function(samples) { + 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.attribute !== "None") { + console.log("@attribute:", _this.attribute); + console.log("d[2]", d[2]); + console.log("the_color:", _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]); + return _this.attr_color_dict[_this.attribute][d[2][_this.attribute]]; + } else { + return "steelblue"; + } + }); + sample_names = (function() { + var _i, _len, _results; + _results = []; + for (_i = 0, _len = samples.length; _i < _len; _i++) { + sample = samples[_i]; + _results.push(sample[0]); + } + return _results; + })(); + console.log("sample_names2:", sample_names); + x_scale = d3.scale.ordinal().domain(sample_names).rangeBands([0, this.plot_width], .1); + $('.x.axis').remove(); + return this.add_x_axis(x_scale); + }; + 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; |