From 4e6c08c51dbd2c4ec3cdf92e10f24c3987675bf8 Mon Sep 17 00:00:00 2001 From: Artem Tarasov Date: Fri, 8 May 2015 14:15:50 +0300 Subject: fix histogram bin width It was calculated wrongly when bins began from a non-zero value --- .../wqflask/static/new/javascript/histogram.coffee | 22 +++++++++----- wqflask/wqflask/static/new/javascript/histogram.js | 35 ++++++++++++---------- 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); -- cgit v1.2.3