aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZachary Sloan2013-11-01 22:50:58 +0000
committerZachary Sloan2013-11-01 22:50:58 +0000
commitcc4f7967a29ae3450f087f690414b484d59f8c06 (patch)
tree5fe6395b36a4142a69499107528d07a376e8d0d0
parent8c08f7dcc87660d494d12d787bd3c2f5070adc41 (diff)
downloadgenenetwork2-cc4f7967a29ae3450f087f690414b484d59f8c06.tar.gz
In the process of adding the function to color bar chart by the
values of a trait in your collection
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.coffee262
-rw-r--r--wqflask/wqflask/static/new/javascript/bar_chart.js270
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.coffee248
-rw-r--r--wqflask/wqflask/static/new/javascript/show_trait.js260
-rw-r--r--wqflask/wqflask/templates/collections/list.html2
-rw-r--r--wqflask/wqflask/templates/show_trait.html1
-rw-r--r--wqflask/wqflask/templates/show_trait_statistics_new.html58
7 files changed, 575 insertions, 526 deletions
diff --git a/wqflask/wqflask/static/new/javascript/bar_chart.coffee b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
new file mode 100644
index 00000000..a5164790
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.coffee
@@ -0,0 +1,262 @@
+root = exports ? this
+
+class Bar_Chart
+ constructor: (@sample_list, @attribute_names) ->
+ @get_samples()
+ console.log("sample names:", @sample_names)
+
+ #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)
+
+ @margin =
+ top: 20
+ right: 20
+ bottom: longest_sample_name * 7
+ left: 40
+
+ @plot_width = @sample_vals.length * 15 - @margin.left - @margin.right
+ @plot_height = 500 - @margin.top - @margin.bottom
+
+ @x_buffer = @plot_width/20
+ @y_buffer = @plot_height/20
+
+ @y_min = d3.min(@sample_vals)
+ @y_max = d3.max(@sample_vals) * 1.1
+
+ @svg = @create_svg()
+
+ @plot_height -= @y_buffer
+ @create_scales()
+ @create_graph()
+
+ d3.select("#color_attribute").on("change", =>
+ attribute = $("#color_attribute").val()
+ if $("#update_bar_chart").html() == 'Sort By Name'
+ @svg.selectAll(".bar")
+ .data(@sorted_samples())
+ .transition()
+ .duration(1000)
+ .style("fill", (d) =>
+ if attribute == "None"
+ return "steelblue"
+ else
+ return @attr_color_dict[attribute][d[2][attribute]]
+ )
+ .select("title")
+ .text((d) =>
+ return d[1]
+ )
+ else
+ @svg.selectAll(".bar")
+ .data(@samples)
+ .transition()
+ .duration(1000)
+ .style("fill", (d) =>
+ 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) ->
+ 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 && attribute != "None"
+ 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)
+ else
+ $("#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 && attribute != "None"
+ 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)
+ )
+
+ d3.select("#color_by_trait").on("click", =>
+ @color_by_trait()
+ )
+
+ get_attr_color_dict: () ->
+ color = d3.scale.category20()
+ @attr_color_dict = {}
+ console.log("attribute_names:", @attribute_names)
+ for own key, attribute_info of @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
+
+
+
+
+ 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)
+ @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)
+ @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
+ @get_attr_color_dict()
+ console.log("samples:", @samples)
+
+ create_svg: () ->
+ svg = d3.select("#bar_chart")
+ .append("svg")
+ .attr("class", "bar_chart")
+ .attr("width", @plot_width + @margin.left + @margin.right)
+ .attr("height", @plot_height + @margin.top + @margin.bottom)
+ .append("g")
+ .attr("transform", "translate(" + @margin.left + "," + @margin.top + ")")
+
+ return svg
+
+ create_scales: () ->
+ @x_scale = d3.scale.ordinal()
+ .domain(@sample_names)
+ .rangeBands([0, @plot_width], .1)
+
+ @y_scale = d3.scale.linear()
+ .domain([@y_min * 0.75, @y_max])
+ .range([@plot_height, @y_buffer])
+
+ create_graph: () ->
+
+ #@add_border()
+ @add_x_axis(@x_scale)
+ @add_y_axis()
+
+ @add_bars()
+
+ add_x_axis: (scale) ->
+ xAxis = d3.svg.axis()
+ .scale(scale)
+ .orient("bottom");
+
+ @svg.append("g")
+ .attr("class", "x axis")
+ .attr("transform", "translate(0," + @plot_height + ")")
+ .call(xAxis)
+ .selectAll("text")
+ .style("text-anchor", "end")
+ .style("font-size", "12px")
+ .attr("dx", "-.8em")
+ .attr("dy", "-.3em")
+ .attr("transform", (d) =>
+ return "rotate(-90)"
+ )
+
+ add_y_axis: () ->
+ yAxis = d3.svg.axis()
+ .scale(@y_scale)
+ .orient("left")
+ .ticks(5)
+
+ @svg.append("g")
+ .attr("class", "y axis")
+ .call(yAxis)
+ .append("text")
+ .attr("transform", "rotate(-90)")
+ .attr("y", 6)
+ .attr("dy", ".71em")
+ .style("text-anchor", "end")
+
+ add_bars: () ->
+ @svg.selectAll(".bar")
+ .data(@samples)
+ .enter().append("rect")
+ .style("fill", "steelblue")
+ .attr("class", "bar")
+ .attr("x", (d) =>
+ return @x_scale(d[0])
+ )
+ .attr("width", @x_scale.rangeBand())
+ .attr("y", (d) =>
+ return @y_scale(d[1])
+ )
+ .attr("height", (d) =>
+ return @plot_height - @y_scale(d[1])
+ )
+ .append("svg:title")
+ .text((d) =>
+ return d[1]
+ )
+
+ 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)
+ sorted = _.sortBy(sample_list, (sample) =>
+ return sample[1]
+ )
+ console.log("sorted:", sorted)
+ return sorted
+
+ color_by_trait: () ->
+ console.log("Before load")
+ $('#collections_holder').load('/collections/list #collections_list')
+ console.log("After load")
+ #$.colorbox({href:"/collections/list"})
+ #$.get(
+ # url: /collections/list
+ #
+ #)
+
+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
new file mode 100644
index 00000000..60c21ec6
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/bar_chart.js
@@ -0,0 +1,270 @@
+// Generated by CoffeeScript 1.6.1
+(function() {
+ var Bar_Chart, root,
+ __hasProp = {}.hasOwnProperty;
+
+ root = typeof exports !== "undefined" && exports !== null ? exports : this;
+
+ Bar_Chart = (function() {
+
+ function Bar_Chart(sample_list, attribute_names) {
+ var longest_sample_name, sample,
+ _this = this;
+ this.sample_list = sample_list;
+ this.attribute_names = attribute_names;
+ this.get_samples();
+ console.log("sample names:", this.sample_names);
+ longest_sample_name = d3.max((function() {
+ var _i, _len, _ref, _results;
+ _ref = this.sample_names;
+ _results = [];
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ sample = _ref[_i];
+ _results.push(sample.length);
+ }
+ return _results;
+ }).call(this));
+ this.margin = {
+ top: 20,
+ right: 20,
+ bottom: longest_sample_name * 7,
+ left: 40
+ };
+ this.plot_width = this.sample_vals.length * 15 - this.margin.left - this.margin.right;
+ this.plot_height = 500 - this.margin.top - this.margin.bottom;
+ this.x_buffer = this.plot_width / 20;
+ this.y_buffer = this.plot_height / 20;
+ this.y_min = d3.min(this.sample_vals);
+ this.y_max = d3.max(this.sample_vals) * 1.1;
+ this.svg = this.create_svg();
+ this.plot_height -= this.y_buffer;
+ this.create_scales();
+ this.create_graph();
+ d3.select("#color_attribute").on("change", function() {
+ var attribute;
+ attribute = $("#color_attribute").val();
+ if ($("#update_bar_chart").html() === 'Sort By Name') {
+ return _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
+ 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.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 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) {
+ 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 && attribute !== "None") {
+ 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);
+ } else {
+ $("#update_bar_chart").html('Sort By Value');
+ _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 && attribute !== "None") {
+ 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);
+ }
+ });
+ d3.select("#color_by_trait").on("click", function() {
+ return _this.color_by_trait();
+ });
+ }
+
+ Bar_Chart.prototype.get_attr_color_dict = function() {
+ var attribute_info, color, i, key, this_color_dict, value, _i, _len, _ref, _ref1, _results;
+ color = d3.scale.category20();
+ this.attr_color_dict = {};
+ console.log("attribute_names:", this.attribute_names);
+ _ref = this.attribute_names;
+ _results = [];
+ 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);
+ }
+ _results.push(this.attr_color_dict[attribute_info.name] = this_color_dict);
+ }
+ return _results;
+ };
+
+ Bar_Chart.prototype.get_samples = function() {
+ 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;
+ _results = [];
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ sample = _ref[_i];
+ if (sample.value !== null) {
+ _results.push(sample.name);
+ }
+ }
+ return _results;
+ }).call(this);
+ this.sample_vals = (function() {
+ var _i, _len, _ref, _results;
+ _ref = this.sample_list;
+ _results = [];
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ sample = _ref[_i];
+ if (sample.value !== null) {
+ _results.push(sample.value);
+ }
+ }
+ return _results;
+ }).call(this);
+ this.attributes = (function() {
+ var _results;
+ _results = [];
+ for (key in this.sample_list[0]["extra_attributes"]) {
+ _results.push(key);
+ }
+ return _results;
+ }).call(this);
+ 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);
+ }
+ }
+ this.samples = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
+ this.get_attr_color_dict();
+ return console.log("samples:", this.samples);
+ };
+
+ Bar_Chart.prototype.create_svg = function() {
+ var svg;
+ svg = d3.select("#bar_chart").append("svg").attr("class", "bar_chart").attr("width", this.plot_width + this.margin.left + this.margin.right).attr("height", this.plot_height + this.margin.top + this.margin.bottom).append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
+ return svg;
+ };
+
+ Bar_Chart.prototype.create_scales = function() {
+ this.x_scale = d3.scale.ordinal().domain(this.sample_names).rangeBands([0, this.plot_width], .1);
+ return this.y_scale = d3.scale.linear().domain([this.y_min * 0.75, this.y_max]).range([this.plot_height, this.y_buffer]);
+ };
+
+ Bar_Chart.prototype.create_graph = function() {
+ this.add_x_axis(this.x_scale);
+ this.add_y_axis();
+ return this.add_bars();
+ };
+
+ Bar_Chart.prototype.add_x_axis = function(scale) {
+ var xAxis,
+ _this = this;
+ xAxis = d3.svg.axis().scale(scale).orient("bottom");
+ return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").style("font-size", "12px").attr("dx", "-.8em").attr("dy", "-.3em").attr("transform", function(d) {
+ return "rotate(-90)";
+ });
+ };
+
+ Bar_Chart.prototype.add_y_axis = function() {
+ var yAxis;
+ yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
+ return this.svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end");
+ };
+
+ Bar_Chart.prototype.add_bars = function() {
+ var _this = this;
+ 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]);
+ }).attr("height", function(d) {
+ return _this.plot_height - _this.y_scale(d[1]);
+ }).append("svg:title").text(function(d) {
+ return d[1];
+ });
+ };
+
+ Bar_Chart.prototype.sorted_samples = function() {
+ var sample_list, sorted,
+ _this = this;
+ sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
+ sorted = _.sortBy(sample_list, function(sample) {
+ return sample[1];
+ });
+ console.log("sorted:", sorted);
+ return sorted;
+ };
+
+ Bar_Chart.prototype.color_by_trait = function() {
+ console.log("Before load");
+ $('#collections_holder').load('/collections/list #collections_list');
+ return console.log("After load");
+ };
+
+ return Bar_Chart;
+
+ })();
+
+ root.Bar_Chart = Bar_Chart;
+
+}).call(this);
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee
index 66110469..55eb1f56 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.coffee
+++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee
@@ -59,249 +59,12 @@ Stat_Table_Rows = [
]
$ ->
- class Histogram
- constructor: (@sample_list, @sample_group) ->
- @get_samples()
- console.log("sample names:", @sample_names)
-
- #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)
-
- @margin = {top: 20, right: 20, bottom: longest_sample_name * 7, left: 40}
- @plot_width = @sample_vals.length * 15 - @margin.left - @margin.right
- @plot_height = 500 - @margin.top - @margin.bottom
-
- @x_buffer = @plot_width/20
- @y_buffer = @plot_height/20
-
- @y_min = d3.min(@sample_vals)
- @y_max = d3.max(@sample_vals) * 1.1
-
- @svg = @create_svg()
-
- @plot_height -= @y_buffer
- @create_scales()
- @create_graph()
-
- d3.select("#color_attribute").on("change", =>
- attribute = $("#color_attribute").val()
- if $("#update_bar_chart").html() == 'Sort By Name'
- @svg.selectAll(".bar")
- .data(@sorted_samples())
- .transition()
- .duration(1000)
- .style("fill", (d) =>
- if attribute == "None"
- return "steelblue"
- else
- return @attr_color_dict[attribute][d[2][attribute]]
- )
- .select("title")
- .text((d) =>
- return d[1]
- )
- else
- @svg.selectAll(".bar")
- .data(@samples)
- .transition()
- .duration(1000)
- .style("fill", (d) =>
- 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) ->
- 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)
- else
- $("#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)
- )
-
- 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
-
-
-
-
- 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)
- @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)
- @samples = _.zip(@sample_names, @sample_vals, @sample_attr_vals)
- @get_attr_color_dict()
- console.log("samples:", @samples)
-
- create_svg: () ->
- svg = d3.select("#bar_chart")
- .append("svg")
- .attr("class", "bar_chart")
- .attr("width", @plot_width + @margin.left + @margin.right)
- .attr("height", @plot_height + @margin.top + @margin.bottom)
- .append("g")
- .attr("transform", "translate(" + @margin.left + "," + @margin.top + ")")
-
- return svg
-
- create_scales: () ->
- @x_scale = d3.scale.ordinal()
- .domain(@sample_names)
- .rangeBands([0, @plot_width], .1)
-
- @y_scale = d3.scale.linear()
- .domain([@y_min * 0.75, @y_max])
- .range([@plot_height, @y_buffer])
-
- create_graph: () ->
-
- #@add_border()
- @add_x_axis(@x_scale)
- @add_y_axis()
-
- @add_bars()
-
- add_x_axis: (scale) ->
- xAxis = d3.svg.axis()
- .scale(scale)
- .orient("bottom");
-
- @svg.append("g")
- .attr("class", "x axis")
- .attr("transform", "translate(0," + @plot_height + ")")
- .call(xAxis)
- .selectAll("text")
- .style("text-anchor", "end")
- .style("font-size", "12px")
- .attr("dx", "-.8em")
- .attr("dy", "-.3em")
- .attr("transform", (d) =>
- return "rotate(-90)"
- )
-
- add_y_axis: () ->
- yAxis = d3.svg.axis()
- .scale(@y_scale)
- .orient("left")
- .ticks(5)
-
- @svg.append("g")
- .attr("class", "y axis")
- .call(yAxis)
- .append("text")
- .attr("transform", "rotate(-90)")
- .attr("y", 6)
- .attr("dy", ".71em")
- .style("text-anchor", "end")
-
- add_bars: () ->
- @svg.selectAll(".bar")
- .data(@samples)
- .enter().append("rect")
- .style("fill", "steelblue")
- .attr("class", "bar")
- .attr("x", (d) =>
- return @x_scale(d[0])
- )
- .attr("width", @x_scale.rangeBand())
- .attr("y", (d) =>
- return @y_scale(d[1])
- )
- .attr("height", (d) =>
- return @plot_height - @y_scale(d[1])
- )
- .append("svg:title")
- .text((d) =>
- return d[1]
- )
-
- 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)
- sorted = _.sortBy(sample_list, (sample) =>
- return sample[1]
- )
- console.log("sorted:", sorted)
- return sorted
sample_lists = js_data.sample_lists
+ attribute_names = js_data.attribute_names
sample_group_types = js_data.sample_group_types
- new Histogram(sample_lists[0])
+ new Bar_Chart(sample_lists[0], attribute_names)
$('.stats_samples_group').change ->
$('#bar_chart').remove()
@@ -309,13 +72,12 @@ $ ->
group = $(this).val()
console.log("group:", group)
if group == "samples_primary"
- new Histogram(sample_lists[0])
+ new Bar_Chart(sample_lists[0])
else if group == "samples_other"
- new Histogram(sample_lists[1])
+ new Bar_Chart(sample_lists[1])
else if group == "samples_all"
all_samples = sample_lists[0].concat sample_lists[1]
- new Histogram(all_samples)
-
+ new HBar_Chart(all_samples)
hide_tabs = (start) ->
for x in [start..10]
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index 4e7fe8f8..c5a6cbd5 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -56,259 +56,11 @@
];
$(function() {
- var Histogram, 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;
- Histogram = (function() {
-
- function Histogram(sample_list, sample_group) {
- var longest_sample_name, sample,
- _this = this;
- this.sample_list = sample_list;
- this.sample_group = sample_group;
- this.get_samples();
- console.log("sample names:", this.sample_names);
- longest_sample_name = d3.max((function() {
- var _i, _len, _ref, _results;
- _ref = this.sample_names;
- _results = [];
- for (_i = 0, _len = _ref.length; _i < _len; _i++) {
- sample = _ref[_i];
- _results.push(sample.length);
- }
- return _results;
- }).call(this));
- this.margin = {
- top: 20,
- right: 20,
- bottom: longest_sample_name * 7,
- left: 40
- };
- this.plot_width = this.sample_vals.length * 15 - this.margin.left - this.margin.right;
- this.plot_height = 500 - this.margin.top - this.margin.bottom;
- this.x_buffer = this.plot_width / 20;
- this.y_buffer = this.plot_height / 20;
- this.y_min = d3.min(this.sample_vals);
- this.y_max = d3.max(this.sample_vals) * 1.1;
- this.svg = this.create_svg();
- this.plot_height -= this.y_buffer;
- this.create_scales();
- this.create_graph();
- d3.select("#color_attribute").on("change", function() {
- var attribute;
- attribute = $("#color_attribute").val();
- if ($("#update_bar_chart").html() === 'Sort By Name') {
- return _this.svg.selectAll(".bar").data(_this.sorted_samples()).transition().duration(1000).style("fill", function(d) {
- 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.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 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) {
- 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);
- } else {
- $("#update_bar_chart").html('Sort By Value');
- _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);
- }
- });
- }
-
- Histogram.prototype.get_attr_color_dict = function() {
- var attribute_info, color, i, key, this_color_dict, value, _i, _len, _ref, _ref1, _results;
- color = d3.scale.category20();
- this.attr_color_dict = {};
- _ref = js_data.attribute_names;
- _results = [];
- 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);
- }
- _results.push(this.attr_color_dict[attribute_info.name] = this_color_dict);
- }
- return _results;
- };
-
- Histogram.prototype.get_samples = function() {
- 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;
- _results = [];
- for (_i = 0, _len = _ref.length; _i < _len; _i++) {
- sample = _ref[_i];
- if (sample.value !== null) {
- _results.push(sample.name);
- }
- }
- return _results;
- }).call(this);
- this.sample_vals = (function() {
- var _i, _len, _ref, _results;
- _ref = this.sample_list;
- _results = [];
- for (_i = 0, _len = _ref.length; _i < _len; _i++) {
- sample = _ref[_i];
- if (sample.value !== null) {
- _results.push(sample.value);
- }
- }
- return _results;
- }).call(this);
- this.attributes = (function() {
- var _results;
- _results = [];
- for (key in this.sample_list[0]["extra_attributes"]) {
- _results.push(key);
- }
- return _results;
- }).call(this);
- 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);
- }
- }
- 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() {
- var svg;
- svg = d3.select("#bar_chart").append("svg").attr("class", "bar_chart").attr("width", this.plot_width + this.margin.left + this.margin.right).attr("height", this.plot_height + this.margin.top + this.margin.bottom).append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
- return svg;
- };
-
- Histogram.prototype.create_scales = function() {
- this.x_scale = d3.scale.ordinal().domain(this.sample_names).rangeBands([0, this.plot_width], .1);
- return this.y_scale = d3.scale.linear().domain([this.y_min * 0.75, this.y_max]).range([this.plot_height, this.y_buffer]);
- };
-
- Histogram.prototype.create_graph = function() {
- this.add_x_axis(this.x_scale);
- this.add_y_axis();
- return this.add_bars();
- };
-
- Histogram.prototype.add_x_axis = function(scale) {
- var xAxis,
- _this = this;
- xAxis = d3.svg.axis().scale(scale).orient("bottom");
- return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").style("font-size", "12px").attr("dx", "-.8em").attr("dy", "-.3em").attr("transform", function(d) {
- return "rotate(-90)";
- });
- };
-
- Histogram.prototype.add_y_axis = function() {
- var yAxis;
- yAxis = d3.svg.axis().scale(this.y_scale).orient("left").ticks(5);
- return this.svg.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(-90)").attr("y", 6).attr("dy", ".71em").style("text-anchor", "end");
- };
-
- Histogram.prototype.add_bars = function() {
- var _this = this;
- 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]);
- }).attr("height", function(d) {
- return _this.plot_height - _this.y_scale(d[1]);
- }).append("svg:title").text(function(d) {
- return d[1];
- });
- };
-
- Histogram.prototype.sorted_samples = function() {
- var sample_list, sorted,
- _this = this;
- sample_list = _.zip(this.sample_names, this.sample_vals, this.sample_attr_vals);
- sorted = _.sortBy(sample_list, function(sample) {
- return sample[1];
- });
- console.log("sorted:", sorted);
- return sorted;
- };
-
- return Histogram;
-
- })();
+ var attribute_names, 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;
+ attribute_names = js_data.attribute_names;
sample_group_types = js_data.sample_group_types;
- new Histogram(sample_lists[0]);
+ new Bar_Chart(sample_lists[0], attribute_names);
$('.stats_samples_group').change(function() {
var all_samples, group;
$('#bar_chart').remove();
@@ -316,12 +68,12 @@
group = $(this).val();
console.log("group:", group);
if (group === "samples_primary") {
- return new Histogram(sample_lists[0]);
+ return new Bar_Chart(sample_lists[0]);
} else if (group === "samples_other") {
- return new Histogram(sample_lists[1]);
+ return new Bar_Chart(sample_lists[1]);
} else if (group === "samples_all") {
all_samples = sample_lists[0].concat(sample_lists[1]);
- return new Histogram(all_samples);
+ return new HBar_Chart(all_samples);
}
});
hide_tabs = function(start) {
diff --git a/wqflask/wqflask/templates/collections/list.html b/wqflask/wqflask/templates/collections/list.html
index 111d761f..dce7d41d 100644
--- a/wqflask/wqflask/templates/collections/list.html
+++ b/wqflask/wqflask/templates/collections/list.html
@@ -10,7 +10,7 @@
<h1>Collections owned by {{ g.user_session.user_ob.full_name }}</h1>
</div>
- <div class="bs-docs-example">
+ <div class="bs-docs-example" id="collections_list">
<table class="table table-hover" id='trait_table'>
<thead>
<tr>
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 5d77750c..36a62327 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -53,6 +53,7 @@
<script type="text/javascript" src="/static/new/packages/ValidationPlugin/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="/static/new/javascript/stats.js"></script>
+ <script type="text/javascript" src="/static/new/javascript/bar_chart.js"></script>
<script type="text/javascript" src="/static/new/javascript/show_trait.js"></script>
<script type="text/javascript" src="/static/new/javascript/show_trait_mapping_tools.js"></script>
<script type="text/javascript" src="/static/new/javascript/validation.js"></script>
diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html
index 105c4f95..eb8228e1 100644
--- a/wqflask/wqflask/templates/show_trait_statistics_new.html
+++ b/wqflask/wqflask/templates/show_trait_statistics_new.html
@@ -1,29 +1,31 @@
-<div>
- <br>
- <h2>Charts and Figures</h2>
- <div class="well form-horizontal">
- {% if sample_groups|length > 1 %}
- <select class="stats_samples_group">
- {% for group, pretty_group in sample_group_types.items() %}
- <option value="{{ group }}">{{ pretty_group }}</option>
- {% endfor %}
- </select>
- {% endif %}
- {% if sample_groups[0].attributes %}
- <div class="input-append">
- <select id="color_attribute" size=1>
- <option value="None">None</option>
- {% for attribute in sample_groups[0].attributes %}
- <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
- {{ sample_groups[0].attributes[attribute].name }}</option>
- {% endfor %}
- </select>
- </div>
- {% endif %}
- <button type="button" id="update_bar_chart">Sort By Value</button>
- <div id="bar_chart_container">
- <div id="bar_chart"></div>
- </div>
-
- </div>
+<div>
+ <br>
+ <h2>Charts and Figures</h2>
+ <div class="well form-horizontal">
+ {% if sample_groups|length > 1 %}
+ <select class="stats_samples_group">
+ {% for group, pretty_group in sample_group_types.items() %}
+ <option value="{{ group }}">{{ pretty_group }}</option>
+ {% endfor %}
+ </select>
+ {% endif %}
+ {% if sample_groups[0].attributes %}
+ <div class="input-append">r
+ <select id="color_attribute" size=1>
+ <option value="None">None</option>
+ {% for attribute in sample_groups[0].attributes %}
+ <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
+ {{ sample_groups[0].attributes[attribute].name }}</option>
+ {% endfor %}
+ </select>
+ </div>
+ {% endif %}
+ <button type="button" id="update_bar_chart">Sort By Value</button>
+ <button type="button" id="color_by_trait">Color by Trait</button>
+ <div id="bar_chart_container">
+ <div id="bar_chart"></div>
+ </div>
+
+ </div>
+ <div id="collections_holder"></div>
</div> \ No newline at end of file