Update corr scatterplot

3 files changed, 315 insertions, 72 deletions

diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py
index 6a92c501..a08cd759 100644
--- a/wqflask/wqflask/correlation/corr_scatter_plot.py
+++ b/wqflask/wqflask/correlation/corr_scatter_plot.py
@@ -67,9 +67,17 @@ class CorrScatterPlot(object):
         x = np.array(vals_1)
         y = np.array(vals_2)
         slope, intercept, r_value, p_value, std_err = stats.linregress(x, y)
+        
+        rx = stats.rankdata(x)
+        ry = stats.rankdata(y)        
+        self.rdata = []
+        self.rdata.append(rx.tolist())
+        self.rdata.append(ry.tolist())        
+        srslope, srintercept, srr_value, srp_value, srstd_err = stats.linregress(rx, ry)
 
         self.js_data = dict(
             data = self.data,
+            rdata = self.rdata,
             indIDs = self.indIDs,
             trait_1 = self.trait_1.dataset.name + ": " + str(self.trait_1.name),
             trait_2 = self.trait_2.dataset.name + ": " + str(self.trait_2.name),
@@ -78,10 +86,17 @@ class CorrScatterPlot(object):
             num_overlap = num_overlap,
             vals_1 = vals_1,
             vals_2 = vals_2,
+            
             slope = slope,
             intercept = intercept,
             r_value = r_value,
             p_value = p_value,
+            
+            srslope = srslope,
+            srintercept = srintercept,
+            srr_value = srr_value,
+            srp_value = srp_value,
+            
             width = width,
             height = height,
             circle_color = circle_color,
diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js
new file mode 100644
index 00000000..08ddc825
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js
@@ -0,0 +1,133 @@
+var srchart;
+
+function srdrawg () {
+    //
+    srchart = nv.models.scatterChart();
+    //
+    srchart.showLegend(false);
+    srchart.duration(300);
+    srchart.color(d3.scale.category10().range());
+    srchart.pointRange([0, 400]);
+    srchart.pointDomain([0, 10]);
+    //
+    srchart.xAxis.axisLabel(js_data.trait_1);
+    srchart.xAxis.axisLabelDistance(11);
+    srchart.yAxis.axisLabel(js_data.trait_2);
+    srchart.yAxis.axisLabelDistance(11);
+    //
+    xmin = d3.min(js_data.rdata[0]);
+    xmax = d3.max(js_data.rdata[0]);
+    xrange = xmax - xmin;
+    ymin = d3.min(js_data.rdata[1]);
+    ymax = d3.max(js_data.rdata[1]);
+    yrange = ymax - ymin;
+    srchart.xDomain([xmin - xrange/10, xmax + xrange/10]);
+    srchart.yDomain([ymin - yrange/10, ymax + yrange/10]);
+    srchart.xAxis.tickFormat(d3.format(srcheckformat(xrange)));
+    srchart.yAxis.tickFormat(d3.format(srcheckformat(yrange)));
+    //
+    srchart.tooltip.contentGenerator(function (obj) {
+        // return '<b style="font-size: 18px">(' + obj.point.x + ', ' + obj.point.y + ')</b>';
+        return '<b style="font-size: 18px">' + obj.point.name + '</b>';
+    });
+}
+
+function srgetdata(size, shape) {
+    var data = [];
+    data.push({
+            values: [],
+            slope: js_data.srslope,
+            intercept: js_data.srintercept
+        });
+    for (j = 0; j < js_data.rdata[0].length; j++) {
+        data[0].values.push({
+            x: js_data.rdata[0][j],
+            y: js_data.rdata[1][j],
+            name: js_data.indIDs[j],
+            size: size,
+            shape: shape
+        });
+    }
+    return data;
+}
+    
+function srcheckformat(range) {
+    cell = range / 10.0;
+    if (cell >= 1) {
+        return ",r";
+    } else {
+        cell = -Math.log(cell);
+        n = cell.toString().split(".")[0].length;
+        return ",.0" + n + "f";
+    }
+}
+
+function srchartupdate() {
+    //
+    var axisxcolor = $("#axisxcolor").val();
+    $(".nvd3 .nv-axis.nv-x text").css("fill", axisxcolor);
+    //
+    var axisycolor = $("#axisycolor").val();
+    $(".nvd3 .nv-axis.nv-y text").css("fill", axisycolor);
+    //
+    var axisxfont = $("#axisxfont").val();
+    $(".nvd3 .nv-axis.nv-x text").css("font-size", axisxfont);
+    //
+    var axisyfont = $("#axisyfont").val();
+    $(".nvd3 .nv-axis.nv-y text").css("font-size", axisyfont);
+    //
+    var domainxcolor = $("#domainxcolor").val();
+    $(".nv-x .nv-axis g path.domain").css("stroke", domainxcolor);
+    //
+    var domainycolor = $("#domainycolor").val();
+    $(".nv-y .nv-axis g path.domain").css("stroke", domainycolor);
+    //
+    var domainxwidth = $("#domainxwidth").val();
+    $(".nv-x .nv-axis g path.domain").css("stroke-width", domainxwidth);
+    //
+    var domainywidth = $("#domainywidth").val();
+    $(".nv-y .nv-axis g path.domain").css("stroke-width", domainywidth);
+    //
+    var clinecolor = $("#clinecolor").val();
+    $("line.nv-regLine").css("stroke", clinecolor);
+    //
+    var clinewidth = $("#clinewidth").val();
+    $("line.nv-regLine").css("stroke-width", clinewidth);
+}
+
+function srchartupdatewh() {
+    //
+    var width = $("#srwidth").val();
+    $("#srscatterplot2 svg").css("width", width);
+    //
+    var height = $("#srheight").val();
+    $("#srscatterplot2 svg").css("height", height);
+    //
+    window.dispatchEvent(new Event('resize'));
+}
+
+function srchartupdatedata() {
+    //
+    var size = $("#srmarksize").val();
+    var shape = $("#srmarkshape").val();
+    //
+    d3.select('#srscatterplot2 svg').datum(nv.log(srgetdata(size, shape))).call(srchart);
+    nv.utils.windowResize(srchart.update);
+}
+
+srdrawg();
+srchartupdate();
+srchartupdatewh();
+srchartupdatedata();
+
+$(".srchartupdate").change(function () {
+    srchartupdate();
+});
+
+$(".srchartupdatewh").change(function () {
+    srchartupdatewh();
+});
+
+$(".srchartupdatedata").change(function () {
+    srchartupdatedata();
+});
diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html
index 47b83018..fc9925e7 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -17,12 +17,65 @@
 

 <h2>Correlation Scatterplot</h2>

 

+<div style="margin-left: 0px;">

+

+    {% if trait_1.dataset.type == "ProbeSet" %}

+		<div>

+			X axis:

+			<a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">

+				{{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " "  + trait_1.dataset.name + ": " + trait_1.name|string}}

+			</a>

+		</div>

+		<div>

+			[{{trait_1.symbol}} on {{trait_1.location_repr}} Mb]

+			{{trait_1.description_display}}

+		</div>

+    {% elif trait_1.dataset.type == "Publish" %}

+		<div>

+			X axis:

+            <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">

+                {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}}

