diff options
Diffstat (limited to 'gn2/wqflask/static/new/javascript/bar_chart.js')
| -rw-r--r-- | gn2/wqflask/static/new/javascript/bar_chart.js | 498 |
1 files changed, 498 insertions, 0 deletions
diff --git a/gn2/wqflask/static/new/javascript/bar_chart.js b/gn2/wqflask/static/new/javascript/bar_chart.js new file mode 100644 index 00000000..d8540580 --- /dev/null +++ b/gn2/wqflask/static/new/javascript/bar_chart.js @@ -0,0 +1,498 @@ +// Generated by CoffeeScript 1.9.2 +(function() { + var Bar_Chart, root, + bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; }, + indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }, + hasProp = {}.hasOwnProperty; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; + + Bar_Chart = (function() { + function Bar_Chart(sample_lists) { + this.add_legend_discrete = bind(this.add_legend_discrete, this); + this.add_legend_continuous = bind(this.add_legend_continuous, this); + this.remove_legend = bind(this.remove_legend, this); + this.add_legend = bind(this.add_legend, this); + var key, l1, l1_names, l2, l3, longest_sample_name_len, s, sample, x; + this.sample_lists = {}; + l1 = this.sample_lists['samples_primary'] = sample_lists[0] || []; + l2 = this.sample_lists['samples_other'] = sample_lists[1] || []; + l1_names = (function() { + var j, len, results; + results = []; + for (j = 0, len = l1.length; j < len; j++) { + x = l1[j]; + results.push(x.name); + } + return results; + })(); + l3 = l1.concat((function() { + var j, len, ref, results; + results = []; + for (j = 0, len = l2.length; j < len; j++) { + x = l2[j]; + if (ref = x.name, indexOf.call(l1_names, ref) < 0) { + results.push(x); + } + } + return results; + })()); + this.sample_lists['samples_all'] = l3; + longest_sample_name_len = d3.max((function() { + var j, len, results; + results = []; + for (j = 0, len = l3.length; j < len; j++) { + sample = l3[j]; + results.push(sample.name.length); + } + return results; + })()); + this.margin = { + top: 20, + right: 20, + bottom: longest_sample_name_len * 6, + left: 40 + }; + this.attributes = (function() { + var results; + results = []; + for (key in sample_lists[0][0]["extra_attributes"]) { + results.push(key); + } + return results; + })(); + this.sample_attr_vals = (function() { + var j, len, ref, results; + ref = this.sample_lists['samples_all']; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + s = ref[j]; + if (s.value !== null) { + results.push(this.extra(s)); + } + } + return results; + }).call(this); + this.get_distinct_attr_vals(); + this.get_attr_color_dict(this.distinct_attr_vals); + this.attribute_name = "None"; + this.sort_by = "name"; + this.chart = null; + this.select_attribute_box = $("#color_attribute"); + d3.select("#color_attribute").on("change", (function(_this) { + return function() { + _this.attribute_name = _this.select_attribute_box.val(); + return _this.rebuild_bar_graph(); + }; + })(this)); + $(".sort_by_value").on("click", (function(_this) { + return function() { + console.log("sorting by value"); + _this.sort_by = "value"; + return _this.rebuild_bar_graph(); + }; + })(this)); + $(".sort_by_name").on("click", (function(_this) { + return function() { + console.log("sorting by name"); + _this.sort_by = "name"; + return _this.rebuild_bar_graph(); + }; + })(this)); + d3.select("#color_by_trait").on("click", (function(_this) { + return function() { + return _this.open_trait_selection(); + }; + })(this)); + } + + Bar_Chart.prototype.value = function(sample) { + return this.value_dict[sample.name].value; + }; + + Bar_Chart.prototype.variance = function(sample) { + return this.value_dict[sample.name].variance; + }; + + Bar_Chart.prototype.extra = function(sample) { + var attr_vals, attribute, j, len, ref; + attr_vals = {}; + ref = this.attributes; + for (j = 0, len = ref.length; j < len; j++) { + attribute = ref[j]; + attr_vals[attribute] = sample["extra_attributes"][attribute]; + } + return attr_vals; + }; + + Bar_Chart.prototype.redraw = function(samples_dict, selected_group) { + var x; + this.value_dict = samples_dict[selected_group]; + this.raw_data = (function() { + var j, len, ref, results; + ref = this.sample_lists[selected_group]; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + x = ref[j]; + if (x.name in this.value_dict && this.value(x) !== null) { + results.push(x); + } + } + return results; + }).call(this); + return this.rebuild_bar_graph(); + }; + + Bar_Chart.prototype.rebuild_bar_graph = function() { + var container, h, raw_data; + raw_data = this.raw_data.slice(); + if (this.sort_by === 'value') { + raw_data = raw_data.sort((function(_this) { + return function(x, y) { + return _this.value(x) - _this.value(y); + }; + })(this)); + } + console.log("raw_data: ", raw_data); + h = 600; + container = $("#bar_chart_container"); + container.height(h + this.margin.top + this.margin.bottom); + if (this.chart === null) { + this.chart = nv.models.multiBarChart().height(h).errorBarColor((function(_this) { + return function() { + return 'red'; + }; + })(this)).reduceXTicks(false).staggerLabels(false).showControls(false).showLegend(false); + this.chart.multibar.dispatch.on('elementMouseover.tooltip', (function(_this) { + return function(evt) { + var k, ref, v; + evt.value = _this.chart.x()(evt.data); + evt['series'] = [ + { + key: 'Value', + value: evt.data.y, + color: evt.color + } + ]; + if (evt.data.yErr) { + evt['series'].push({ + key: 'SE', + value: evt.data.yErr + }); + } + if (evt.data.attr) { + ref = evt.data.attr; + for (k in ref) { + v = ref[k]; + evt['series'].push({ + key: k, + value: v + }); + } + } + return _this.chart.tooltip.data(evt).hidden(false); + }; + })(this)); + this.chart.tooltip.valueFormatter(function(d, i) { + return d; + }); + } + return nv.addGraph((function(_this) { + return function() { + var d, s, values; + _this.remove_legend(); + values = (function() { + var j, len, results; + results = []; + for (j = 0, len = raw_data.length; j < len; j++) { + s = raw_data[j]; + results.push({ + x: s.name, + y: this.value(s), + yErr: this.variance(s) || 0, + attr: s.extra_attributes + }); + } + return results; + }).call(_this); + if (_this.attribute_name !== "None") { + _this.color_dict = _this.attr_color_dict[_this.attribute_name]; + _this.chart.barColor(function(d) { + return _this.color_dict[d.attr[_this.attribute_name]]; + }); + _this.add_legend(); + } else if (typeof _this.trait_color_dict !== 'undefined') { + _this.color_dict = _this.trait_color_dict; + _this.chart.barColor(function(d) { + return _this.color_dict[d['x']]; + }); + } else { + _this.chart.barColor(function() { + return 'steelblue'; + }); + } + _this.chart.width(raw_data.length * 20); + //User should be able to change Y domain, but should still have good default + _this.chart.yDomain([ + 0.95 * _.min((function() { // ZS: Decreasing this constant decreases the min Y axis value + var j, len, results; + results = []; + for (j = 0, len = values.length; j < len; j++) { + d = values[j]; + results.push(d.y - 0.5 * d.yErr); //ZS: the 0.5 was originally 1.5 + } + return results; + })()), 1.05 * _.max((function() { // ZS: Decreasing this constant decreases the max Y axis value + var j, len, results; + results = []; + for (j = 0, len = values.length; j < len; j++) { + d = values[j]; + results.push(d.y + 0.5 * d.yErr); // //ZS: the 0.5 was originally 1.5 + } + return results; + })()) + ]); + console.log("values: ", values); + + decimal_exists = "False"; + for(i=0; i < values.length; i++){ + if (values[i]['y'] % 1 != 0){ + decimal_exists = "True"; + break; + } + } + if (decimal_exists == "False"){ + _this.chart.yAxis.tickFormat(d3.format('d')) + } + d3.select("#bar_chart_container svg").datum([ + { + values: values + } + ]).style('width', raw_data.length * 20 + 'px').transition().duration(1000).call(_this.chart); + d3.select("#bar_chart_container .nv-x").selectAll('.tick text').style("font-size", "12px").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", "-.3em").attr("transform", function(d) { + return "rotate(-90)"; + }); + return _this.chart; + }; + })(this)); + }; + + Bar_Chart.prototype.get_attr_color_dict = function(vals) { + var color, color_range, discrete, distinct_vals, i, j, key, l, len, len1, results, this_color_dict, value; + this.attr_color_dict = {}; + this.is_discrete = {}; + this.minimum_values = {}; + this.maximum_values = {}; + console.log("vals:", vals); + results = []; + for (key in vals) { + if (!hasProp.call(vals, key)) continue; + distinct_vals = vals[key]; + this.min_val = d3.min(distinct_vals); + this.max_val = d3.max(distinct_vals); + this_color_dict = {}; + discrete = distinct_vals.length < 10; + if (discrete) { + color = d3.scale.category10(); + for (i = j = 0, len = distinct_vals.length; j < len; i = ++j) { + value = distinct_vals[i]; + this_color_dict[value] = color(i); + } + } else { + console.log("distinct_values:", distinct_vals); + if (_.every(distinct_vals, (function(_this) { + return function(d) { + if (isNaN(d)) { + return false; + } else { + return true; + } + }; + })(this))) { + color_range = d3.scale.linear().domain([this.min_val, this.max_val]).range([0, 255]); + for (i = l = 0, len1 = distinct_vals.length; l < len1; i = ++l) { + value = distinct_vals[i]; + console.log("color_range(value):", parseInt(color_range(value))); + this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0); + } + } + } + this.attr_color_dict[key] = this_color_dict; + this.is_discrete[key] = discrete; + this.minimum_values[key] = this.min_val; + results.push(this.maximum_values[key] = this.max_val); + } + return results; + }; + + Bar_Chart.prototype.get_distinct_attr_vals = function() { + var attribute, j, len, ref, results, sample; + this.distinct_attr_vals = {}; + ref = this.sample_attr_vals; + results = []; + for (j = 0, len = ref.length; j < len; j++) { + sample = ref[j]; + results.push((function() { + var ref1, results1; + results1 = []; + for (attribute in sample) { + if (!this.distinct_attr_vals[attribute]) { + this.distinct_attr_vals[attribute] = []; + } + if (ref1 = sample[attribute], indexOf.call(this.distinct_attr_vals[attribute], ref1) < 0) { + results1.push(this.distinct_attr_vals[attribute].push(sample[attribute])); + } else { + results1.push(void 0); + } + } + return results1; + }).call(this)); + } + return results; + }; + + Bar_Chart.prototype.add_legend = function() { + if (this.is_discrete[this.attribute_name]) { + return this.add_legend_discrete(); + } else { + return this.add_legend_continuous(); + } + }; + + Bar_Chart.prototype.remove_legend = function() { + $(".legend").remove(); + return $("#legend-left,#legend-right,#legend-colors").empty(); + }; + + Bar_Chart.prototype.add_legend_continuous = function() { + var svg_html; + $('#legend-left').html(this.minimum_values[this.attribute_name]); + $('#legend-right').html(this.maximum_values[this.attribute_name]); + svg_html = '<svg height="15" width="120"> <rect x="0" width="20" height="15" style="fill: rgb(0, 0, 0);"></rect> <rect x="20" width="20" height="15" style="fill: rgb(50, 0, 0);"></rect> <rect x="40" width="20" height="15" style="fill: rgb(100, 0, 0);"></rect> <rect x="60" width="20" height="15" style="fill: rgb(150, 0, 0);"></rect> <rect x="80" width="20" height="15" style="fill: rgb(200, 0, 0);"></rect> <rect x="100" width="20" height="15" style="fill: rgb(255, 0, 0);"></rect> </svg>'; + console.log("svg_html:", svg_html); + return $('#legend-colors').html(svg_html); + }; + + Bar_Chart.prototype.add_legend_discrete = function() { + var legend_span; + legend_span = d3.select('#bar_chart_legend').append('div').style('word-wrap', 'break-word').attr('class', 'legend').selectAll('span').data(this.distinct_attr_vals[this.attribute_name]).enter().append('span').style({ + 'word-wrap': 'normal', + 'display': 'inline-block' + }); + legend_span.append('span').style("background-color", (function(_this) { + return function(d) { + return _this.attr_color_dict[_this.attribute_name][d]; + }; + })(this)).style({ + 'display': 'inline-block', + 'width': '15px', + 'height': '15px', + 'margin': '0px 5px 0px 15px' + }); + return legend_span.append('span').text((function(_this) { + return function(d) { + return d; + }; + })(this)).style('font-size', '20px'); + }; + + Bar_Chart.prototype.open_trait_selection = function() { + return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', (function(_this) { + return function() { + $.colorbox({ + inline: true, + href: "#collections_holder" + }); + return $('a.collection_name').attr('onClick', 'return false'); + }; + })(this)); + }; + + Bar_Chart.prototype.color_by_trait = function(trait_sample_data) { + var distinct_values, trimmed_samples; + console.log("BXD1:", trait_sample_data["BXD1"]); + console.log("trait_sample_data:", trait_sample_data); + trimmed_samples = this.trim_values(trait_sample_data); + distinct_values = {}; + distinct_values["collection_trait"] = this.get_distinct_values(trimmed_samples); + this.trait_color_dict = this.get_trait_color_dict(trimmed_samples, distinct_values); + console.log("TRAIT_COLOR_DICT:", this.trait_color_dict); + return this.rebuild_bar_graph(); + //return console.log("SAMPLES:", this.samples); + }; + + Bar_Chart.prototype.trim_values = function(trait_sample_data) { + var j, len, ref, sample, trimmed_samples; + trimmed_samples = {}; + ref = this.sample_lists['samples_all']; + for (j = 0, len = ref.length; j < len; j++) { + sample = ref[j]['name']; + if (sample in trait_sample_data) { + trimmed_samples[sample] = trait_sample_data[sample]; + } + } + console.log("trimmed_samples:", trimmed_samples); + return trimmed_samples; + }; + + Bar_Chart.prototype.get_distinct_values = function(samples) { + var distinct_values; + distinct_values = _.uniq(_.values(samples)); + console.log("distinct_values:", distinct_values); + return distinct_values; + }; + + Bar_Chart.prototype.get_trait_color_dict = function(samples, vals) { + var color, color_range, distinct_vals, i, j, k, key, len, len1, results, sample, this_color_dict, value; + trait_color_dict = {}; + console.log("vals:", vals); + for (key in vals) { + if (!hasProp.call(vals, key)) continue; + distinct_vals = vals[key]; + this_color_dict = {}; + this.min_val = d3.min(distinct_vals); + this.max_val = d3.max(distinct_vals); + if (distinct_vals.length < 10) { + color = d3.scale.category10(); + for (i = j = 0, len = distinct_vals.length; j < len; i = ++j) { + value = distinct_vals[i]; + this_color_dict[value] = color(i); + } + } else { + console.log("distinct_values:", distinct_vals); + if (_.every(distinct_vals, (function(_this) { + return function(d) { + if (isNaN(d)) { + return false; + } else { + return true; + } + }; + })(this))) { + color_range = d3.scale.linear().domain([d3.min(distinct_vals), d3.max(distinct_vals)]).range([0, 255]); + for (i = k = 0, len1 = distinct_vals.length; k < len1; i = ++k) { + value = distinct_vals[i]; + //console.log("color_range(value):", parseInt(color_range(value))); + this_color_dict[value] = d3.rgb(parseInt(color_range(value)), 0, 0); + } + } + } + } + results = []; + console.log("SAMPLES:", samples) + for (sample in samples) { + if (!hasProp.call(samples, sample)) continue; + value = samples[sample]; + trait_color_dict[sample] = this_color_dict[value]; + //results.push(this.trait_color_dict[sample] = this_color_dict[value]); + } + return trait_color_dict; + }; + + return Bar_Chart; + + })(); + + root.Bar_Chart = Bar_Chart; + +}).call(this); |