diff options
4 files changed, 143 insertions, 8 deletions
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 %}
|