+            </a>

+		</div>

+		<div>

+			<a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a>

+			{{trait_1.description_display}}	

+		</div>

+    {% endif %}

+

+	<br/>

+

+    {% if trait_2.dataset.type == "ProbeSet" %}

+		<div>

+			Y axis:

+            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">

+                {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " "  + trait_2.dataset.name + ": " + trait_2.name|string}}

+            </a>

+        </div>

+        <div>

+			[{{trait_2.symbol}} on {{trait_2.location_repr}} Mb]

+			{{trait_2.description_display}}

+		</div>

+    {% elif trait_2.dataset.type == "Publish" %}

+        <div>

+			Y axis:

+            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">

+                {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}}

+            </a>

+        </div>

+        <div>

+			<a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a>

+			{{trait_2.description_display}}

+		</div>

+    {% endif %}

+	

+</div>

+

+<br>

+

 <table class="table">

 	<tr>

     

-        <td>Width</td>

-		<td><input class="chartupdatewh" id="width" type="text" value="1000" style="width: 44px;"> px</td>

-    

         <td>Axis X Color</td>

 		<td><input class="chartupdate" id="axisxcolor" type="color" value="#000000"></td>

         

@@ -38,6 +91,44 @@
         <td>Correlation Line Color</td>

 		<td><input class="chartupdate" id="clinecolor" type="color" value="#000000"></td>

         

