From 302ba15ab5b39da3e7868a3eb1539e24d1fdbf5c Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Mon, 3 Jul 2017 19:45:07 +0000 Subject: Update Statistic table in Correlation Scatterplot --- wqflask/wqflask/templates/corr_scatterplot.html | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html index 05891c95..b4525718 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -136,13 +136,16 @@
- +
+ + + - - - - - + + + + +
StatisticValue
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}}
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}}
-- cgit v1.2.3 From 255aace685b7919808e93ad3c8c47334b0496eb9 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Wed, 2 Aug 2017 22:45:45 +0000 Subject: Update Correlation Scatterplot parameters --- .../wqflask/static/new/css/corr_scatter_plot2.css | 5 +- .../new/javascript/draw_corr_scatterplot-2.js | 93 +++++++++++++--- wqflask/wqflask/templates/corr_scatterplot.html | 119 ++++++++++++--------- 3 files changed, 152 insertions(+), 65 deletions(-) diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css index 5aa9b9bf..a2ebb252 100644 --- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css +++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css @@ -7,7 +7,7 @@ .nvd3 .nv-axis.nv-y text { font-size: 16px; font-weight: normal; - fill:black; + fill: black; } .nv-x .nv-axis g path.domain { @@ -29,7 +29,8 @@ } line.nv-regLine { - stroke: red !important; + stroke: red; + stroke-width: 1; } .nv-axisMin-x, 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 96763aca..1fb17bf0 100644 --- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js @@ -1,13 +1,14 @@ var chart; -nv.addGraph(function() { +function drawg () { // chart = nv.models.scatterChart(); // chart.showLegend(false); chart.duration(300); chart.color(d3.scale.category10().range()); - chart.pointRange([200,0]); + chart.pointRange([0, 400]); + chart.pointDomain([0, 10]); // chart.xAxis.axisLabel(js_data.trait_1); chart.xAxis.axisLabelDistance(11); @@ -26,15 +27,12 @@ nv.addGraph(function() { chart.yAxis.tickFormat(d3.format(checkformat(yrange))); // chart.tooltip.contentGenerator(function (obj) { - return '(' + obj.point.x + ', ' + obj.point.y + ')'; + // return '(' + obj.point.x + ', ' + obj.point.y + ')'; + return '(' + obj.point.name + ')'; }); - // - d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart); - nv.utils.windowResize(chart.update); - return chart; -}); +} -function getdata () { +function getdata(size, shape) { var data = []; data.push({ values: [], @@ -45,14 +43,15 @@ function getdata () { data[0].values.push({ x: js_data.data[0][j], y: js_data.data[1][j], - size: 10, - shape: 'circle' + name: js_data.indIDs[j], + size: size, + shape: shape }); } return data; } -function checkformat (range) { +function checkformat(range) { cell = range / 10.0; if (cell >= 1) { return ",r"; @@ -62,3 +61,73 @@ function checkformat (range) { return ",.0" + n + "f"; } } + +function chartupdate() { + // + var axisxcolor = $("#axisxcolor").val(); + $(".nvd3 .nv-axis.nv-x text").css("fill", axisxcolor); + // + var axisycolor = $("#axisycolor").val(); + $(".nvd3 .nv-axis.nv-y text").css("fill", axisycolor); + // + var axisxfont = $("#axisxfont").val(); + $(".nvd3 .nv-axis.nv-x text").css("font-size", axisxfont); + // + var axisyfont = $("#axisyfont").val(); + $(".nvd3 .nv-axis.nv-y text").css("font-size", axisyfont); + // + var domainxcolor = $("#domainxcolor").val(); + $(".nv-x .nv-axis g path.domain").css("stroke", domainxcolor); + // + var domainycolor = $("#domainycolor").val(); + $(".nv-y .nv-axis g path.domain").css("stroke", domainycolor); + // + var domainxwidth = $("#domainxwidth").val(); + $(".nv-x .nv-axis g path.domain").css("stroke-width", domainxwidth); + // + var domainywidth = $("#domainywidth").val(); + $(".nv-y .nv-axis g path.domain").css("stroke-width", domainywidth); + // + var clinecolor = $("#clinecolor").val(); + $("line.nv-regLine").css("stroke", clinecolor); + // + var clinewidth = $("#clinewidth").val(); + $("line.nv-regLine").css("stroke-width", clinewidth); +} + +function chartupdatewh() { + // + var width = $("#width").val(); + $("#scatterplot2 svg").css("width", width); + // + var height = $("#height").val(); + $("#scatterplot2 svg").css("height", height); + // + window.dispatchEvent(new Event('resize')); +} + +function chartupdatedata() { + // + var size = $("#marksize").val(); + var shape = $("#markshape").val(); + // + d3.select('#scatterplot2 svg').datum(nv.log(getdata(size, shape))).call(chart); + nv.utils.windowResize(chart.update); +} + +drawg(); +chartupdate(); +chartupdatewh(); +chartupdatedata(); + +$(".chartupdate").change(function () { + chartupdate(); +}); + +$(".chartupdatewh").change(function () { + chartupdatewh(); +}); + +$(".chartupdatedata").change(function () { + chartupdatedata(); +}); diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html index b4525718..b62df32f 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -12,67 +12,84 @@ {% endblock %} {% block content %} - +

Correlation Scatterplot

-
-- cgit v1.2.3 From e172f74ff8cc76ae43dc740d20d3eaafce71b284 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Wed, 2 Aug 2017 22:56:22 +0000 Subject: Remove duplicate codes --- wqflask/wqflask/templates/corr_scatterplot.html | 39 ------------------------- 1 file changed, 39 deletions(-) diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html index d25a361d..47b83018 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -97,45 +97,6 @@
-

Correlation Scatterplot

- - - - - - - - - -
num overlap {{jsdata.num_overlap}}
slope {{jsdata.slope}}
intercept {{jsdata.intercept}}
r value {{jsdata.r_value}}
p value {{jsdata.p_value}}
- - - -
- -
- -
-
{% if trait_1.dataset.type == "ProbeSet" %} -- cgit v1.2.3 From f82a8114d973d4e85c8c38eecceff86aec55eed9 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Thu, 3 Aug 2017 17:50:18 +0000 Subject: remove brackets --- wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 1fb17bf0..17f939cc 100644 --- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js @@ -28,7 +28,7 @@ function drawg () { // chart.tooltip.contentGenerator(function (obj) { // return '(' + obj.point.x + ', ' + obj.point.y + ')'; - return '(' + obj.point.name + ')'; + return '' + obj.point.name + ''; }); } -- cgit v1.2.3 From 28a128b242af78941b7511e8f84ca5d61a19997c Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Wed, 23 Aug 2017 15:26:26 +0000 Subject: Update corr scatterplot --- wqflask/wqflask/correlation/corr_scatter_plot.py | 15 ++ .../new/javascript/draw_corr_scatterplot-2_sr.js | 133 ++++++++++++ wqflask/wqflask/templates/corr_scatterplot.html | 239 ++++++++++++++------- 3 files changed, 315 insertions(+), 72 deletions(-) create mode 100644 wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py index 6a92c501..a08cd759 100644 --- a/wqflask/wqflask/correlation/corr_scatter_plot.py +++ b/wqflask/wqflask/correlation/corr_scatter_plot.py @@ -67,9 +67,17 @@ class CorrScatterPlot(object): x = np.array(vals_1) y = np.array(vals_2) slope, intercept, r_value, p_value, std_err = stats.linregress(x, y) + + rx = stats.rankdata(x) + ry = stats.rankdata(y) + self.rdata = [] + self.rdata.append(rx.tolist()) + self.rdata.append(ry.tolist()) + srslope, srintercept, srr_value, srp_value, srstd_err = stats.linregress(rx, ry) self.js_data = dict( data = self.data, + rdata = self.rdata, indIDs = self.indIDs, trait_1 = self.trait_1.dataset.name + ": " + str(self.trait_1.name), trait_2 = self.trait_2.dataset.name + ": " + str(self.trait_2.name), @@ -78,10 +86,17 @@ class CorrScatterPlot(object): num_overlap = num_overlap, vals_1 = vals_1, vals_2 = vals_2, + slope = slope, intercept = intercept, r_value = r_value, p_value = p_value, + + srslope = srslope, + srintercept = srintercept, + srr_value = srr_value, + srp_value = srp_value, + width = width, height = height, circle_color = circle_color, diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js new file mode 100644 index 00000000..08ddc825 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js @@ -0,0 +1,133 @@ +var srchart; + +function srdrawg () { + // + srchart = nv.models.scatterChart(); + // + srchart.showLegend(false); + srchart.duration(300); + srchart.color(d3.scale.category10().range()); + srchart.pointRange([0, 400]); + srchart.pointDomain([0, 10]); + // + srchart.xAxis.axisLabel(js_data.trait_1); + srchart.xAxis.axisLabelDistance(11); + srchart.yAxis.axisLabel(js_data.trait_2); + srchart.yAxis.axisLabelDistance(11); + // + xmin = d3.min(js_data.rdata[0]); + xmax = d3.max(js_data.rdata[0]); + xrange = xmax - xmin; + ymin = d3.min(js_data.rdata[1]); + ymax = d3.max(js_data.rdata[1]); + yrange = ymax - ymin; + srchart.xDomain([xmin - xrange/10, xmax + xrange/10]); + srchart.yDomain([ymin - yrange/10, ymax + yrange/10]); + srchart.xAxis.tickFormat(d3.format(srcheckformat(xrange))); + srchart.yAxis.tickFormat(d3.format(srcheckformat(yrange))); + // + srchart.tooltip.contentGenerator(function (obj) { + // return '(' + obj.point.x + ', ' + obj.point.y + ')'; + return '' + obj.point.name + ''; + }); +} + +function srgetdata(size, shape) { + var data = []; + data.push({ + values: [], + slope: js_data.srslope, + intercept: js_data.srintercept + }); + for (j = 0; j < js_data.rdata[0].length; j++) { + data[0].values.push({ + x: js_data.rdata[0][j], + y: js_data.rdata[1][j], + name: js_data.indIDs[j], + size: size, + shape: shape + }); + } + return data; +} + +function srcheckformat(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"; + } +} + +function srchartupdate() { + // + var axisxcolor = $("#axisxcolor").val(); + $(".nvd3 .nv-axis.nv-x text").css("fill", axisxcolor); + // + var axisycolor = $("#axisycolor").val(); + $(".nvd3 .nv-axis.nv-y text").css("fill", axisycolor); + // + var axisxfont = $("#axisxfont").val(); + $(".nvd3 .nv-axis.nv-x text").css("font-size", axisxfont); + // + var axisyfont = $("#axisyfont").val(); + $(".nvd3 .nv-axis.nv-y text").css("font-size", axisyfont); + // + var domainxcolor = $("#domainxcolor").val(); + $(".nv-x .nv-axis g path.domain").css("stroke", domainxcolor); + // + var domainycolor = $("#domainycolor").val(); + $(".nv-y .nv-axis g path.domain").css("stroke", domainycolor); + // + var domainxwidth = $("#domainxwidth").val(); + $(".nv-x .nv-axis g path.domain").css("stroke-width", domainxwidth); + // + var domainywidth = $("#domainywidth").val(); + $(".nv-y .nv-axis g path.domain").css("stroke-width", domainywidth); + // + var clinecolor = $("#clinecolor").val(); + $("line.nv-regLine").css("stroke", clinecolor); + // + var clinewidth = $("#clinewidth").val(); + $("line.nv-regLine").css("stroke-width", clinewidth); +} + +function srchartupdatewh() { + // + var width = $("#srwidth").val(); + $("#srscatterplot2 svg").css("width", width); + // + var height = $("#srheight").val(); + $("#srscatterplot2 svg").css("height", height); + // + window.dispatchEvent(new Event('resize')); +} + +function srchartupdatedata() { + // + var size = $("#srmarksize").val(); + var shape = $("#srmarkshape").val(); + // + d3.select('#srscatterplot2 svg').datum(nv.log(srgetdata(size, shape))).call(srchart); + nv.utils.windowResize(srchart.update); +} + +srdrawg(); +srchartupdate(); +srchartupdatewh(); +srchartupdatedata(); + +$(".srchartupdate").change(function () { + srchartupdate(); +}); + +$(".srchartupdatewh").change(function () { + srchartupdatewh(); +}); + +$(".srchartupdatedata").change(function () { + srchartupdatedata(); +}); diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html index 47b83018..fc9925e7 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -17,12 +17,65 @@

Correlation Scatterplot

+
+ + {% if trait_1.dataset.type == "ProbeSet" %} +
+ X axis: + + {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " " + trait_1.dataset.name + ": " + trait_1.name|string}} + +
+
+ [{{trait_1.symbol}} on {{trait_1.location_repr}} Mb] + {{trait_1.description_display}} +
+ {% elif trait_1.dataset.type == "Publish" %} +
+ X axis: + + {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}} + +
+
+ PubMed: {{trait_1.pubmed_text}} + {{trait_1.description_display}} +
+ {% endif %} + +
+ + {% if trait_2.dataset.type == "ProbeSet" %} +
+ Y axis: + + {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " " + trait_2.dataset.name + ": " + trait_2.name|string}} + +
+
+ [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb] + {{trait_2.description_display}} +
+ {% elif trait_2.dataset.type == "Publish" %} +
+ Y axis: + + {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}} + +
+
+ PubMed: {{trait_2.pubmed_text}} + {{trait_2.description_display}} +
+ {% endif %} + +
+ +
+ - - - @@ -38,6 +91,44 @@ + + + + + + + + + + + + + + + + + + + +
Width pxAxis X Color Correlation Line Color
Axis Y ColorAxis Y Font pxDomain Y ColorDomain Y Width pxCorrelation Line Width px
+ +
+ + + +
+
+ +
+ + + + + + - - - - - - - - - - - - - - - - - - - + + + +
Width pxMark Size Height pxAxis Y ColorAxis Y Font pxDomain Y ColorDomain Y Width pxCorrelation Line Width pxMark Shape + + + + + + + + + + +
StatisticValue
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}}
- {% if trait_2.dataset.type == "ProbeSet" %} - -
- [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb] - {{trait_2.description_display}} -
- {% elif trait_2.dataset.type == "Publish" %} - -
- PubMed: {{trait_2.pubmed_text}} - {{trait_2.description_display}} -
- {% endif %} + + +
+ +
+ + + + + + + + + + + + + + + + + + +
Width pxMark Size + +
Height pxMark Shape + +
+ +
+

