From 6b64fd15c96da58a5a8119ac6d0d50efb6fc1ef7 Mon Sep 17 00:00:00 2001
From: Lei Yan
Date: Mon, 8 May 2017 04:08:56 +0000
Subject: corr_scatter_plot update (use nvd3)

---
 wqflask/wqflask/correlation/corr_scatter_plot.py   |  1 +
 .../wqflask/static/new/css/corr_scatter_plot2.css  | 19 ++++++
 .../new/javascript/draw_corr_scatterplot-2.js      | 74 ++++++++++++++++++++++
 wqflask/wqflask/templates/corr_scatterplot.html    | 57 ++++++++++++++---
 4 files changed, 143 insertions(+), 8 deletions(-)
 create mode 100644 wqflask/wqflask/static/new/css/corr_scatter_plot2.css
 create mode 100644 wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js

(limited to 'wqflask')

diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py
index 96afef1e..6a92c501 100644
--- a/wqflask/wqflask/correlation/corr_scatter_plot.py
+++ b/wqflask/wqflask/correlation/corr_scatter_plot.py
@@ -89,3 +89,4 @@ class CorrScatterPlot(object):
             line_color = line_color,
             line_width = line_width
         )
+        self.jsdata = self.js_data
diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
new file mode 100644
index 00000000..92e777c2
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
@@ -0,0 +1,19 @@
+.nvd3 .nv-axis.nv-x text {
+	font-size: 16px;
+	font-weight: normal;
+	fill: black;
+}
+
+.nvd3 .nv-axis.nv-y text {
+	font-size: 16px;
+	font-weight: normal;
+	fill: black;
+}
+
+.nv-y .tick.zero line {
+	stroke: black;
+}
+
+.nv-y .nv-axis g path.domain {
+	stroke: black;
+}
diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
new file mode 100644
index 00000000..7a5a86bd
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -0,0 +1,74 @@
+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;
+});
+
+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;
+}
+	
+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;
+}
diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html
index 810f4ca3..4464025e 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -7,6 +7,8 @@
     <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" />
     <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" />
+	<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css">
+	<link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot2.css" />
 {% endblock %}
 
 {% block content %}
@@ -47,10 +49,48 @@
     </tr>
 </table>
 </form>-->
-<div class="container">
-<div id="chart1" class="qtlcharts"></div>
+<div class="container-fluid">
 
-<div style="margin-left: 80px;">
+<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;">
 
     {% if trait_1.dataset.type == "ProbeSet" %}
 		<div>
@@ -103,17 +143,18 @@
     {% endif %}
 	
 </div>
+
 {% endblock %}
 
 {% block js %}
     <script>
-       js_data = {{ js_data | safe }}
+       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="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
+	<script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.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/js_external/d3-tip.min.js"></script>
     <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/scatterplot.js"></script>
-    <script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot.js"></script>
-{% endblock %}
\ No newline at end of file
+    <script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot-2.js"></script>
+{% endblock %}
-- 
cgit v1.2.3