diff options
3 files changed, 315 insertions, 72 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/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 '<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); +} + +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 @@ <h2>Correlation Scatterplot</h2> +<div style="margin-left: 0px;"> + + {% if trait_1.dataset.type == "ProbeSet" %} + <div> + X axis: + <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}"> + {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " " + trait_1.dataset.name + ": " + trait_1.name|string}} + </a> + </div> + <div> + [{{trait_1.symbol}} on {{trait_1.location_repr}} Mb] + {{trait_1.description_display}} + </div> + {% elif trait_1.dataset.type == "Publish" %} + <div> + X axis: + <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}"> + {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}} + </a> + </div> + <div> + <a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a> + {{trait_1.description_display}} + </div> + {% endif %} + + <br/> + + {% if trait_2.dataset.type == "ProbeSet" %} + <div> + Y axis: + <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}"> + {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " " + trait_2.dataset.name + ": " + trait_2.name|string}} + </a> + </div> + <div> + [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb] + {{trait_2.description_display}} + </div> + {% elif trait_2.dataset.type == "Publish" %} + <div> + Y axis: + <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}"> + {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}} + </a> + </div> + <div> + <a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a> + {{trait_2.description_display}} + </div> + {% endif %} + +</div> + +<br> + <table class="table"> <tr> - <td>Width</td> - <td><input class="chartupdatewh" id="width" type="text" value="1000" style="width: 44px;"> px</td> - <td>Axis X Color</td> <td><input class="chartupdate" id="axisxcolor" type="color" value="#000000"></td> @@ -38,6 +91,44 @@ <td>Correlation Line Color</td> <td><input class="chartupdate" id="clinecolor" 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> + + </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>Mark Size</td> <td> <select class="chartupdatedata" id="marksize" style="width: 100px;"> @@ -61,21 +152,6 @@ <td>Height</td> <td><input class="chartupdatewh" id="height" type="text" value="800" style="width: 44px;"> px</td> - <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>Mark Shape</td> <td> <select class="chartupdatedata" id="markshape" style="width: 100px;"> @@ -97,58 +173,70 @@ <br> -<div style="margin-left: 75px;"> - - {% if trait_1.dataset.type == "ProbeSet" %} - <div> - X axis: - <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}"> - {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.tissue + " " + trait_1.dataset.name + ": " + trait_1.name|string}} - </a> - </div> - <div> - [{{trait_1.symbol}} on {{trait_1.location_repr}} Mb] - {{trait_1.description_display}} - </div> - {% elif trait_1.dataset.type == "Publish" %} - <div> - X axis: - <a href="{{url_for('show_trait_page', trait_id = trait_1.name, dataset = trait_1.dataset.name)}}"> - {{trait_1.dataset.group.species + " " + trait_1.dataset.group.name + " " + trait_1.dataset.name + ": " + trait_1.name|string}} - </a> - </div> - <div> - <a href="{{trait_1.pubmed_link}}">PubMed: {{trait_1.pubmed_text}}</a> - {{trait_1.description_display}} - </div> - {% endif %} - - <br/> +<table class="table table-hover table-striped table-bordered" style="width: 200px; margin-left: 80px;"> + <thead> + <tr><th>Statistic</th><th>Value</th></tr> + </thead> + <tbody> + <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>{{'%0.3e' % jsdata.p_value}}</td></tr> + </tbody> +</table> - {% if trait_2.dataset.type == "ProbeSet" %} - <div> - Y axis: - <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}"> - {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.tissue + " " + trait_2.dataset.name + ": " + trait_2.name|string}} - </a> - </div> - <div> - [{{trait_2.symbol}} on {{trait_2.location_repr}} Mb] - {{trait_2.description_display}} - </div> - {% elif trait_2.dataset.type == "Publish" %} - <div> - Y axis: - <a href="{{url_for('show_trait_page', trait_id = trait_2.name, dataset = trait_2.dataset.name)}}"> - {{trait_2.dataset.group.species + " " + trait_2.dataset.group.name + " " + trait_2.dataset.name + ": " + trait_2.name|string}} - </a> - </div> - <div> - <a href="{{trait_2.pubmed_link}}">PubMed: {{trait_2.pubmed_text}}</a> - {{trait_2.description_display}} - </div> - {% endif %} + </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>Mark 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> + </tr> + <tr> + + <td>Height</td> + <td><input class="srchartupdatewh" id="srheight" type="text" value="800" style="width: 44px;"> px</td> + + <td>Mark 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 id="srscatterplot2"> + <svg style="width: 1000px; height: 800px; margin-left: 10px;"></svg> </div> <br> @@ -159,13 +247,19 @@ </thead> <tbody> <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>{{'%0.3e' % jsdata.p_value}}</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>{{'%0.3e' % jsdata.srp_value}}</td></tr> </tbody> </table> + </div> + +</div> + +</div> + {% endblock %} {% block js %} @@ -179,4 +273,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 %} |