In the process of adding the function to color bar chart by the

values of a trait in your collection

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