+	</tr>

+	<tr>

+    

+        <td>Axis Y Color</td>

+		<td><input class="chartupdate" id="axisycolor" type="color" value="#000000"></td>

+        

+        <td>Axis Y Font</td>

+		<td><input class="chartupdate" id="axisyfont" type="text" value="16" style="width: 44px;"> px</td>

+        

+        <td>Domain Y Color</td>

+		<td><input class="chartupdate" id="domainycolor" type="color" value="#000000"></td>

+        

+        <td>Domain Y Width</td>

+		<td><input class="chartupdate" id="domainywidth" type="text" value="2" style="width: 44px;"> px</td>

+        

+        <td>Correlation Line Width</td>

+		<td><input class="chartupdate" id="clinewidth" type="text" value="1" style="width: 44px;"> px</td>

+        

+	</tr>

+</table>

+

+<br>

+

+<ul class="nav nav-tabs">

+    <li class="active"><a href="#tp1" data-toggle="tab">Pearson</a></li>

+    <li>               <a href="#tp2" data-toggle="tab">Spearman Rank</a></li>

+</ul>

+

+<div class="tab-content">

+    <div class="tab-pane active" id="tp1">

+

+<br>

+<table class="table">

+	<tr>

+    

+        <td>Width</td>

+		<td><input class="chartupdatewh" id="width" type="text" value="1000" style="width: 44px;"> px</td>

+    

 		<td>Mark Size</td>

 		<td>

             <select class="chartupdatedata" id="marksize" style="width: 100px;">

@@ -61,21 +152,6 @@
         <td>Height</td>

 		<td><input class="chartupdatewh" id="height" type="text" value="800" style="width: 44px;"> px</td>

     

-        <td>Axis Y Color</td>

-		<td><input class="chartupdate" id="axisycolor" type="color" value="#000000"></td>

-        

-        <td>Axis Y Font</td>

-		<td><input class="chartupdate" id="axisyfont" type="text" value="16" style="width: 44px;"> px</td>

-        

-        <td>Domain Y Color</td>

-		<td><input class="chartupdate" id="domainycolor" type="color" value="#000000"></td>

-        

-        <td>Domain Y Width</td>

-		<td><input class="chartupdate" id="domainywidth" type="text" value="2" style="width: 44px;"> px</td>

-        

-        <td>Correlation Line Width</td>

-		<td><input class="chartupdate" id="clinewidth" type="text" value="1" style="width: 44px;"> px</td>

-        

 		<td>Mark Shape</td>

 		<td>

             <select class="chartupdatedata" id="markshape" style="width: 100px;">

@@ -97,58 +173,70 @@
 

 <br>

 

-<div style="margin-left: 75px;">

-

-    {% if trait_1.dataset.type == "ProbeSet" %}

-		<div>

-			X axis:

-			<a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">

-				{{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " "  + trait_1.dataset.name + ": " + trait_1.name|string}}

-			</a>

-		</div>

-		<div>

-			[{{trait_1.symbol}} on {{trait_1.location_repr}} Mb]

-			{{trait_1.description_display}}

-		</div>

-    {% elif trait_1.dataset.type == "Publish" %}

-		<div>

-			X axis:

-            <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}">

-                {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}}

-            </a>

-		</div>

-		<div>

-			<a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a>

-			{{trait_1.description_display}}	

-		</div>

-    {% endif %}

-

-	<br/>

+<table class="table table-hover table-striped table-bordered" style="width: 200px; margin-left: 80px;">

+    <thead>

+        <tr><th>Statistic</th><th>Value</th></tr>

+    </thead>

+	<tbody>

+		<tr><td>Number</td>		<td>{{jsdata.num_overlap}}</td></tr>

+		<tr><td>Slope</td>		<td>{{'%0.3f' % jsdata.slope}}</td></tr>

