aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
authorArtem Tarasov2015-05-08 14:15:50 +0300
committerArtem Tarasov2015-05-08 14:15:50 +0300
commit4e6c08c51dbd2c4ec3cdf92e10f24c3987675bf8 (patch)
tree85c938f7110a5875b22c657fba9330dcd38f0106 /wqflask
parent22903fc679e4dbbd820b2849703d6f41950483b3 (diff)
downloadgenenetwork2-4e6c08c51dbd2c4ec3cdf92e10f24c3987675bf8.tar.gz
fix histogram bin width
It was calculated wrongly when bins began from a non-zero value
Diffstat (limited to 'wqflask')
-rwxr-xr-xwqflask/wqflask/static/new/javascript/histogram.coffee22
-rwxr-xr-xwqflask/wqflask/static/new/javascript/histogram.js35
2 files changed, 34 insertions, 23 deletions
diff --git a/wqflask/wqflask/static/new/javascript/histogram.coffee b/wqflask/wqflask/static/new/javascript/histogram.coffee
index 879c0fb8..b27a389e 100755
--- a/wqflask/wqflask/static/new/javascript/histogram.coffee
+++ b/wqflask/wqflask/static/new/javascript/histogram.coffee
@@ -4,7 +4,6 @@ class Histogram
constructor: (@sample_list, @sample_group) ->
@sort_by = "name"
@format_count = d3.format(",.0f") #a formatter for counts
- @get_sample_vals()
@margin = {top: 10, right: 30, bottom: 30, left: 30}
@plot_width = 960 - @margin.left - @margin.right
@@ -12,21 +11,25 @@ class Histogram
@x_buffer = @plot_width/20
@y_buffer = @plot_height/20
+ @plot_height -= @y_buffer
+
+ @redraw(@sample_list)
+ redraw: (sample_list) ->
+ @get_sample_vals(sample_list)
@y_min = d3.min(@sample_vals)
@y_max = d3.max(@sample_vals) * 1.1
-
- @plot_height -= @y_buffer
+
@create_x_scale()
@get_histogram_data()
@create_y_scale()
+ $("#histogram").empty()
@svg = @create_svg()
-
@create_graph()
- get_sample_vals: () ->
- @sample_vals = (sample.value for sample in @sample_list when sample.value != null)
+ get_sample_vals: (sample_list) ->
+ @sample_vals = (sample.value for sample in sample_list when sample.value != null)
create_svg: () ->
svg = d3.select("#histogram")
@@ -113,17 +116,20 @@ class Histogram
.attr("class", "bar")
.attr("transform", (d) =>
return "translate(" + @x_scale(d.x) + "," + @y_scale(d.y) + ")")
+
+ rect_width = @x_scale(@histogram_data[0].x + @histogram_data[0].dx) -
+ @x_scale(@histogram_data[0].x)
bar.append("rect")
.attr("x", 1)
- .attr("width", @x_scale(@histogram_data[0].x + @histogram_data[0].dx) - 1)
+ .attr("width", rect_width - 1)
.attr("height", (d) =>
return @plot_height - @y_scale(d.y)
)
bar.append("text")
.attr("dy", ".75em")
.attr("y", 6)
- .attr("x", @x_scale(@histogram_data[0].dx)/2)
+ .attr("x", rect_width / 2)
.attr("text-anchor", "middle")
.style("fill", "#fff")
.text((d) =>
diff --git a/wqflask/wqflask/static/new/javascript/histogram.js b/wqflask/wqflask/static/new/javascript/histogram.js
index 3ab5eefa..94144661 100755
--- a/wqflask/wqflask/static/new/javascript/histogram.js
+++ b/wqflask/wqflask/static/new/javascript/histogram.js
@@ -5,12 +5,11 @@
root = typeof exports !== "undefined" && exports !== null ? exports : this;
Histogram = (function() {
- function Histogram(sample_list, sample_group) {
- this.sample_list = sample_list;
+ function Histogram(sample_list1, sample_group) {
+ this.sample_list = sample_list1;
this.sample_group = sample_group;
this.sort_by = "name";
this.format_count = d3.format(",.0f");
- this.get_sample_vals();
this.margin = {
top: 10,
right: 30,
@@ -21,30 +20,35 @@
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.plot_height -= this.y_buffer;
+ this.redraw(this.sample_list);
+ }
+
+ Histogram.prototype.redraw = function(sample_list) {
+ this.get_sample_vals(sample_list);
this.y_min = d3.min(this.sample_vals);
this.y_max = d3.max(this.sample_vals) * 1.1;
- this.plot_height -= this.y_buffer;
this.create_x_scale();
this.get_histogram_data();
this.create_y_scale();
+ $("#histogram").empty();
this.svg = this.create_svg();
- this.create_graph();
- }
+ return this.create_graph();
+ };
- Histogram.prototype.get_sample_vals = function() {
+ Histogram.prototype.get_sample_vals = function(sample_list) {
var sample;
return this.sample_vals = (function() {
- var i, len, ref, results;
- ref = this.sample_list;
+ var i, len, results;
results = [];
- for (i = 0, len = ref.length; i < len; i++) {
- sample = ref[i];
+ for (i = 0, len = sample_list.length; i < len; i++) {
+ sample = sample_list[i];
if (sample.value !== null) {
results.push(sample.value);
}
}
return results;
- }).call(this);
+ })();
};
Histogram.prototype.create_svg = function() {
@@ -97,19 +101,20 @@
};
Histogram.prototype.add_bars = function() {
- var bar;
+ var bar, rect_width;
console.log("bar_width:", this.x_scale(this.histogram_data[0].dx));
bar = this.svg.selectAll(".bar").data(this.histogram_data).enter().append("g").attr("class", "bar").attr("transform", (function(_this) {
return function(d) {
return "translate(" + _this.x_scale(d.x) + "," + _this.y_scale(d.y) + ")";
};
})(this));
- bar.append("rect").attr("x", 1).attr("width", this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - 1).attr("height", (function(_this) {
+ rect_width = this.x_scale(this.histogram_data[0].x + this.histogram_data[0].dx) - this.x_scale(this.histogram_data[0].x);
+ bar.append("rect").attr("x", 1).attr("width", rect_width - 1).attr("height", (function(_this) {
return function(d) {
return _this.plot_height - _this.y_scale(d.y);
};
})(this));
- return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", this.x_scale(this.histogram_data[0].dx) / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) {
+ return bar.append("text").attr("dy", ".75em").attr("y", 6).attr("x", rect_width / 2).attr("text-anchor", "middle").style("fill", "#fff").text((function(_this) {
return function(d) {
var bar_height;
bar_height = _this.plot_height - _this.y_scale(d.y);