From afd2028e0ddab64e433eceb19e8cbd8d7149e080 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Mon, 26 Jun 2017 19:38:49 +0000 Subject: Fix Correlation Scatterplot things --- .../wqflask/static/new/css/corr_scatter_plot2.css | 20 ++-- .../new/javascript/draw_corr_scatterplot-2.js | 132 +++++++++++---------- wqflask/wqflask/templates/corr_scatterplot.html | 12 +- 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 '(' + obj.point.x + ', ' + obj.point.y + ')'; + }); + // + 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 @@ - - - - - + + + + +
num overlap {{jsdata.num_overlap}}
slope {{jsdata.slope}}
intercept {{jsdata.intercept}}
r value {{jsdata.r_value}}
p value {{jsdata.p_value}}
number {{jsdata.num_overlap}}
slope {{'%0.3f' % jsdata.slope}}
intercept {{'%0.3f' % jsdata.intercept}}
r value {{'%0.3f' % jsdata.r_value}}
p value {{'%0.3e' % jsdata.p_value}}
@@ -85,7 +85,7 @@ -->
- +

-- cgit v1.2.3 From 3a7caecf4c7d30f693ba838e1983d03a742fe5ba Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Wed, 28 Jun 2017 17:02:38 +0000 Subject: Update Correlation Scatterplot --- .../wqflask/static/new/css/corr_scatter_plot2.css | 27 +++++++++++++++++----- .../new/javascript/draw_corr_scatterplot-2.js | 4 ++-- 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css index e21d828f..5aa9b9bf 100644 --- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css +++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css @@ -1,25 +1,40 @@ .nvd3 .nv-axis.nv-x text { - font-size: 17px; + font-size: 16px; font-weight: normal; fill: black; } .nvd3 .nv-axis.nv-y text { - font-size: 17px; + font-size: 16px; font-weight: normal; fill:black; } .nv-x .nv-axis g path.domain { - stroke: black; - stroke-width: 2; + stroke: black; + stroke-width: 2; } .nv-y .nv-axis g path.domain { - stroke: black; - stroke-width: 2; + 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 f88e7d5d..ad6c7d6b 100644 --- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js @@ -9,8 +9,8 @@ nv.addGraph(function() { chart.color(d3.scale.category10().range()); chart.pointRange([200,0]); // - chart.xAxis.tickFormat(d3.format('.02f')); - chart.yAxis.tickFormat(d3.format('.02f')); + chart.xAxis.tickFormat(d3.format('r')); + chart.yAxis.tickFormat(d3.format('r')); chart.xAxis.axisLabel(js_data.trait_1); chart.xAxis.axisLabelDistance(11); chart.yAxis.axisLabel(js_data.trait_2); -- cgit v1.2.3 From bb67456364bda733bbe1eab80ab0ba9d44fa7daa Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Thu, 29 Jun 2017 20:40:43 +0000 Subject: Update Correlation Scatterplot --- wqflask/wqflask/templates/corr_scatterplot.html | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html index f07568a0..05891c95 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -53,16 +53,6 @@

Correlation Scatterplot

- - - - - - - - -
number {{jsdata.num_overlap}}
slope {{'%0.3f' % jsdata.slope}}
intercept {{'%0.3f' % jsdata.intercept}}
r value {{'%0.3f' % jsdata.r_value}}
p value {{'%0.3e' % jsdata.p_value}}
-