From 12c430a912c600ae5d5cdd7881d24bb986f88a53 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Fri, 23 Feb 2018 00:02:52 +0000 Subject: update corr scatterplot interface --- .../new/javascript/draw_corr_scatterplot-2.js | 130 +++++++++++---- .../new/javascript/draw_corr_scatterplot-2_sr.js | 137 ---------------- wqflask/wqflask/templates/corr_scatterplot.html | 176 +++++++-------------- 3 files changed, 151 insertions(+), 292 deletions(-) delete mode 100644 wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js 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 43ac6086..bf0a14e6 100644 --- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js @@ -1,6 +1,7 @@ var chart; +var srchart; -function drawg () { +function drawg() { // chart = nv.models.scatterChart(); // @@ -27,11 +28,45 @@ function drawg () { chart.yAxis.tickFormat(d3.format(checkformat(yrange))); // chart.tooltip.contentGenerator(function (obj) { - // return '(' + obj.point.x + ', ' + obj.point.y + ')'; - return '' + obj.point.name + ''; + return tiptext(obj); }); } +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([0, xmax + xrange/10]); + srchart.yDomain([0, ymax + yrange/10]); + srchart.xAxis.tickFormat(d3.format(checkformat(xrange))); + srchart.yAxis.tickFormat(d3.format(checkformat(yrange))); + // + srchart.tooltip.contentGenerator(function (obj) { + return tiptext(obj); + }); +} + +function tiptext(obj) { + return '' + obj.point.name + " (" + obj.point.x + ', ' + obj.point.y + ')'; +} + function getdata(size, shape) { var data = []; data.push({ @@ -50,6 +85,25 @@ function getdata(size, shape) { } return data; } + +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 checkformat(range) { cell = range / 10.0; @@ -64,50 +118,47 @@ function checkformat(range) { function chartupdate() { // - var axisxcolor = $("#axisxcolor").val(); - $(".nvd3 .nv-axis.nv-x text").css("fill", axisxcolor); + var labelcolor = $("#labelcolor").val(); + $(".nvd3 .nv-axis.nv-x text").css("fill", labelcolor); + $(".nvd3 .nv-axis.nv-y text").css("fill", labelcolor); // - var axisycolor = $("#axisycolor").val(); - $(".nvd3 .nv-axis.nv-y text").css("fill", axisycolor); + var labelfont = $("#labelfont").val(); + $(".nvd3 .nv-axis.nv-x text").css("font-size", labelfont); + $(".nvd3 .nv-axis.nv-y text").css("font-size", labelfont); // - var axisxfont = $("#axisxfont").val(); - $(".nvd3 .nv-axis.nv-x text").css("font-size", axisxfont); + var numbercolor = $("#numbercolor").val(); + $("g.tick text").css("fill", numbercolor); // - var axisyfont = $("#axisyfont").val(); - $(".nvd3 .nv-axis.nv-y text").css("font-size", axisyfont); + var numberfont = $("#numberfont").val(); + $("g.tick text").css("font-size", numberfont); // - 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 axiscolor = $("#axiscolor").val(); + $(".nv-x .nv-axis g path.domain").css("stroke", axiscolor); + $(".nv-y .nv-axis g path.domain").css("stroke", axiscolor); // - var domainywidth = $("#domainywidth").val(); - $(".nv-y .nv-axis g path.domain").css("stroke-width", domainywidth); + var axiswidth = $("#axiswidth").val(); + $(".nv-x .nv-axis g path.domain").css("stroke-width", axiswidth); + $(".nv-y .nv-axis g path.domain").css("stroke-width", axiswidth); // - var clinecolor = $("#clinecolor").val(); - $("line.nv-regLine").css("stroke", clinecolor); + var linecolor = $("#linecolor").val(); + $("line.nv-regLine").css("stroke", linecolor); // - var clinewidth = $("#clinewidth").val(); - $("line.nv-regLine").css("stroke-width", clinewidth); + var linewidth = $("#linewidth").val(); + $("line.nv-regLine").css("stroke-width", linewidth); // - var axiscolor = $("#axiscolor").val(); - $(".tick").css("stroke", axiscolor); - // - var axiswidth = $("#axiswidth").val(); - $("line.nv-regLine").css("stroke-width", axiswidth); + var markcolor = $("#markcolor").val(); + $(".nvd3 g path").css("fill", markcolor); } function chartupdatewh() { // var width = $("#width").val(); $("#scatterplot2 svg").css("width", width); + $("#srscatterplot2 svg").css("width", width); // var height = $("#height").val(); $("#scatterplot2 svg").css("height", height); + $("#srscatterplot2 svg").css("height", height); // window.dispatchEvent(new Event('resize')); } @@ -118,7 +169,9 @@ function chartupdatedata() { var shape = $("#markshape").val(); // d3.select('#scatterplot2 svg').datum(nv.log(getdata(size, shape))).call(chart); + d3.select('#srscatterplot2 svg').datum(nv.log(srgetdata(size, shape))).call(srchart); nv.utils.windowResize(chart.update); + nv.utils.windowResize(srchart.update); } function savesvg(svgEl, name) { @@ -140,10 +193,14 @@ function saveassvg_pcs() { savesvg($("#svg_pcs")[0], "Pearson Correlation Scatterplot.svg"); } +function saveassvg_srcs() { + savesvg($("#svg_srcs")[0], "Spearman Rank Correlation Scatterplot.svg"); +} + drawg(); -chartupdate(); -chartupdatewh(); -chartupdatedata(); +srdrawg(); + + $(".chartupdate").change(function () { chartupdate(); @@ -156,3 +213,10 @@ $(".chartupdatewh").change(function () { $(".chartupdatedata").change(function () { chartupdatedata(); }); + +$(document).ready(function(){ + //chartupdate(); +//chartupdatewh(); +chartupdatedata(); +//chartupdate(); +}); \ No newline at end of file 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 deleted file mode 100644 index d0392dd7..00000000 --- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js +++ /dev/null @@ -1,137 +0,0 @@ -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([0, xmax + xrange/10]); - srchart.yDomain([0, 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); -} - -function saveassvg_srcs() { - savesvg($("#svg_srcs")[0], "Spearman Rank Correlation Scatterplot.svg"); -} - -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 fb2bd55c..bb509270 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -75,72 +75,16 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
Axis X ColorAxis X Font pxDomain X ColorDomain X Width pxCorrelation Line ColorAxis Line Color
Axis Y ColorAxis Y Font pxDomain Y ColorDomain Y Width pxCorrelation Line Width pxAxis Line Width px
Width pxHeight px
-
- - - -
-
- -
- - - - - - - - - - + - - - - - +
Width pxHeight pxSize -
Mark + + - Shape - @@ -166,23 +110,47 @@
-
Save as SVG
+ + + + + + + +
Label + + px + Number + + px + Axis + + px + Line + + px +
-

Pearson Correlation Scatterplot

+
-
- -
+ + +
+

-
- y = {{'%0.3f' % jsdata.slope}} * x + {{'%0.3f' % jsdata.intercept}} -
+
Save as SVG
+ +

Pearson Correlation Scatterplot

+ +

@@ -196,6 +164,13 @@ Intercept {{'%0.3f' % jsdata.intercept}} r value {{'%0.3f' % jsdata.r_value}} P value {% if jsdata.p_value < 0.001 %}{{'%0.3e' % jsdata.p_value}}{% else %}{{'%0.3f' % jsdata.p_value}}{% endif %} + + + Regression Line +
+ y = {{'%0.3f' % jsdata.slope}} * x + {{'%0.3f' % jsdata.intercept}} + + @@ -204,54 +179,12 @@

- - - - - - - - - - - - - - - - -
Width pxHeight pxSize - - Shape - -

Spearman Rank Correlation Scatterplot

-
- -
+

@@ -287,5 +220,4 @@ - {% endblock %} -- cgit v1.2.3