diff options
-rw-r--r-- | wqflask/wqflask/static/new/javascript/show_trait.coffee | 66 | ||||
-rw-r--r-- | wqflask/wqflask/static/new/javascript/show_trait.js | 74 |
2 files changed, 122 insertions, 18 deletions
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee index bf01ee5d..d236b795 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee @@ -84,9 +84,33 @@ $ -> @create_graph() d3.select("#color_attribute").on("change", => - + attribute = $("#color_attribute").val() + console.log("attribute:", attribute) + if $("#update_bar_chart").html() == 'Sort By Name' + @svg.selectAll(".bar") + .data(@sorted_samples()) + .transition() + .duration(1000) + .style("fill", (d) => + attr_color_dict = @get_attr_color_dict() + return attr_color_dict[attribute][d[2][attribute]] + ) + .select("title") + .text((d) => + return d[1] + ) + else + @svg.selectAll(".bar") + .data(@sample_attr_vals) + .transition() + .duration(1000) + .style("fill", (d) => + attr_color_dict = @get_attr_color_dict() + return attr_color_dict[attribute][d[attribute]] + ) ) - + + d3.select("#update_bar_chart").on("click", => if $("#update_bar_chart").html() == 'Sort By Value' $("#update_bar_chart").html('Sort By Name') @@ -103,6 +127,7 @@ $ -> .attr("height", (d) => return @plot_height - @y_scale(d[1]) ) + .style("fill", "steelblue") .select("title") .text((d) => return d[1] @@ -125,6 +150,7 @@ $ -> .attr("height", (d) => return @plot_height - @y_scale(d) ) + .style("fill", "steelblue") .select("title") .text((d) => return d @@ -136,13 +162,33 @@ $ -> @add_x_axis(x_scale) ) + get_attr_color_dict: () -> + color = d3.scale.category20() + attr_color_dict = {} + for own key, attribute_info of js_data.attribute_names + this_color_dict = {} + for value, i in attribute_info.distinct_values + this_color_dict[value] = color(i) + attr_color_dict[attribute_info.name] = this_color_dict + + return attr_color_dict + + + + 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) - if attributes.length > 0 - alert("TEST") + @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) + console.log("sample_attr_vals:", @sample_attr_vals) create_svg: () -> svg = d3.select("#bar_chart") @@ -209,6 +255,7 @@ $ -> @svg.selectAll(".bar") .data(_.zip(@sample_names, @sample_vals)) .enter().append("rect") + .style("fill", "steelblue") .attr("class", "bar") .attr("x", (d) => return @x_scale(d[0]) @@ -224,9 +271,12 @@ $ -> .text((d) => return d[1] ) - + sorted_samples: () -> - sample_list = _.zip(@sample_names, @sample_vals) + if @sample_attr_vals.length > 0 + sample_list = _.zip(@sample_names, @sample_vals, @sample_attr_vals) + else + sample_list = _.zip(@sample_names, @sample_vals) sorted = _.sortBy(sample_list, (sample) => return sample[1] ) diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index 7b5e4b88..22e20180 100644 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -92,7 +92,26 @@ this.plot_height -= this.y_buffer; this.create_scales(); this.create_graph(); - d3.select("#color_attribute").on("change", function() {}); + d3.select("#color_attribute").on("change", function() { + var attribute; + attribute = $("#color_attribute").val(); + console.log("attribute:", attribute); + if ($("#update_bar_chart").html() === 'Sort By Name') { + return _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) { + var attr_color_dict; + attr_color_dict = _this.get_attr_color_dict(); + return attr_color_dict[attribute][d[2][attribute]]; + }).select("title").text(function(d) { + return d[1]; + }); + } else { + return _this.svg.selectAll(".bar").data(_this.sample_attr_vals).transition().duration(1000).style("fill", function(d) { + var attr_color_dict; + attr_color_dict = _this.get_attr_color_dict(); + return attr_color_dict[attribute][d[attribute]]; + }); + } + }); d3.select("#update_bar_chart").on("click", function() { var sortItems, sorted_sample_names, x_scale; if ($("#update_bar_chart").html() === 'Sort By Value') { @@ -104,7 +123,7 @@ return _this.y_scale(d[1]); }).attr("height", function(d) { return _this.plot_height - _this.y_scale(d[1]); - }).select("title").text(function(d) { + }).style("fill", "steelblue").select("title").text(function(d) { return d[1]; }); sorted_sample_names = (function() { @@ -126,7 +145,7 @@ return _this.y_scale(d); }).attr("height", function(d) { return _this.plot_height - _this.y_scale(d); - }).select("title").text(function(d) { + }).style("fill", "steelblue").select("title").text(function(d) { return d; }); x_scale = d3.scale.ordinal().domain(_this.sample_names).rangeBands([0, _this.plot_width], .1); @@ -136,8 +155,27 @@ }); } + Histogram.prototype.get_attr_color_dict = function() { + var attr_color_dict, attribute_info, color, i, key, this_color_dict, value, _i, _len, _ref, _ref1; + color = d3.scale.category20(); + attr_color_dict = {}; + _ref = js_data.attribute_names; + for (key in _ref) { + if (!__hasProp.call(_ref, key)) continue; + attribute_info = _ref[key]; + this_color_dict = {}; + _ref1 = attribute_info.distinct_values; + for (i = _i = 0, _len = _ref1.length; _i < _len; i = ++_i) { + value = _ref1[i]; + this_color_dict[value] = color(i); + } + attr_color_dict[attribute_info.name] = this_color_dict; + } + return attr_color_dict; + }; + Histogram.prototype.get_samples = function() { - var attributes, key, sample; + 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; @@ -162,7 +200,7 @@ } return _results; }).call(this); - attributes = (function() { + this.attributes = (function() { var _results; _results = []; for (key in this.sample_list[0]["extra_attributes"]) { @@ -170,10 +208,22 @@ } return _results; }).call(this); - console.log("attributes:", attributes); - if (attributes.length > 0) { - return alert("TEST"); + 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 console.log("sample_attr_vals:", this.sample_attr_vals); }; Histogram.prototype.create_svg = function() { @@ -210,7 +260,7 @@ Histogram.prototype.add_bars = function() { var _this = this; - return this.svg.selectAll(".bar").data(_.zip(this.sample_names, this.sample_vals)).enter().append("rect").attr("class", "bar").attr("x", function(d) { + return this.svg.selectAll(".bar").data(_.zip(this.sample_names, this.sample_vals)).enter().append("rect").style("fill", "steelblue").attr("class", "bar").attr("x", function(d) { return _this.x_scale(d[0]); }).attr("width", this.x_scale.rangeBand()).attr("y", function(d) { return _this.y_scale(d[1]); @@ -224,7 +274,11 @@ Histogram.prototype.sorted_samples = function() { var sample_list, sorted, _this = this; - sample_list = _.zip(this.sample_names, this.sample_vals); + if (this.sample_attr_vals.length > 0) { + sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals); + } else { + sample_list = _.zip(this.sample_names, this.sample_vals); + } sorted = _.sortBy(sample_list, function(sample) { return sample[1]; }); |