Merge branch 'testing' of https://github.com/genenetwork/genenetwork2

3 files changed, 100 insertions, 87 deletions

diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
index 92e777c2..5aa9b9bf 100644
--- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
@@ -1,19 +1,40 @@
 .nvd3 .nv-axis.nv-x text {
-	font-size: 16px;
-	font-weight: normal;
-	fill: black;
+  font-size: 16px;
+  font-weight: normal;
+  fill: black;
 }
 
 .nvd3 .nv-axis.nv-y text {
-	font-size: 16px;
-	font-weight: normal;
-	fill: black;
+  font-size: 16px;
+  font-weight: normal;
+  fill:black;
 }
 
-.nv-y .tick.zero line {
-	stroke: black;
+.nv-x .nv-axis g path.domain {
+    stroke: black;
+    stroke-width: 2;
 }
 
 .nv-y .nv-axis g path.domain {
-	stroke: black;
+    stroke: black;
+    stroke-width: 2;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+    stroke-opacity: 1;
+}
+
+.nvd3 .nv-axis.nv-y path.domain {
+    stroke-opacity: 1;
+}
+
+line.nv-regLine {
+    stroke: red !important;
+}
+
+.nv-axisMin-x,
+.nv-axisMax-x,
+.nv-axisMin-y,
+.nv-axisMax-y {
+    display: none;
 }
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 7a5a86bd..96763aca 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -1,74 +1,64 @@
 var chart;
 
 nv.addGraph(function() {
-	//
-	chart = nv.models.scatterChart();
-	//
-	chart.showLegend(false);
-	chart.duration(300);
-	chart.color(d3.scale.category10().range());
-	chart.pointRange([200,0]);
-	//
-	// chart.showDistX(true);
-	// chart.showDistY(true);
-	chart.xAxis.tickFormat(d3.format('.02f'));
-	chart.yAxis.tickFormat(d3.format('.02f'));
-	// chart.showXAxis(false);
-	// chart.showYAxis(false);
-	chart.xAxis.axisLabel(js_data.trait_1);
-	chart.yAxis.axisLabel(js_data.trait_2);
-	//
-	xmin = d3.min(js_data.data[0]);
-	xmax = d3.max(js_data.data[0]);
-	xrange = xmax - xmin;
-	ymin = d3.min(js_data.data[1]);
-	ymax = d3.max(js_data.data[1]);
-	yrange = ymax - ymin;
-	chart.xDomain([xmin - xrange/10, xmax + xrange/10]);
-	chart.yDomain([ymin - yrange/10, ymax + yrange/10]);
-	//
-	d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart);
-	nv.utils.windowResize(chart.update);
-	return chart;
+    //
+    chart = nv.models.scatterChart();
+    //
+    chart.showLegend(false);
+    chart.duration(300);
+    chart.color(d3.scale.category10().range());
+    chart.pointRange([200,0]);
+    //
+    chart.xAxis.axisLabel(js_data.trait_1);
+    chart.xAxis.axisLabelDistance(11);
+    chart.yAxis.axisLabel(js_data.trait_2);
+    chart.yAxis.axisLabelDistance(11);
+    //
+    xmin = d3.min(js_data.data[0]);
+    xmax = d3.max(js_data.data[0]);
+    xrange = xmax - xmin;
+    ymin = d3.min(js_data.data[1]);
+    ymax = d3.max(js_data.data[1]);
+    yrange = ymax - ymin;
+    chart.xDomain([xmin - xrange/10, xmax + xrange/10]);
+    chart.yDomain([ymin - yrange/10, ymax + yrange/10]);
+    chart.xAxis.tickFormat(d3.format(checkformat(xrange)));
+    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>';
+    });
+    //
+    d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart);
+    nv.utils.windowResize(chart.update);
+    return chart;
 });
 
 function getdata () {
-	var data = [];
-	data.push({
-			values: [],
-			slope: js_data.slope,
-			intercept: js_data.intercept
-		});
-	for (j = 0; j < js_data.data[0].length; j++) {
-		data[0].values.push({
-			x: js_data.data[0][j],
-			y: js_data.data[1][j],
-			size: 10,
-			shape: 'circle'
-		});
-	}
-	return data;
+    var data = [];
+    data.push({
+            values: [],
+            slope: js_data.slope,
+            intercept: js_data.intercept
+        });
+    for (j = 0; j < js_data.data[0].length; j++) {
+        data[0].values.push({
+            x: js_data.data[0][j],
+            y: js_data.data[1][j],
+            size: 10,
+            shape: 'circle'
+        });
+    }
+    return data;
 }
-	
-function randomData(groups, points) {
-	var data = [],
-		shapes = ['circle'],
-		random = d3.random.normal();
-	for (i = 0; i < groups; i++) {
-		data.push({
-			key: 'Group ' + i,
-			values: [],
-			slope: Math.random() - .01,
-			intercept: Math.random() - .5
-		});
-		for (j = 0; j < points; j++) {
-			data[i].values.push({
-				x: random(),
-				y: random(),
-				size: Math.random(),
-				shape: shapes[j % shapes.length]
-			});
-		}
-	}
-	return data;
+    
+function checkformat (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";
+    }
 }
diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html
index 4464025e..05891c95 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -53,16 +53,6 @@
 

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

@@ -85,12 +75,12 @@
 -->

 

 <div id="scatterplot2">

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

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

 </div>

 

 <br>

 

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

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

 

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

 		<div>

@@ -144,6 +134,18 @@
 	

 </div>

 

+<br>

+

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

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

+	</tbody>

+</table>

+

 {% endblock %}

 

 {% block js %}