update corr scatterplot interface

3 files changed, 151 insertions, 292 deletions

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 43ac6086..bf0a14e6 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -1,6 +1,7 @@
 var chart;
+var srchart;
 
-function drawg () {
+function drawg() {
     //
     chart = nv.models.scatterChart();
     //
@@ -27,11 +28,45 @@ function drawg () {
     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.name + '</b>';
+        return tiptext(obj);
     });
 }
 
+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(checkformat(xrange)));
+    srchart.yAxis.tickFormat(d3.format(checkformat(yrange)));
+    //
+    srchart.tooltip.contentGenerator(function (obj) {
+        return tiptext(obj);
+    });
+}
+
+function tiptext(obj) {
+    return '<b style="font-size: 18px">' + obj.point.name + " (" + obj.point.x + ', ' + obj.point.y + ')</b>';
+}
+
 function getdata(size, shape) {
     var data = [];
     data.push({
@@ -50,6 +85,25 @@ function getdata(size, shape) {
     }
     return data;
 }
+
+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 checkformat(range) {
     cell = range / 10.0;
@@ -64,50 +118,47 @@ function checkformat(range) {
 
 function chartupdate() {
     //
-    var axisxcolor = $("#axisxcolor").val();
-    $(".nvd3 .nv-axis.nv-x text").css("fill", axisxcolor);
+    var labelcolor = $("#labelcolor").val();
+    $(".nvd3 .nv-axis.nv-x text").css("fill", labelcolor);
+    $(".nvd3 .nv-axis.nv-y text").css("fill", labelcolor);
     //
-    var axisycolor = $("#axisycolor").val();
-    $(".nvd3 .nv-axis.nv-y text").css("fill", axisycolor);
+    var labelfont = $("#labelfont").val();
+    $(".nvd3 .nv-axis.nv-x text").css("font-size", labelfont);
+    $(".nvd3 .nv-axis.nv-y text").css("font-size", labelfont);
     //
-    var axisxfont = $("#axisxfont").val();
-    $(".nvd3 .nv-axis.nv-x text").css("font-size", axisxfont);
+    var numbercolor = $("#numbercolor").val();
+    $("g.tick text").css("fill", numbercolor);
     //
-    var axisyfont = $("#axisyfont").val();
-    $(".nvd3 .nv-axis.nv-y text").css("font-size", axisyfont);
+    var numberfont = $("#numberfont").val();
+    $("g.tick text").css("font-size", numberfont);
     //
-    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 axiscolor = $("#axiscolor").val();
+    $(".nv-x .nv-axis g path.domain").css("stroke", axiscolor);
+    $(".nv-y .nv-axis g path.domain").css("stroke", axiscolor);
     //
-    var domainywidth = $("#domainywidth").val();
-    $(".nv-y .nv-axis g path.domain").css("stroke-width", domainywidth);
+    var axiswidth = $("#axiswidth").val();
+    $(".nv-x .nv-axis g path.domain").css("stroke-width", axiswidth);
+    $(".nv-y .nv-axis g path.domain").css("stroke-width", axiswidth);
     //
-    var clinecolor = $("#clinecolor").val();
-    $("line.nv-regLine").css("stroke", clinecolor);
+    var linecolor = $("#linecolor").val();
+    $("line.nv-regLine").css("stroke", linecolor);
     //
-    var clinewidth = $("#clinewidth").val();
-    $("line.nv-regLine").css("stroke-width", clinewidth);
+    var linewidth = $("#linewidth").val();
+    $("line.nv-regLine").css("stroke-width", linewidth);
     //
-    var axiscolor = $("#axiscolor").val();
-    $(".tick").css("stroke", axiscolor);
-    //
-    var axiswidth = $("#axiswidth").val();
-    $("line.nv-regLine").css("stroke-width", axiswidth); 
+    var markcolor = $("#markcolor").val();
+    $(".nvd3 g path").css("fill", markcolor);
 }
 
 function chartupdatewh() {
     //
     var width = $("#width").val();
     $("#scatterplot2 svg").css("width", width);
+    $("#srscatterplot2 svg").css("width", width);
     //
     var height = $("#height").val();
     $("#scatterplot2 svg").css("height", height);
+    $("#srscatterplot2 svg").css("height", height);
     //
     window.dispatchEvent(new Event('resize'));
 }
@@ -118,7 +169,9 @@ function chartupdatedata() {
     var shape = $("#markshape").val();
     //
     d3.select('#scatterplot2 svg').datum(nv.log(getdata(size, shape))).call(chart);
+    d3.select('#srscatterplot2 svg').datum(nv.log(srgetdata(size, shape))).call(srchart);
     nv.utils.windowResize(chart.update);
+    nv.utils.windowResize(srchart.update);
 }
 
 function savesvg(svgEl, name) {
@@ -140,10 +193,14 @@ function saveassvg_pcs() {
     savesvg($("#svg_pcs")[0], "Pearson Correlation Scatterplot.svg");
 }
 
+function saveassvg_srcs() {
+    savesvg($("#svg_srcs")[0], "Spearman Rank Correlation Scatterplot.svg");
+}
+
 drawg();
-chartupdate();
-chartupdatewh();
-chartupdatedata();
+srdrawg();
+
+
 
 $(".chartupdate").change(function () {
     chartupdate();
@@ -156,3 +213,10 @@ $(".chartupdatewh").change(function () {
 $(".chartupdatedata").change(function () {
     chartupdatedata();
 });
+
+$(document).ready(function(){
+    //chartupdate();
+//chartupdatewh();
+chartupdatedata();
+//chartupdate();
+});
\ No newline at end of file
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
deleted file mode 100644
index d0392dd7..00000000
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js
+++ /dev/null
@@ -1,137 +0,0 @@
-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 fb2bd55c..bb509270 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -75,72 +75,16 @@
 

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

+        <td style="vertical-align: middle;">Width <input class="chartupdatewh" id="width" type="text" value="1000" style="width: 44px; height: 22px;"> px</td>

+        <td style="vertical-align: middle;">Height <input class="chartupdatewh" id="height" type="text" value="800" style="width: 44px; height: 22px;"> 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;">

+    <tr>

+		<td style="vertical-align: middle;">Mark

+            <input class="chartupdate" id="markcolor" type="color" value="#8fbbda">

+            <select class="chartupdatedata" id="marksize" style="width: 44px; height: 22px;">

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

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

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

@@ -152,12 +96,12 @@
                 <option value="8">8</option>

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

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

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

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

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

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

             </select>

-        </td>

-	

-		<td>Shape</td>

-		<td>

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

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

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

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

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

@@ -166,23 +110,47 @@
                 <option value="square">Square</option>

             </select>

         </td>

-        

-	</tr>

+    </tr>

 </table>

 

-<div><a id="a_svg_pcs" href="#" onclick="javascript:saveassvg_pcs();" class="btn btn-primary">Save as SVG</a></div>

+<table class="table">    

+    <tr>

+        <td style="vertical-align: middle;">Label

+            <input class="chartupdate" id="labelcolor" type="color" value="#000000">

+            <input class="chartupdate" id="labelfont" type="text" value="16" style="width: 44px; height: 22px;"> px

+        </td>

+        <td style="vertical-align: middle;">Number

+            <input class="chartupdate" id="numbercolor" type="color" value="#000000">

+            <input class="chartupdate" id="numberfont" type="text" value="16" style="width: 44px; height: 22px;"> px

+        </td>

+        <td style="vertical-align: middle;">Axis

+            <input class="chartupdate" id="axiscolor" type="color" value="#000000">

+            <input class="chartupdate" id="axiswidth" type="text" value="2" style="width: 44px; height: 22px;"> px

+        </td>

+        <td style="vertical-align: middle;">Line

+            <input class="chartupdate" id="linecolor" type="color" value="#8fbbda">

+            <input class="chartupdate" id="linewidth" type="text" value="1" style="width: 44px; height: 22px;"> px

+        </td>

+    </tr>

+</table>

 

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

+<br>

 

-<div id="scatterplot2">

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

-</div>

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

 

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

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

-</div>

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

 

@@ -196,6 +164,13 @@
 		<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>

+        <tr>

+            <td style="text-align: left;" colspan="2">

+                Regression Line

+                <br>

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

+            </td>

+        </tr>

 	</tbody>

 </table>

 

@@ -204,54 +179,12 @@
     <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>

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

 

 <br>

 

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