+		<tr><td>Intercept</td>	<td>{{'%0.3f' % jsdata.intercept}}</td></tr>

+		<tr><td>r value</td>	<td>{{'%0.3f' % jsdata.r_value}}</td></tr>

+		<tr><td>P value</td>	<td>{{'%0.3e' % jsdata.p_value}}</td></tr>

+	</tbody>

+</table>

 

-    {% if trait_2.dataset.type == "ProbeSet" %}

-		<div>

-			Y axis:

-            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">

-                {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " "  + trait_2.dataset.name + ": " + trait_2.name|string}}

-            </a>

-        </div>

-        <div>

-			[{{trait_2.symbol}} on {{trait_2.location_repr}} Mb]

-			{{trait_2.description_display}}

-		</div>

-    {% elif trait_2.dataset.type == "Publish" %}

-        <div>

-			Y axis:

-            <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}">

-                {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}}

-            </a>

-        </div>

-        <div>

-			<a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a>

-			{{trait_2.description_display}}

-		</div>

-    {% endif %}

+    </div>

+    

+    <div class="tab-pane" id="tp2">

+    

+<br>

+<table class="table">

+	<tr>

+    

+        <td>Width</td>

+		<td><input class="srchartupdatewh" id="srwidth" type="text" value="1000" style="width: 44px;"> px</td>

+    

+		<td>Mark Size</td>

+		<td>

+            <select class="srchartupdatedata" id="srmarksize" style="width: 100px;">

+                <option value="0">0</option>

+                <option value="1">1</option>

+                <option value="2">2</option>

+                <option value="3">3</option>

+                <option value="4">4</option>

+                <option value="5" selected>5</option>

+                <option value="6">6</option>

+                <option value="7">7</option>

+                <option value="8">8</option>

+                <option value="9">9</option>

+                <option value="10">10</option>

+            </select>

+        </td>

 	

+	</tr>

+	<tr>

+    

+        <td>Height</td>

+		<td><input class="srchartupdatewh" id="srheight" type="text" value="800" style="width: 44px;"> px</td>

+    

+		<td>Mark Shape</td>

+		<td>

+            <select class="srchartupdatedata" id="srmarkshape" style="width: 100px;">

+                <option value="circle" selected>Circle</option>

+                <option value="cross">Cross</option>

+                <option value="triangle-up">Triangle-up</option>

+                <option value="triangle-down">Triangle-down</option>

+                <option value="diamond">Diamond</option>

+                <option value="square">Square</option>

+            </select>

+        </td>

+        

+	</tr>

+</table>

+

+<div id="srscatterplot2">

+	<svg style="width: 1000px; height: 800px; margin-left: 10px;"></svg>

 </div>

 

 <br>

@@ -159,13 +247,19 @@
     </thead>

 	<tbody>

 		<tr><td>Number</td>		<td>{{jsdata.num_overlap}}</td></tr>

-		<tr><td>Slope</td>		<td>{{'%0.3f' % jsdata.slope}}</td></tr>

-		<tr><td>Intercept</td>	<td>{{'%0.3f' % jsdata.intercept}}</td></tr>

-		<tr><td>R value</td>	<td>{{'%0.3f' % jsdata.r_value}}</td></tr>

-		<tr><td>P value</td>	<td>{{'%0.3e' % jsdata.p_value}}</td></tr>

+		<tr><td>Slope</td>		<td>{{'%0.3f' % jsdata.srslope}}</td></tr>

+		<tr><td>Intercept</td>	<td>{{'%0.3f' % jsdata.srintercept}}</td></tr>

+		<tr><td>r value</td>	<td>{{'%0.3f' % jsdata.srr_value}}</td></tr>

+		<tr><td>P value</td>	<td>{{'%0.3e' % jsdata.srp_value}}</td></tr>

 	</tbody>

 </table>

 

+    </div>

+    

+</div>

+

+</div>

+

 {% endblock %}

 

 {% block js %}

@@ -179,4 +273,5 @@
     <script language="javascript" type="text/javascript" src="/static/new/javascript/colorbrewer.js"></script>

     <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script>

     <script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot-2.js"></script>

+    <script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot-2_sr.js"></script>

 {% endblock %}