@@ -159,13 +247,19 @@
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}}
Slope {{'%0.3f' % jsdata.srslope}}
Intercept {{'%0.3f' % jsdata.srintercept}}
r value {{'%0.3f' % jsdata.srr_value}}
P value {{'%0.3e' % jsdata.srp_value}}
+
+ +
+ +
+ {% endblock %} {% block js %} @@ -179,4 +273,5 @@ + {% endblock %} -- cgit v1.2.3 From 3adc1de4973bc5b92b88c7d8865ff1ec18e67965 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Tue, 12 Sep 2017 21:33:20 +0000 Subject: change corr_scatterplot precision format --- .../new/javascript/draw_corr_scatterplot-2.js | 6 ++++ wqflask/wqflask/templates/corr_scatterplot.html | 36 +++++++++++----------- 2 files changed, 24 insertions(+), 18 deletions(-) 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 17f939cc..4a0f2c55 100644 --- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js @@ -93,6 +93,12 @@ function chartupdate() { // var clinewidth = $("#clinewidth").val(); $("line.nv-regLine").css("stroke-width", clinewidth); + // + var axiscolor = $("#axiscolor").val(); + $(".tick").css("stroke", axiscolor); + // + var axiswidth = $("#axiswidth").val(); + $("line.nv-regLine").css("stroke-width", axiswidth); } function chartupdatewh() { diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html index fc9925e7..227e1116 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -91,6 +91,9 @@ Correlation Line Color + Axis Line Color + + @@ -109,6 +112,9 @@ Correlation Line Width px + Axis Line Width + px + @@ -129,7 +135,10 @@ Width px - Mark Size + Height + px + + Size - - - - Height - px - - Mark Shape + Shape px - Mark Size + Height + px + + Size - - - - - Height - px - Mark Shape + Shape