Merge pull request #258 from lyan6/master

improved scatter plots

5 files changed, 461 insertions, 124 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/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
index 5aa9b9bf..a2ebb252 100644
--- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
@@ -7,7 +7,7 @@
 .nvd3 .nv-axis.nv-y text {
   font-size: 16px;
   font-weight: normal;
-  fill:black;
+  fill: black;
 }
 
 .nv-x .nv-axis g path.domain {
@@ -29,7 +29,8 @@
 }
 
 line.nv-regLine {
-    stroke: red !important;
+    stroke: red;
+    stroke-width: 1;
 }
 
 .nv-axisMin-x,
diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
index 96763aca..43ac6086 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -1,13 +1,14 @@
 var chart;
 
-nv.addGraph(function() {
+function drawg () {
     //
     chart = nv.models.scatterChart();
     //
     chart.showLegend(false);
     chart.duration(300);
     chart.color(d3.scale.category10().range());
-    chart.pointRange([200,0]);
+    chart.pointRange([0, 400]);
+    chart.pointDomain([0, 10]);
     //
     chart.xAxis.axisLabel(js_data.trait_1);
     chart.xAxis.axisLabelDistance(11);
@@ -26,15 +27,12 @@ nv.addGraph(function() {
     chart.yAxis.tickFormat(d3.format(checkformat(yrange)));
     //
     chart.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.x + ', ' + obj.point.y + ')</b>';
+        return '<b style="font-size: 18px">' + obj.point.name + '</b>';
     });
-    //
-    d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart);
-    nv.utils.windowResize(chart.update);
-    return chart;
-});
+}
 
