Add Correlation Scatter plot

6 files changed, 108 insertions, 10 deletions

diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py
index dd4e439a..13022b44 100644
--- a/wqflask/wqflask/correlation/corr_scatter_plot.py
+++ b/wqflask/wqflask/correlation/corr_scatter_plot.py
@@ -7,25 +7,18 @@ from utility import corr_result_helpers
 class CorrScatterPlot(object):
 
     def __init__(self, params):
-        print("params  are:", params)
         self.data_set_1 = data_set.create_dataset(params['dataset_1'])
         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)
-        
         vals_1 = []
         for sample in self.trait_1.data.keys():
             vals_1.append(self.trait_1.data[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)
-        
+        samples_1, samples_2, num_overlap = corr_result_helpers.normalize_values_with_samples(self.trait_1.data, self.trait_2.data)
         self.js_data = dict(
             samples_1 = samples_1,
             samples_2 = samples_2
-        )
-        
-        print("Self.js_data:", self.js_data)
\ No newline at end of file
+        )
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot.css b/wqflask/wqflask/static/new/css/corr_scatter_plot.css
new file mode 100644
index 00000000..602c7297
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot.css
@@ -0,0 +1,17 @@
+.chart {
+
+}
+
+.main text {
+    font: 10px sans-serif;	
+}
+
+.axis line, .axis path {
+    shape-rendering: crispEdges;
+    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
new file mode 100644
index 00000000..180e6240
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js
@@ -0,0 +1,63 @@
+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];
+	i++;
+}
+   
+    var margin = {top: 20, right: 15, bottom: 60, left: 60}
+      , width = 800 - margin.left - margin.right
+      , height = 600 - margin.top - margin.bottom;
+    
+    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 ]);
+    
+    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 ]);
+ 
+    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,i) { return x(d[0]); } )
+          .attr("cy", function (d) { return y(d[1]); } )
+          .attr("r", 6);
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html
new file mode 100644
index 00000000..b25110d7
--- /dev/null
+++ b/wqflask/wqflask/templates/corr_scatter_plot.html
@@ -0,0 +1,22 @@
+{% extends "base.html" %}
+
+{% block css %}
+    <link rel="stylesheet" type="text/css" href="/static/packages/jqplot/jquery.jqplot.min.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" />
+    <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
+    <link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot.css" />
+{% endblock %}
+
+{% block content %}
+<div id='scatter_plot'></div>
+{% endblock %}
+
+{% block js %}
+    <script>
+       js_data = {{ js_data | safe }}
+    </script>
+    <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
+    <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script>
+	<script language="javascript" type="text/javascript" src="/static/new/javascript/corr_scatter_plot.js"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html
index f3bb5531..3f6b7936 100644
--- a/wqflask/wqflask/templates/correlation_page.html
+++ b/wqflask/wqflask/templates/correlation_page.html
@@ -48,7 +48,7 @@
                 <td>{{'%0.3f'|format(trait.mean)}}</td>
                 <td>{{'%0.3f'|format(trait.lrs)}}</td>
                 <td>Chr{{ trait.locus_chr }}:{{'%0.6f'|format(trait.locus_mb)}}</td>
-                <td><a href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}&">{{'%0.3f'|format(trait.sample_r)}}</a></td>
+                <td><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td>
                 <td>{{ trait.num_overlap }}</td>
                 <td>{{'%0.3e'|format(trait.sample_p)}}</td>
                 <td>{{'%0.3f'|format(trait.lit_corr)}}</td>
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index 4cf540f6..ce213c93 100644
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -302,6 +302,9 @@ def corr_compute_page():
 @app.route("/corr_scatter_plot")
 def corr_scatter_plot_page():
     template_vars = corr_scatter_plot.CorrScatterPlot(request.args)
+    template_vars.js_data = json.dumps(template_vars.js_data,
+                                       default=json_default_handler,
+                                       indent="   ")
     return render_template("corr_scatter_plot.html", **template_vars.__dict__)
 
 @app.route("/int_mapping", methods=('POST',))