aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorLei Yan2017-08-23 15:26:26 +0000
committerLei Yan2017-08-23 15:26:26 +0000
commit28a128b242af78941b7511e8f84ca5d61a19997c (patch)
treef524d767bbaf7819761ba0895b18ba6216bbedf2
parentf82a8114d973d4e85c8c38eecceff86aec55eed9 (diff)
downloadgenenetwork2-28a128b242af78941b7511e8f84ca5d61a19997c.tar.gz
Update corr scatterplot
-rw-r--r--wqflask/wqflask/correlation/corr_scatter_plot.py15
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js133
-rw-r--r--wqflask/wqflask/templates/corr_scatterplot.html239
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 %}