-function getdata () {
+function getdata(size, shape) {
     var data = [];
     data.push({
             values: [],
@@ -45,14 +43,15 @@ function getdata () {
         data[0].values.push({
             x: js_data.data[0][j],
             y: js_data.data[1][j],
-            size: 10,
-            shape: 'circle'
+            name: js_data.indIDs[j],
+            size: size,
+            shape: shape
         });
     }
     return data;
 }
     
-function checkformat (range) {
+function checkformat(range) {
     cell = range / 10.0;
     if (cell >= 1) {
         return ",r";
@@ -62,3 +61,98 @@ function checkformat (range) {
         return ",.0" + n + "f";
     }
 }
+
+function chartupdate() {
+    //
+    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);
+    //
+    var axiscolor = $("#axiscolor").val();
+    $(".tick").css("stroke", axiscolor);
+    //
+    var axiswidth = $("#axiswidth").val();
+    $("line.nv-regLine").css("stroke-width", axiswidth); 
+}
+
+function chartupdatewh() {
+    //
+    var width = $("#width").val();
+    $("#scatterplot2 svg").css("width", width);
+    //
+    var height = $("#height").val();
+    $("#scatterplot2 svg").css("height", height);
+    //
+    window.dispatchEvent(new Event('resize'));
+}
+
+function chartupdatedata() {
+    //
+    var size = $("#marksize").val();
+    var shape = $("#markshape").val();
+    //
+    d3.select('#scatterplot2 svg').datum(nv.log(getdata(size, shape))).call(chart);
+    nv.utils.windowResize(chart.update);
+}
+
+function savesvg(svgEl, name) {
+    svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    var svgData = svgEl.outerHTML;
+    var preface = '<?xml version="1.0" standalone="no"?>\r\n';
+    preface += '<?xml-stylesheet type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css"?>\r\n';
+    var svgBlob = new Blob([preface, svgData], {type:"image/svg+xml;charset=utf-8"});
+    var svgUrl = URL.createObjectURL(svgBlob);
+    var downloadLink = document.createElement("a");
+    downloadLink.href = svgUrl;
+    downloadLink.download = name;
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+}
+
+function saveassvg_pcs() {
+    savesvg($("#svg_pcs")[0], "Pearson Correlation Scatterplot.svg");
+}
+
+drawg();
+chartupdate();
+chartupdatewh();
+chartupdatedata();
+
+$(".chartupdate").change(function () {
+    chartupdate();
+});
+
+$(".chartupdatewh").change(function () {
+    chartupdatewh();
+});
+
+$(".chartupdatedata").change(function () {
+    chartupdatedata();
+});
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..d0392dd7
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js
@@ -0,0 +1,137 @@
+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([0, xmax + xrange/10]);
+    srchart.yDomain([0, 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);
+}
+
+function saveassvg_srcs() {
+    savesvg($("#svg_srcs")[0], "Spearman Rank Correlation Scatterplot.svg");
+}
+
+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 605f557c..fb2bd55c 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -12,114 +12,12 @@
 {% 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 class="container-fluid">

 

 <h2>Correlation Scatterplot</h2>

 

-<!--

-<table class="table">

-	<tr>

-		<td>Correlation Line Width</td>

-		<td><input type="text" name="lastname" value="2" style="width: 44px;"> px</td>

-	</tr>

-	<tr>

-		<td>Correlation Line Color</td>

-		<td><input type="color" name="favcolor" value="#000000"></td>

-	</tr>

-	<tr>

-		<td>Dot Stroke</td>

-		<td><input type="text" name="lastname" value="5" style="width: 44px;"> px</td>

-	</tr>

-	<tr>

-		<td>Dot Color</td>

-		<td><input type="color" name="favcolor" value="#ff0000"></td>

-	</tr>

-</table>

--->

-

-<div id="scatterplot2">

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

-</div>

-

-<br>

-

-<h2>Correlation Scatterplot</h2>

-

-<table class="table">

-	<tbody>

-		<tr><th class="text-right">num overlap</th>	<td>{{jsdata.num_overlap}}</td></tr>

-		<tr><th class="text-right">slope</th>		<td>{{jsdata.slope}}</td></tr>

-		<tr><th class="text-right">intercept</th>	<td>{{jsdata.intercept}}</td></tr>

-		<tr><th class="text-right">r value</th>		<td>{{jsdata.r_value}}</td></tr>

-		<tr><th class="text-right">p value</th>		<td>{{jsdata.p_value}}</td></tr>

-	</tbody>

-</table>

-

-<!--

-<table class="table">

-	<tr>

-		<td>Correlation Line Width</td>

-		<td><input type="text" name="lastname" value="2" style="width: 44px;"> px</td>

-	</tr>

-	<tr>

-		<td>Correlation Line Color</td>

-		<td><input type="color" name="favcolor" value="#000000"></td>

-	</tr>

-	<tr>

-		<td>Dot Stroke</td>

-		<td><input type="text" name="lastname" value="5" style="width: 44px;"> px</td>

-	</tr>

-	<tr>

-		<td>Dot Color</td>

-		<td><input type="color" name="favcolor" value="#ff0000"></td>

-	</tr>

-</table>

--->

-

-<div id="scatterplot2">

-	<svg style="width: 1000px; height: 800px;"></svg>

-</div>

-

-<br>

-

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

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

 

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

 		<div>

@@ -175,16 +73,207 @@
 

 <br>

 

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

+<table class="table">

+	<tr>

+    

+        <td>Axis X Color</td>

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

+        

+        <td>Axis X Font</td>

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

+        

+        <td>Domain X Color</td>

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

+        

+        <td>Domain X Width</td>

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

+        

+        <td>Correlation Line Color</td>

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

+        

+        <td>Axis Line Color</td>

+		<td><input class="chartupdate" id="axiscolor" 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>

+        

+        <td>Axis Line Width</td>

+		<td><input class="chartupdate" id="axiswidth" 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>Height</td>

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

+        

+		<td>Size</td>

+		<td>

+            <select class="chartupdatedata" id="marksize" 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>

+	

+		<td>Shape</td>

+		<td>

+            <select class="chartupdatedata" id="markshape" 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><a id="a_svg_pcs" href="#" onclick="javascript:saveassvg_pcs();" class="btn btn-primary">Save as SVG</a></div>

+

+<div style="width: 1000px; text-align: center;"><h2>Pearson Correlation Scatterplot</h2></div>

+

+<div id="scatterplot2">

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

+</div>

+

+<br>

+

+<div class="alert alert-info" style="width: 200px; margin-left: 80px;">

+    y = {{'%0.3f' % jsdata.slope}} * x + {{'%0.3f' % jsdata.intercept}}

+</div>

+

+<br>

+

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

+    <thead>

+        <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>

+    </thead>

 	<tbody>

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

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

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

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

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

+		<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>{% if jsdata.p_value < 0.001 %}{{'%0.3e' % jsdata.p_value}}{% else %}{{'%0.3f' % jsdata.p_value}}{% endif %}</td></tr>

 	</tbody>

 </table>

 

+    </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>Height</td>

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

+        

+		<td>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>

+    

+		<td>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><a id="a_svg_srcs" href="#" onclick="javascript:saveassvg_srcs();" class="btn btn-primary">Save as SVG</a></div>

+

+<div style="width: 1000px; text-align: center;"><h2>Spearman Rank Correlation Scatterplot</h2></div>

+

+<div id="srscatterplot2">

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

+</div>

+

+<br>

+

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

+    <thead>

+        <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>

+    </thead>

+	<tbody>

+		<tr><td>Number</td>		<td>{{jsdata.num_overlap}}</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>{% if jsdata.srp_value < 0.001 %}{{'%0.3e' % jsdata.srp_value}}{% else %}{{'%0.3f' % jsdata.srp_value}}{% endif %}</td></tr>

+	</tbody>

+</table>

+

+    </div>

+    

+</div>

+

+</div>

+

 {% endblock %}

 

 {% block js %}

@@ -198,4 +287,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 %}