aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.coffee66
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.js74
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];
});
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-23 22:31:15 +0000