diff options
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/bar_chart.coffee | 262 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/bar_chart.js | 270 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/show_trait.coffee | 248 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/show_trait.js | 260 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/collections/list.html | 2 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/show_trait.html | 1 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/show_trait_statistics_new.html | 58 |
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 |