Can change the parameters of Sample Correlation Scatterplot

4 files changed, 165 insertions, 23 deletions

diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py
index 13022b44..dd98c7d5 100644
--- a/wqflask/wqflask/correlation/corr_scatter_plot.py
+++ b/wqflask/wqflask/correlation/corr_scatter_plot.py
@@ -3,6 +3,8 @@ from __future__ import absolute_import, print_function, division
 from base.trait import GeneralTrait
 from base import data_set
 from utility import corr_result_helpers
+from scipy import stats
+import numpy as np
 
 class CorrScatterPlot(object):
 
@@ -11,14 +13,69 @@ class CorrScatterPlot(object):
         self.data_set_2 = data_set.create_dataset(params['dataset_2'])
         self.trait_1 = GeneralTrait(name=params['trait_1'], dataset=self.data_set_1)
         self.trait_2 = GeneralTrait(name=params['trait_2'], dataset=self.data_set_2)
+        
+        try:
+            width = int(params['width'])
+        except:
+            width = 800
+        self.width = width
+        
+        try:
+            height = int(params['height'])
+        except:
+            height = 600
+        self.height = height
+        
+        try:
+            circle_color = params['circle_color']
+        except:
+            circle_color = 'steelblue'
+        self.circle_color = circle_color
+        
+        try:
+            circle_radius = int(params['circle_radius'])
+        except:
+            circle_radius = 5
+        self.circle_radius = circle_radius
+        
+        try:
+            line_color = params['line_color']
+        except:
+            line_color = 'red'
+        self.line_color = line_color
+        
+        try:
+            line_width = int(params['line_width'])
+        except:
+            line_width = 1
+        self.line_width = line_width
+        
+        samples_1, samples_2, num_overlap = corr_result_helpers.normalize_values_with_samples(self.trait_1.data, self.trait_2.data)
         vals_1 = []
-        for sample in self.trait_1.data.keys():
-            vals_1.append(self.trait_1.data[sample].value)
+        for sample in samples_1.keys():
+            vals_1.append(samples_1[sample].value)
         vals_2 = []
-        for sample in self.trait_2.data.keys():
-            vals_2.append(self.trait_2.data[sample].value)
-        samples_1, samples_2, num_overlap = corr_result_helpers.normalize_values_with_samples(self.trait_1.data, self.trait_2.data)
+        for sample in samples_2.keys():
+            vals_2.append(samples_2[sample].value)
+        x = np.array(vals_1)
+        y = np.array(vals_2)
+        slope, intercept, r_value, p_value, std_err = stats.linregress(x, y)
         self.js_data = dict(
+            trait_1 = self.trait_1.dataset.name + ": " + self.trait_1.name,
+            trait_2 = self.trait_2.dataset.name + ": " + self.trait_2.name,
             samples_1 = samples_1,
-            samples_2 = samples_2
-        )
\ No newline at end of file
+            samples_2 = samples_2,
+            num_overlap = num_overlap,
+            vals_1 = vals_1,
+            vals_2 = vals_2,
+            slope = slope,
+            intercept = intercept,
+            r_value = r_value,
+            p_value = p_value,
+            width = width,
+            height = height,
+            circle_color = circle_color,
+            circle_radius = circle_radius,
+            line_color = line_color,
+            line_width = line_width
+        )
diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot.css b/wqflask/wqflask/static/new/css/corr_scatter_plot.css
index 602c7297..c62d4c9a 100644
--- a/wqflask/wqflask/static/new/css/corr_scatter_plot.css
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot.css
@@ -11,7 +11,3 @@
     stroke: black;
     fill: none;
 }
-
-circle {
-    fill: steelblue;
-}
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js
index 180e6240..26132492 100644
--- a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js
+++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js
@@ -5,21 +5,25 @@ i = 0;
 for (var samplename in samples_1){
 	sample1 = samples_1[samplename];
 	sample2 = samples_2[samplename];
-	data[i] = [sample1.value, sample2.value];
-	i++;
+	data[i++] = [sample1.value, sample2.value];
 }
    
-    var margin = {top: 20, right: 15, bottom: 60, left: 60}
-      , width = 800 - margin.left - margin.right
-      , height = 600 - margin.top - margin.bottom;
+    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([d3.min(data, function(d){return d[0];})*0.95, d3.max(data, function(d) { return d[0]; })*1.05])
-              .range([ 0, width ]);
+              .domain([minx, maxx])
+              .range([0, width]);
     
     var y = d3.scale.linear()
-    	      .domain([d3.min(data, function(d){return d[1];})*0.95, d3.max(data, function(d) { return d[1]; })*1.05])
-    	      .range([ height, 0 ]);
+    	      .domain([miny, maxy])
+    	      .range([height, 0]);
  
     var chart = d3.select('#scatter_plot')
 	.append('svg:svg')
@@ -54,10 +58,58 @@ for (var samplename in samples_1){
 	.call(yAxis);
 
     var g = main.append("svg:g"); 
-    
+	
     g.selectAll("scatter-dots")
       .data(data)
       .enter().append("svg:circle")
-          .attr("cx", function (d,i) { return x(d[0]); } )
+          .attr("cx", function (d) { return x(d[0]); } )
           .attr("cy", function (d) { return y(d[1]); } )
-          .attr("r", 6);
\ No newline at end of file
+		  .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/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html
index b25110d7..dd9168a8 100644
--- a/wqflask/wqflask/templates/corr_scatter_plot.html
+++ b/wqflask/wqflask/templates/corr_scatter_plot.html
@@ -9,6 +9,43 @@
 {% endblock %}
 
 {% block content %}
+<form action="" method="get">
+<input type="hidden" name="dataset_1" value="{{data_set_1.name}}">
+<input type="hidden" name="dataset_2" value="{{data_set_2.name}}">
+<input type="hidden" name="trait_1" value="{{trait_1.name}}">
+<input type="hidden" name="trait_2" value="{{trait_2.name}}">
+<table class="table" style="width: auto;">
+    <tr>
+		<td>Canvas Width</td>
+		<td>Canvas Height</td>
+		<td>Circle Color</td>
+		<td>Circle Radius</td>
+        <td>Line Color</td>
+		<td>Line Width</td>
+        <td rowspan="2" style="vertical-align:middle;"><button type="submit" class="btn btn-primary"><i class="icon-refresh"></i>Redraw</button></td>
+    </tr>
+    <tr>
+		<td><input type="text" name="width" value="{{width}}" style="width: 100px;"></td>
+		<td><input type="text" name="height" value="{{height}}" style="width: 100px;"></td>
+        <td>
+            <select name="circle_color" style="width: 100px;">
+                <option value="red">Red</option>
+                <option value="green">Green</option>
+                <option value="blue">Blue</option>
+            </select>
+        </td>
+		<td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></td>
+        <td>
+            <select name="line_color" style="width: 100px;">
+                <option value="red">Red</option>
+                <option value="green">Green</option>
+                <option value="blue">Blue</option>
+            </select>
+        </td>
+		<td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td>
+    </tr>
+</table>
+</form>
 <div id='scatter_plot'></div>
 {% endblock %}