diff options
3 files changed, 86 insertions, 78 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..e21d828f 100644 --- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css +++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css @@ -1,19 +1,25 @@ .nvd3 .nv-axis.nv-x text { - font-size: 16px; - font-weight: normal; - fill: black; + font-size: 17px; + font-weight: normal; + fill: black; } .nvd3 .nv-axis.nv-y text { - font-size: 16px; - font-weight: normal; - fill: black; + font-size: 17px; + font-weight: normal; + fill:black; } -.nv-y .tick.zero line { +.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 index 7a5a86bd..f88e7d5d 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,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.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.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; + 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; + 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 4464025e..f07568a0 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -55,11 +55,11 @@ <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>
+ <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>
@@ -85,7 +85,7 @@ -->
<div id="scatterplot2">
- <svg style="width: 1000px; height: 800px;"></svg>
+ <svg style="width: 1000px; height: 800px; margin-left: 10px;"></svg>
</div>
<br>
|