aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorArtem Tarasov2015-05-08 12:59:38 +0300
committerArtem Tarasov2015-05-08 12:59:38 +0300
commitbf860dd3c6e2c8d32e9d40ae129e33613151fab5 (patch)
tree05175d07af9116bdecc1e4a3b814626fdea7c26c
parentb425b47d92b3acf5ef864805b0234c624fb8cf31 (diff)
downloadgenenetwork2-bf860dd3c6e2c8d32e9d40ae129e33613151fab5.tar.gz
Fix #29
The number of bins was set to 20 for all datasets. Changed the number to be sqrt(#samples) as suggested on Wikipedia.
-rwxr-xr-xwqflask/wqflask/static/new/javascript/histogram.coffee5
-rwxr-xr-xwqflask/wqflask/static/new/javascript/histogram.js223
2 files changed, 117 insertions, 111 deletions
diff --git a/wqflask/wqflask/static/new/javascript/histogram.coffee b/wqflask/wqflask/static/new/javascript/histogram.coffee
index 98f89ac6..7adb53f9 100755
--- a/wqflask/wqflask/static/new/javascript/histogram.coffee
+++ b/wqflask/wqflask/static/new/javascript/histogram.coffee
@@ -53,8 +53,9 @@ class Histogram
get_histogram_data: () ->
console.log("sample_vals:", @sample_vals)
+ n_bins = sqrt(@sample_vals.length)
@histogram_data = d3.layout.histogram()
- .bins(@x_scale.ticks(20))(@sample_vals)
+ .bins(@x_scale.ticks(n_bins))(@sample_vals)
console.log("histogram_data:", @histogram_data[0])
create_y_scale: () ->
@@ -131,4 +132,4 @@ class Histogram
return @format_count(d.y)
)
-root.Histogram = Histogram \ No newline at end of file
+root.Histogram = Histogram
diff --git a/wqflask/wqflask/static/new/javascript/histogram.js b/wqflask/wqflask/static/new/javascript/histogram.js
index 561a3068..3ab5eefa 100755
--- a/wqflask/wqflask/static/new/javascript/histogram.js
+++ b/wqflask/wqflask/static/new/javascript/histogram.js
@@ -1,124 +1,129 @@
-// Generated by CoffeeScript 1.8.0
-var Histogram, root;
+// Generated by CoffeeScript 1.9.2
+(function() {
+ var Histogram, root;
-root = typeof exports !== "undefined" && exports !== null ? exports : this;
+ root = typeof exports !== "undefined" && exports !== null ? exports : this;
-Histogram = (function() {
- function Histogram(sample_list, sample_group) {
- this.sample_list = sample_list;
- 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,
- bottom: 30,
- left: 30
- };
- this.plot_width = 960 - 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.plot_height -= this.y_buffer;
- this.create_x_scale();
- this.get_histogram_data();
- this.create_y_scale();
- this.svg = this.create_svg();
- this.create_graph();
- }
+ Histogram = (function() {
+ function Histogram(sample_list, sample_group) {
+ this.sample_list = sample_list;
+ 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,
+ bottom: 30,
+ left: 30
+ };
+ this.plot_width = 960 - 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.plot_height -= this.y_buffer;
+ this.create_x_scale();
+ this.get_histogram_data();
+ this.create_y_scale();
+ this.svg = this.create_svg();
+ this.create_graph();
+ }
- Histogram.prototype.get_sample_vals = function() {
- var sample;
- return 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);
+ Histogram.prototype.get_sample_vals = function() {
+ var sample;
+ return 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);
- };
+ return results;
+ }).call(this);
+ };
- Histogram.prototype.create_svg = function() {
- var svg;
- svg = d3.select("#histogram").append("svg").attr("class", "histogram").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_svg = function() {
+ var svg;
+ svg = d3.select("#histogram").append("svg").attr("class", "histogram").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_x_scale = function() {
+ var x0;
+ console.log("min/max:", d3.min(this.sample_vals) + "," + d3.max(this.sample_vals));
+ x0 = Math.max(-d3.min(this.sample_vals), d3.max(this.sample_vals));
+ return this.x_scale = d3.scale.linear().domain([d3.min(this.sample_vals), d3.max(this.sample_vals)]).range([0, this.plot_width]).nice();
+ };
- Histogram.prototype.create_x_scale = function() {
- var x0;
- console.log("min/max:", d3.min(this.sample_vals) + "," + d3.max(this.sample_vals));
- x0 = Math.max(-d3.min(this.sample_vals), d3.max(this.sample_vals));
- return this.x_scale = d3.scale.linear().domain([d3.min(this.sample_vals), d3.max(this.sample_vals)]).range([0, this.plot_width]).nice();
- };
+ Histogram.prototype.get_histogram_data = function() {
+ var n_bins;
+ console.log("sample_vals:", this.sample_vals);
+ n_bins = Math.sqrt(this.sample_vals.length);
+ this.histogram_data = d3.layout.histogram().bins(this.x_scale.ticks(n_bins))(this.sample_vals);
+ return console.log("histogram_data:", this.histogram_data[0]);
+ };
- Histogram.prototype.get_histogram_data = function() {
- console.log("sample_vals:", this.sample_vals);
- this.histogram_data = d3.layout.histogram().bins(this.x_scale.ticks(20))(this.sample_vals);
- return console.log("histogram_data:", this.histogram_data[0]);
- };
+ Histogram.prototype.create_y_scale = function() {
+ return this.y_scale = d3.scale.linear().domain([
+ 0, d3.max(this.histogram_data, (function(_this) {
+ return function(d) {
+ return d.y;
+ };
+ })(this))
+ ]).range([this.plot_height, 0]);
+ };
- Histogram.prototype.create_y_scale = function() {
- return this.y_scale = d3.scale.linear().domain([
- 0, d3.max(this.histogram_data, (function(_this) {
- return function(d) {
- return d.y;
- };
- })(this))
- ]).range([this.plot_height, 0]);
- };
+ Histogram.prototype.create_graph = function() {
+ this.add_x_axis();
+ this.add_y_axis();
+ return this.add_bars();
+ };
- Histogram.prototype.create_graph = function() {
- this.add_x_axis();
- this.add_y_axis();
- return this.add_bars();
- };
+ Histogram.prototype.add_x_axis = function() {
+ var x_axis;
+ x_axis = d3.svg.axis().scale(this.x_scale).orient("bottom");
+ return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(x_axis);
+ };
- Histogram.prototype.add_x_axis = function() {
- var x_axis;
- x_axis = d3.svg.axis().scale(this.x_scale).orient("bottom");
- return this.svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.plot_height + ")").call(x_axis);
- };
+ 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_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 bar;
+ 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) {
+ 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 function(d) {
+ var bar_height;
+ bar_height = _this.plot_height - _this.y_scale(d.y);
+ if (bar_height > 20) {
+ return _this.format_count(d.y);
+ }
+ };
+ })(this));
+ };
- Histogram.prototype.add_bars = function() {
- var bar;
- 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) {
- 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 function(d) {
- var bar_height;
- bar_height = _this.plot_height - _this.y_scale(d.y);
- if (bar_height > 20) {
- return _this.format_count(d.y);
- }
- };
- })(this));
- };
+ return Histogram;
- return Histogram;
+ })();
-})();
+ root.Histogram = Histogram;
-root.Histogram = Histogram;
+}).call(this);