aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee61
-rw-r--r--wqflask/wqflask/static/new/javascript/corr_scatter_plot.js215
2 files changed, 161 insertions, 115 deletions
diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee
new file mode 100644
index 00000000..92a5c600
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee
@@ -0,0 +1,61 @@
+data = new Array()
+samples_1 = js_data.samples_1
+samples_2 = js_data.samples_2
+i = 0
+for samplename of samples_1
+ sample1 = samples_1[samplename]
+ sample2 = samples_2[samplename]
+ data[i++] = [sample1.value, sample2.value]
+margin =
+ top: 100
+ right: 15
+ bottom: 60
+ left: 60
+
+width = js_data.width - margin.left - margin.right
+height = js_data.height - margin.top - margin.bottom
+minx = d3.min(data, (d) ->
+ d[0]
+) * 0.95
+maxx = d3.max(data, (d) ->
+ d[0]
+) * 1.05
+miny = d3.min(data, (d) ->
+ d[1]
+) * 0.95
+maxy = d3.max(data, (d) ->
+ d[1]
+) * 1.05
+x = d3.scale.linear().domain([minx, maxx]).range([0, width])
+y = d3.scale.linear().domain([miny, maxy]).range([height, 0])
+chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart")
+main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main")
+
+# draw the x axis
+xAxis = d3.svg.axis().scale(x).orient("bottom")
+main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call xAxis
+
+# draw the y axis
+yAxis = d3.svg.axis().scale(y).orient("left")
+main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call yAxis
+g = main.append("svg:g")
+g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", (d) ->
+ x d[0]
+).attr("cy", (d) ->
+ y d[1]
+).attr("fill", js_data.circle_color).attr "r", js_data.circle_radius
+main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style "stroke-width", js_data.line_width
+chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text "Sample Correlation Scatterplot"
+text = ""
+text += "N=" + js_data.num_overlap
+chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text text
+text = ""
+text += "r=" + js_data.r_value + "\t"
+text += "p(r)=" + js_data.p_value
+chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text text
+text = ""
+text += "slope=" + js_data.slope + "\t"
+text += "intercept=" + js_data.intercept
+chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text text
+chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text js_data.trait_1
+chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text js_data.trait_2
diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js
index 26132492..4b34a09b 100644
--- a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js
+++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js
@@ -1,115 +1,100 @@
-var data = new Array();
-samples_1 = js_data.samples_1;
-samples_2 = js_data.samples_2;
-i = 0;
-for (var samplename in samples_1){
- sample1 = samples_1[samplename];
- sample2 = samples_2[samplename];
- data[i++] = [sample1.value, sample2.value];
-}
-
- var margin = {top: 100, right: 15, bottom: 60, left: 60};
- var width = js_data.width - margin.left - margin.right;
- var height = js_data.height - margin.top - margin.bottom;
-
- minx = d3.min(data, function(d){return d[0];})*0.95;
- maxx = d3.max(data, function(d){return d[0];})*1.05;
- miny = d3.min(data, function(d){return d[1];})*0.95;
- maxy = d3.max(data, function(d){return d[1];})*1.05;
-
- var x = d3.scale.linear()
- .domain([minx, maxx])
- .range([0, width]);
-
- var y = d3.scale.linear()
- .domain([miny, maxy])
- .range([height, 0]);
-
- var chart = d3.select('#scatter_plot')
- .append('svg:svg')
- .attr('width', width + margin.right + margin.left)
- .attr('height', height + margin.top + margin.bottom)
- .attr('class', 'chart')
-
- var main = chart.append('g')
- .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
- .attr('width', width)
- .attr('height', height)
- .attr('class', 'main')
-
- // draw the x axis
- var xAxis = d3.svg.axis()
- .scale(x)
- .orient('bottom');
-
- main.append('g')
- .attr('transform', 'translate(0,' + height + ')')
- .attr('class', 'main axis date')
- .call(xAxis);
-
- // draw the y axis
- var yAxis = d3.svg.axis()
- .scale(y)
- .orient('left');
-
- main.append('g')
- .attr('transform', 'translate(0,0)')
- .attr('class', 'main axis date')
- .call(yAxis);
-
- var g = main.append("svg:g");
-
- g.selectAll("scatter-dots")
- .data(data)
- .enter().append("svg:circle")
- .attr("cx", function (d) { return x(d[0]); } )
- .attr("cy", function (d) { return y(d[1]); } )
- .attr("fill", js_data.circle_color)
- .attr("r", js_data.circle_radius);
-
- main.append('line')
- .attr('x1', x(minx))
- .attr('y1', y(js_data.slope*minx+js_data.intercept))
- .attr('x2', x(maxx*0.995))
- .attr('y2', y(js_data.slope*maxx*0.995+js_data.intercept))
- .style('stroke', js_data.line_color)
- .style('stroke-width', js_data.line_width);
-
- chart.append("text")
- .attr("x", width/2)
- .attr("y", margin.top/2-25)
- .text("Sample Correlation Scatterplot");
-
- text = "";
- text += "N=" + js_data.num_overlap;
- chart.append("text")
- .attr("x", margin.left)
- .attr("y", margin.top/2-5)
- .text(text);
-
- text = "";
- text += "r=" + js_data.r_value + "\t";
- text += "p(r)=" + js_data.p_value;
- chart.append("text")
- .attr("x", margin.left)
- .attr("y", margin.top/2+15)
- .text(text);
-
- text = "";
- text += "slope=" + js_data.slope + "\t";
- text += "intercept=" + js_data.intercept;
- chart.append("text")
- .attr("x", margin.left)
- .attr("y", margin.top/2+35)
- .text(text);
-
- chart.append("text")
- .attr("x", width/2)
- .attr("y", height+margin.top+35)
- .text(js_data.trait_1);
-
- chart.append("text")
- .attr("x", 20)
- .attr("y", height/2+margin.top+30)
- .attr('transform', 'rotate(-90 20,' + (height/2+margin.top+30) + ')')
- .text(js_data.trait_2);
+// Generated by CoffeeScript 1.6.1
+(function() {
+ var chart, data, g, height, i, main, margin, maxx, maxy, minx, miny, sample1, sample2, samplename, samples_1, samples_2, text, width, x, xAxis, y, yAxis;
+
+ data = new Array();
+
+ samples_1 = js_data.samples_1;
+
+ samples_2 = js_data.samples_2;
+
+ i = 0;
+
+ for (samplename in samples_1) {
+ sample1 = samples_1[samplename];
+ sample2 = samples_2[samplename];
+ data[i++] = [sample1.value, sample2.value];
+ }
+
+ margin = {
+ top: 100,
+ right: 15,
+ bottom: 60,
+ left: 60
+ };
+
+ width = js_data.width - margin.left - margin.right;
+
+ height = js_data.height - margin.top - margin.bottom;
+
+ minx = d3.min(data, function(d) {
+ return d[0];
+ }) * 0.95;
+
+ maxx = d3.max(data, function(d) {
+ return d[0];
+ }) * 1.05;
+
+ miny = d3.min(data, function(d) {
+ return d[1];
+ }) * 0.95;
+
+ maxy = d3.max(data, function(d) {
+ return d[1];
+ }) * 1.05;
+
+ x = d3.scale.linear().domain([minx, maxx]).range([0, width]);
+
+ y = d3.scale.linear().domain([miny, maxy]).range([height, 0]);
+
+ chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart");
+
+ main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main");
+
+ xAxis = d3.svg.axis().scale(x).orient("bottom");
+
+ main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call(xAxis);
+
+ yAxis = d3.svg.axis().scale(y).orient("left");
+
+ main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call(yAxis);
+
+ g = main.append("svg:g");
+
+ g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", function(d) {
+ return x(d[0]);
+ }).attr("cy", function(d) {
+ return y(d[1]);
+ }).attr("fill", js_data.circle_color).attr("r", js_data.circle_radius);
+
+ main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style("stroke-width", js_data.line_width);
+
+ chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text("Sample Correlation Scatterplot");
+
+ text = "";
+
+ text += "N=" + js_data.num_overlap;
+
+ chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text(text);
+
+ text = "";
+
+ text += "r=" + js_data.r_value + "\t";
+
+ text += "p(r)=" + js_data.p_value;
+
+ chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text(text);
+
+ text = "";
+
+ text += "slope=" + js_data.slope + "\t";
+
+ text += "intercept=" + js_data.intercept;
+
+ chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text(text);
+
+ chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text(js_data.trait_1);
+
+ chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text(js_data.trait_2);
+
+}).call(this);
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-24 00:35:44 +0000