aboutsummaryrefslogtreecommitdiff
path: root/wqflask
diff options
context:
space:
mode:
Diffstat (limited to 'wqflask')
-rw-r--r--wqflask/other_config/nginx_conf/gn2-lei.conf (renamed from wqflask/other_config/nginx_conf/gn2_lei.conf)2
-rw-r--r--wqflask/wqflask/correlation/corr_scatter_plot.py1
-rw-r--r--wqflask/wqflask/static/new/css/corr_scatter_plot2.css25
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js76
-rw-r--r--wqflask/wqflask/static/new/javascript/scatterplot.js2
-rw-r--r--wqflask/wqflask/templates/corr_scatterplot.html57
6 files changed, 153 insertions, 10 deletions
diff --git a/wqflask/other_config/nginx_conf/gn2_lei.conf b/wqflask/other_config/nginx_conf/gn2-lei.conf
index 6589d298..893ad435 100644
--- a/wqflask/other_config/nginx_conf/gn2_lei.conf
+++ b/wqflask/other_config/nginx_conf/gn2-lei.conf
@@ -2,7 +2,7 @@ server {
# Modeled after http://flask.pocoo.org/docs/deploying/wsgi-standalone/
listen 80;
- server_name gn2_lei.genenetwork.org;
+ server_name gn2-lei.genenetwork.org;
access_log /var/log/nginx/lei_access.log;
error_log /var/log/nginx/lei_error.log;
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..e21d828f
--- /dev/null
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
@@ -0,0 +1,25 @@
+.nvd3 .nv-axis.nv-x text {
+ font-size: 17px;
+ font-weight: normal;
+ fill: black;
+}
+
+.nvd3 .nv-axis.nv-y text {
+ font-size: 17px;
+ font-weight: normal;
+ fill:black;
+}
+
+.nv-x .nv-axis g path.domain {
+ stroke: black;
+ stroke-width: 2;
+}
+
+.nv-y .nv-axis g path.domain {
+ stroke: black;
+ stroke-width: 2;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+ stroke-opacity: 1;
+}
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..f88e7d5d
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -0,0 +1,76 @@
+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.xAxis.tickFormat(d3.format('.02f'));
+ chart.yAxis.tickFormat(d3.format('.02f'));
+ 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.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;
+}
+
+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/static/new/javascript/scatterplot.js b/wqflask/wqflask/static/new/javascript/scatterplot.js
index de7b7906..d7f2a4a5 100644
--- a/wqflask/wqflask/static/new/javascript/scatterplot.js
+++ b/wqflask/wqflask/static/new/javascript/scatterplot.js
@@ -166,7 +166,7 @@ scatterplot = function() {
maxx = xlim[1];
yticks = yticks != null ? yticks : ys.ticks(nyticks);
xticks = xticks != null ? xticks : xs.ticks(nxticks);
- titlegrp = g.append("g").attr("class", "title").append("text").attr("x", margin.left + width / 2).attr("y", margin.top - titlepos).style("fill", "black").style("font-size", "28px").text(title);
+ titlegrp = g.append("g").attr("class", "title").append("text").attr("x", margin.left + width / 2).attr("y", margin.top - titlepos).style("fill", "black").style("font-size", "24px").text(title);
xaxis = g.append("g").attr("class", "x axis");
xaxis.selectAll("empty").data(xticks).enter().append("line").attr("x1", function(d) {
return xscale(d);
diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html
index 810f4ca3..f07568a0 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">number</th> <td>{{jsdata.num_overlap}}</td></tr>
+ <tr><th class="text-right">slope</th> <td>{{'%0.3f' % jsdata.slope}}</td></tr>
+ <tr><th class="text-right">intercept</th> <td>{{'%0.3f' % jsdata.intercept}}</td></tr>
+ <tr><th class="text-right">r value</th> <td>{{'%0.3f' % jsdata.r_value}}</td></tr>
+ <tr><th class="text-right">p value</th> <td>{{'%0.3e' % 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; margin-left: 10px;"></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 %}
generated by cgit v1.2.3 (git 2.44.0) at 2024-10-19 19:54:17 +0000