diff options
Diffstat (limited to 'wqflask')
6 files changed, 469 insertions, 128 deletions
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/marker_regression/gemma_mapping.py b/wqflask/wqflask/marker_regression/gemma_mapping.py index bfcf0ffb..a24e43d4 100644 --- a/wqflask/wqflask/marker_regression/gemma_mapping.py +++ b/wqflask/wqflask/marker_regression/gemma_mapping.py @@ -49,17 +49,19 @@ def run_gemma(this_dataset, samples, vals, covariates, method, use_loco): else: if use_loco == "True": k_output_filename = this_dataset.group.name + "_K_" + ''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(6)) - generate_k_command = GEMMA_WRAPPER_COMMAND + ' --json --loco ' + chr_list_string + ' -- -g %s/%s_geno.txt -p %s/%s_pheno.txt -a %s/%s_snps.txt -gk -debug > /home/zas1024/tmp/gn2/%s.json' % (flat_files('genotype/bimbam'), + generate_k_command = GEMMA_WRAPPER_COMMAND + ' --json --loco ' + chr_list_string + ' -- -g %s/%s_geno.txt -p %s/%s_pheno.txt -a %s/%s_snps.txt -gk -debug > %s/gn2/%s.json' % (flat_files('genotype/bimbam'), genofile_name, flat_files('genotype/bimbam'), genofile_name, flat_files('genotype/bimbam'), genofile_name, + TEMPDIR, k_output_filename) logger.debug("k_command:" + generate_k_command) os.system(generate_k_command) - gemma_command = GEMMA_WRAPPER_COMMAND + ' --json --loco --input /home/zas1024/tmp/gn2/%s.json -- -g %s/%s_geno.txt -p %s/%s_pheno.txt' % (k_output_filename, + gemma_command = GEMMA_WRAPPER_COMMAND + ' --json --loco --input %s/gn2/%s.json -- -g %s/%s_geno.txt -p %s/%s_pheno.txt' % (TEMPDIR, + k_output_filename, flat_files('genotype/bimbam'), genofile_name, flat_files('genotype/bimbam'), @@ -67,14 +69,16 @@ def run_gemma(this_dataset, samples, vals, covariates, method, use_loco): gwa_output_filename = this_dataset.group.name + "_GWA_" + ''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(6)) if covariates != "": - gemma_command += ' -c %s/%s_covariates.txt -a %s/%s_snps.txt -lmm 1 -maf 0.1 -debug > /home/zas1024/tmp/gn2/%s.json' % (flat_files('mapping'), + gemma_command += ' -c %s/%s_covariates.txt -a %s/%s_snps.txt -lmm 1 -maf 0.1 -debug > %s/gn2/%s.json' % (flat_files('mapping'), this_dataset.group.name, flat_files('genotype/bimbam'), genofile_name, + TEMPDIR, gwa_output_filename) else: - gemma_command += ' -a %s/%s_snps.txt -lmm 1 -maf 0.1 -debug > /home/zas1024/tmp/gn2/%s.json' % (flat_files('genotype/bimbam'), + gemma_command += ' -a %s/%s_snps.txt -lmm 1 -maf 0.1 -debug > %s/gn2/%s.json' % (flat_files('genotype/bimbam'), genofile_name, + TEMPDIR, gwa_output_filename) else: 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..43ac6086 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 '<b style="font-size: 18px">(' + obj.point.x + ', ' + obj.point.y + ')</b>'; + // return '<b style="font-size: 18px">(' + obj.point.x + ', ' + obj.point.y + ')</b>'; + return '<b style="font-size: 18px">' + obj.point.name + '</b>'; }); - // - 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,98 @@ 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); + // + var axiscolor = $("#axiscolor").val(); + $(".tick").css("stroke", axiscolor); + // + var axiswidth = $("#axiswidth").val(); + $("line.nv-regLine").css("stroke-width", axiswidth); +} + +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); +} + +function savesvg(svgEl, name) { + svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg"); + var svgData = svgEl.outerHTML; + var preface = '<?xml version="1.0" standalone="no"?>\r\n'; + preface += '<?xml-stylesheet type="text/css" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css"?>\r\n'; + var svgBlob = new Blob([preface, svgData], {type:"image/svg+xml;charset=utf-8"}); + var svgUrl = URL.createObjectURL(svgBlob); + var downloadLink = document.createElement("a"); + downloadLink.href = svgUrl; + downloadLink.download = name; + document.body.appendChild(downloadLink); + downloadLink.click(); + document.body.removeChild(downloadLink); +} + +function saveassvg_pcs() { + savesvg($("#svg_pcs")[0], "Pearson Correlation Scatterplot.svg"); +} + +drawg(); +chartupdate(); +chartupdatewh(); +chartupdatedata(); + +$(".chartupdate").change(function () { + chartupdate(); +}); + +$(".chartupdatewh").change(function () { + chartupdatewh(); +}); + +$(".chartupdatedata").change(function () { + chartupdatedata(); +}); 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..d0392dd7 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js @@ -0,0 +1,137 @@ +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 '<b style="font-size: 18px">(' + obj.point.x + ', ' + obj.point.y + ')</b>'; + return '<b style="font-size: 18px">' + obj.point.name + '</b>'; + }); +} + +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 605f557c..fb2bd55c 100644 --- a/wqflask/wqflask/templates/corr_scatterplot.html +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -12,114 +12,12 @@ {% endblock %}
{% block content %}
-<!--<form action="" method="get">
-<input type="hidden" name="dataset_1" value="{{data_set_1.name}}">
-<input type="hidden" name="dataset_2" value="{{data_set_2.name}}">
-<input type="hidden" name="trait_1" value="{{trait_1.name}}">
-<input type="hidden" name="trait_2" value="{{trait_2.name}}">
-<table class="table" style="width: auto;">
- <tr>
- <td>Canvas Width</td>
- <td>Canvas Height</td>
- <td>Circle Color</td>
- <td>Circle Radius</td>
- <td>Line Color</td>
- <td>Line Width</td>
- <td rowspan="2" style="vertical-align:middle;"><button type="submit" class="btn btn-primary"><i class="icon-refresh"></i>Redraw</button></td>
- </tr>
- <tr>
- <td><input type="text" name="width" value="{{width}}" style="width: 100px;"></td>
- <td><input type="text" name="height" value="{{height}}" style="width: 100px;"></td>
- <td>
- <select name="circle_color" style="width: 100px;">
- <option value="red">Red</option>
- <option value="green">Green</option>
- <option value="blue">Blue</option>
- </select>
- </td>
- <td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></td>
- <td>
- <select name="line_color" style="width: 100px;">
- <option value="red">Red</option>
- <option value="green">Green</option>
- <option value="blue">Blue</option>
- </select>
- </td>
- <td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td>
- </tr>
-</table>
-</form>-->
+
<div class="container-fluid">
<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>
- <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>
- </tbody>
-</table>
-
-<!--
-<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;"></svg>
-</div>
-
-<br>
-
-<div style="margin-left: 75px;">
+<div style="margin-left: 0px;">
{% if trait_1.dataset.type == "ProbeSet" %}
<div>
@@ -175,16 +73,207 @@ <br>
-<table class="table table-hover table-striped table-bordered" style="width: 250px; margin-left: 80px;">
+<table class="table">
+ <tr>
+
+ <td>Axis X Color</td>
+ <td><input class="chartupdate" id="axisxcolor" type="color" value="#000000"></td>
+
+ <td>Axis X Font</td>
+ <td><input class="chartupdate" id="axisxfont" type="text" value="16" style="width: 44px;"> px</td>
+
+ <td>Domain X Color</td>
+ <td><input class="chartupdate" id="domainxcolor" type="color" value="#000000"></td>
+
+ <td>Domain X Width</td>
+ <td><input class="chartupdate" id="domainxwidth" type="text" value="2" style="width: 44px;"> px</td>
+
+ <td>Correlation Line Color</td>
+ <td><input class="chartupdate" id="clinecolor" type="color" value="#000000"></td>
+
+ <td>Axis Line Color</td>
+ <td><input class="chartupdate" id="axiscolor" type="color" value="#000000"></td>
+
+ </tr>
+ <tr>
+
+ <td>Axis Y Color</td>
+ <td><input class="chartupdate" id="axisycolor" type="color" value="#000000"></td>
+
+ <td>Axis Y Font</td>
+ <td><input class="chartupdate" id="axisyfont" type="text" value="16" style="width: 44px;"> px</td>
+
+ <td>Domain Y Color</td>
+ <td><input class="chartupdate" id="domainycolor" type="color" value="#000000"></td>
+
+ <td>Domain Y Width</td>
+ <td><input class="chartupdate" id="domainywidth" type="text" value="2" style="width: 44px;"> px</td>
+
+ <td>Correlation Line Width</td>
+ <td><input class="chartupdate" id="clinewidth" type="text" value="1" style="width: 44px;"> px</td>
+
+ <td>Axis Line Width</td>
+ <td><input class="chartupdate" id="axiswidth" type="text" value="1" style="width: 44px;"> px</td>
+
+ </tr>
+</table>
+
+<br>
+
+<ul class="nav nav-tabs">
+ <li class="active"><a href="#tp1" data-toggle="tab">Pearson</a></li>
+ <li> <a href="#tp2" data-toggle="tab">Spearman Rank</a></li>
+</ul>
+
+<div class="tab-content">
+ <div class="tab-pane active" id="tp1">
+
+<br>
+<table class="table">
+ <tr>
+
+ <td>Width</td>
+ <td><input class="chartupdatewh" id="width" type="text" value="1000" style="width: 44px;"> px</td>
+
+ <td>Height</td>
+ <td><input class="chartupdatewh" id="height" type="text" value="800" style="width: 44px;"> px</td>
+
+ <td>Size</td>
+ <td>
+ <select class="chartupdatedata" id="marksize" style="width: 100px;">
+ <option value="0">0</option>
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5" selected>5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ </select>
+ </td>
+
+ <td>Shape</td>
+ <td>
+ <select class="chartupdatedata" id="markshape" style="width: 100px;">
+ <option value="circle" selected>Circle</option>
+ <option value="cross">Cross</option>
+ <option value="triangle-up">Triangle-up</option>
+ <option value="triangle-down">Triangle-down</option>
+ <option value="diamond">Diamond</option>
+ <option value="square">Square</option>
+ </select>
+ </td>
+
+ </tr>
+</table>
+
+<div><a id="a_svg_pcs" href="#" onclick="javascript:saveassvg_pcs();" class="btn btn-primary">Save as SVG</a></div>
+
+<div style="width: 1000px; text-align: center;"><h2>Pearson Correlation Scatterplot</h2></div>
+
+<div id="scatterplot2">
+ <svg id="svg_pcs" style="width: 1000px; height: 800px; margin-left: 10px;"></svg>
+</div>
+
+<br>
+
+<div class="alert alert-info" style="width: 200px; margin-left: 80px;">
+ y = {{'%0.3f' % jsdata.slope}} * x + {{'%0.3f' % jsdata.intercept}}
+</div>
+
+<br>
+
+<table class="table table-hover table-striped table-bordered" style="width: 200px; margin-left: 80px; text-align: right;">
+ <thead>
+ <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>
+ </thead>
<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>
+ <tr><td>Number</td> <td>{{jsdata.num_overlap}}</td></tr>
+ <tr><td>Slope</td> <td>{{'%0.3f' % jsdata.slope}}</td></tr>
+ <tr><td>Intercept</td> <td>{{'%0.3f' % jsdata.intercept}}</td></tr>
+ <tr><td>r value</td> <td>{{'%0.3f' % jsdata.r_value}}</td></tr>
+ <tr><td>P value</td> <td>{% if jsdata.p_value < 0.001 %}{{'%0.3e' % jsdata.p_value}}{% else %}{{'%0.3f' % jsdata.p_value}}{% endif %}</td></tr>
</tbody>
</table>
+ </div>
+
+ <div class="tab-pane" id="tp2">
+
+<br>
+<table class="table">
+ <tr>
+
+ <td>Width</td>
+ <td><input class="srchartupdatewh" id="srwidth" type="text" value="1000" style="width: 44px;"> px</td>
+
+ <td>Height</td>
+ <td><input class="srchartupdatewh" id="srheight" type="text" value="800" style="width: 44px;"> px</td>
+
+ <td>Size</td>
+ <td>
+ <select class="srchartupdatedata" id="srmarksize" style="width: 100px;">
+ <option value="0">0</option>
+ <option value="1">1</option>
+ <option value="2">2</option>
+ <option value="3">3</option>
+ <option value="4">4</option>
+ <option value="5" selected>5</option>
+ <option value="6">6</option>
+ <option value="7">7</option>
+ <option value="8">8</option>
+ <option value="9">9</option>
+ <option value="10">10</option>
+ </select>
+ </td>
+
+ <td>Shape</td>
+ <td>
+ <select class="srchartupdatedata" id="srmarkshape" style="width: 100px;">
+ <option value="circle" selected>Circle</option>
+ <option value="cross">Cross</option>
+ <option value="triangle-up">Triangle-up</option>
+ <option value="triangle-down">Triangle-down</option>
+ <option value="diamond">Diamond</option>
+ <option value="square">Square</option>
+ </select>
+ </td>
+
+ </tr>
+</table>
+
+<div><a id="a_svg_srcs" href="#" onclick="javascript:saveassvg_srcs();" class="btn btn-primary">Save as SVG</a></div>
+
+<div style="width: 1000px; text-align: center;"><h2>Spearman Rank Correlation Scatterplot</h2></div>
+
+<div id="srscatterplot2">
+ <svg id="svg_srcs" style="width: 1000px; height: 800px; margin-left: 10px;"></svg>
+</div>
+
+<br>
+
+<table class="table table-hover table-striped table-bordered" style="width: 200px; margin-left: 80px; text-align: right;">
+ <thead>
+ <tr><th style="text-align: right;">Statistic</th><th style="text-align: right;">Value</th></tr>
+ </thead>
+ <tbody>
+ <tr><td>Number</td> <td>{{jsdata.num_overlap}}</td></tr>
+ <tr><td>Slope</td> <td>{{'%0.3f' % jsdata.srslope}}</td></tr>
+ <tr><td>Intercept</td> <td>{{'%0.3f' % jsdata.srintercept}}</td></tr>
+ <tr><td>r value</td> <td>{{'%0.3f' % jsdata.srr_value}}</td></tr>
+ <tr><td>P value</td> <td>{% if jsdata.srp_value < 0.001 %}{{'%0.3e' % jsdata.srp_value}}{% else %}{{'%0.3f' % jsdata.srp_value}}{% endif %}</td></tr>
+ </tbody>
+</table>
+
+ </div>
+
+</div>
+
+</div>
+
{% endblock %}
{% block js %}
@@ -198,4 +287,5 @@ <script language="javascript" type="text/javascript" src="/static/new/javascript/colorbrewer.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
<script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot-2.js"></script>
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot-2_sr.js"></script>
{% endblock %}
|