diff options
| -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.py | 1 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/css/corr_scatter_plot2.css | 25 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js | 76 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/scatterplot.js | 2 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/corr_scatterplot.html | 57 |
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 %} |