diff options
Diffstat (limited to 'wqflask')
3 files changed, 127 insertions, 75 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..605f557c 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -53,6 +53,35 @@ <h2>Correlation Scatterplot</h2>
+<!--
+<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>
+
+<h2>Correlation Scatterplot</h2>
+
<table class="table">
<tbody>
<tr><th class="text-right">num overlap</th> <td>{{jsdata.num_overlap}}</td></tr>
@@ -144,6 +173,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 %}
|