From c167c2e04875dfdb6611ecef906a51d7fbd4259f Mon Sep 17 00:00:00 2001
From: Zachary Sloan
Date: Fri, 1 Nov 2013 21:48:06 +0000
Subject: Made the extra attribute bar chart coloring continue to work when the
user sorts and gave the option to revert to no coloring
---
misc/gn_installation_notes.txt | 6 ++
.../static/new/javascript/show_trait.coffee | 59 +++++++++++-------
.../wqflask/static/new/javascript/show_trait.js | 69 ++++++++++++++--------
.../templates/show_trait_statistics_new.html | 11 ++--
4 files changed, 93 insertions(+), 52 deletions(-)
diff --git a/misc/gn_installation_notes.txt b/misc/gn_installation_notes.txt
index a73e7d4f..584080f7 100644
--- a/misc/gn_installation_notes.txt
+++ b/misc/gn_installation_notes.txt
@@ -304,6 +304,12 @@ sudo apt-get install colordiff
==========================================
+Install NTP (network time protocol)
+
+sudo apt-get install ntp
+
+==========================================
+
To get server running:
!If having seemingly inexplicable problems with imports, make sure I've started the environment!
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index d236b795..66110469 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -85,15 +85,16 @@ $ ->
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]]
+ if attribute == "None"
+ return "steelblue"
+ else
+ return @attr_color_dict[attribute][d[2][attribute]]
)
.select("title")
.text((d) =>
@@ -101,17 +102,21 @@ $ ->
)
else
@svg.selectAll(".bar")
- .data(@sample_attr_vals)
+ .data(@samples)
.transition()
.duration(1000)
.style("fill", (d) =>
- attr_color_dict = @get_attr_color_dict()
- return attr_color_dict[attribute][d[attribute]]
+ if attribute == "None"
+ return "steelblue"
+ else
+ return @attr_color_dict[attribute][d[2][attribute]]
)
)
d3.select("#update_bar_chart").on("click", =>
+ if @attributes.length > 0
+ attribute = $("#color_attribute").val()
if $("#update_bar_chart").html() == 'Sort By Value'
$("#update_bar_chart").html('Sort By Name')
sortItems = (a, b) ->
@@ -127,7 +132,12 @@ $ ->
.attr("height", (d) =>
return @plot_height - @y_scale(d[1])
)
- .style("fill", "steelblue")
+ .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]
@@ -141,19 +151,24 @@ $ ->
else
$("#update_bar_chart").html('Sort By Value')
@svg.selectAll(".bar")
- .data(@sample_vals)
+ .data(@samples)
.transition()
.duration(1000)
.attr("y", (d) =>
- return @y_scale(d)
+ return @y_scale(d[1])
)
.attr("height", (d) =>
- return @plot_height - @y_scale(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"
)
- .style("fill", "steelblue")
.select("title")
.text((d) =>
- return d
+ return d[1]
)
x_scale = d3.scale.ordinal()
.domain(@sample_names)
@@ -164,14 +179,12 @@ $ ->
get_attr_color_dict: () ->
color = d3.scale.category20()
- attr_color_dict = {}
+ @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
+ @attr_color_dict[attribute_info.name] = this_color_dict
@@ -188,7 +201,9 @@ $ ->
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)
+ @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
+ @get_attr_color_dict()
+ console.log("samples:", @samples)
create_svg: () ->
svg = d3.select("#bar_chart")
@@ -253,7 +268,7 @@ $ ->
add_bars: () ->
@svg.selectAll(".bar")
- .data(_.zip(@sample_names, @sample_vals))
+ .data(@samples)
.enter().append("rect")
.style("fill", "steelblue")
.attr("class", "bar")
@@ -273,10 +288,10 @@ $ ->
)
sorted_samples: () ->
- if @sample_attr_vals.length > 0
- sample_list = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
- else
- 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 22e20180..4e7fe8f8 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -95,25 +95,31 @@
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]];
+ if (attribute === "None") {
+ return "steelblue";
+ } else {
+ return _this.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]];
+ return _this.svg.selectAll(".bar").data(_this.samples).transition().duration(1000).style("fill", function(d) {
+ if (attribute === "None") {
+ return "steelblue";
+ } else {
+ return _this.attr_color_dict[attribute][d[2][attribute]];
+ }
});
}
});
d3.select("#update_bar_chart").on("click", function() {
- var sortItems, sorted_sample_names, x_scale;
+ var attribute, sortItems, sorted_sample_names, x_scale;
+ if (_this.attributes.length > 0) {
+ attribute = $("#color_attribute").val();
+ }
if ($("#update_bar_chart").html() === 'Sort By Value') {
$("#update_bar_chart").html('Sort By Name');
sortItems = function(a, b) {
@@ -123,7 +129,13 @@
return _this.y_scale(d[1]);
}).attr("height", function(d) {
return _this.plot_height - _this.y_scale(d[1]);
- }).style("fill", "steelblue").select("title").text(function(d) {
+ }).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() {
@@ -141,12 +153,18 @@
return _this.add_x_axis(x_scale);
} else {
$("#update_bar_chart").html('Sort By Value');
- _this.svg.selectAll(".bar").data(_this.sample_vals).transition().duration(1000).attr("y", function(d) {
- return _this.y_scale(d);
+ _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);
- }).style("fill", "steelblue").select("title").text(function(d) {
- return 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();
@@ -156,10 +174,11 @@
}
Histogram.prototype.get_attr_color_dict = function() {
- var attr_color_dict, attribute_info, color, i, key, this_color_dict, value, _i, _len, _ref, _ref1;
+ var attribute_info, color, i, key, this_color_dict, value, _i, _len, _ref, _ref1, _results;
color = d3.scale.category20();
- attr_color_dict = {};
+ this.attr_color_dict = {};
_ref = js_data.attribute_names;
+ _results = [];
for (key in _ref) {
if (!__hasProp.call(_ref, key)) continue;
attribute_info = _ref[key];
@@ -169,9 +188,9 @@
value = _ref1[i];
this_color_dict[value] = color(i);
}
- attr_color_dict[attribute_info.name] = this_color_dict;
+ _results.push(this.attr_color_dict[attribute_info.name] = this_color_dict);
}
- return attr_color_dict;
+ return _results;
};
Histogram.prototype.get_samples = function() {
@@ -223,7 +242,9 @@
this.sample_attr_vals.push(attr_vals);
}
}
- return console.log("sample_attr_vals:", this.sample_attr_vals);
+ this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
+ this.get_attr_color_dict();
+ return console.log("samples:", this.samples);
};
Histogram.prototype.create_svg = function() {
@@ -260,7 +281,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").style("fill", "steelblue").attr("class", "bar").attr("x", function(d) {
+ return this.svg.selectAll(".bar").data(this.samples).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]);
@@ -274,11 +295,7 @@
Histogram.prototype.sorted_samples = function() {
var sample_list, sorted,
_this = this;
- 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);
- }
+ sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
sorted = _.sortBy(sample_list, function(sample) {
return sample[1];
});
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 58389ce4..105c4f95 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -2,18 +2,21 @@
Charts and Figures