aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--wqflask/wqflask/static/new/css/corr_scatter_plot2.css39
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js122
-rw-r--r--wqflask/wqflask/templates/corr_scatterplot.html26
3 files changed, 100 insertions, 87 deletions
diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
index 92e777c2..5aa9b9bf 100644
--- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
@@ -1,19 +1,40 @@
.nvd3 .nv-axis.nv-x text {
- font-size: 16px;
- font-weight: normal;
- fill: black;
+ font-size: 16px;
+ font-weight: normal;
+ fill: black;
}
.nvd3 .nv-axis.nv-y text {
- font-size: 16px;
- font-weight: normal;
- fill: black;
+ font-size: 16px;
+ font-weight: normal;
+ fill:black;
}
-.nv-y .tick.zero line {
- stroke: black;
+.nv-x .nv-axis g path.domain {
+ stroke: black;
+ stroke-width: 2;
}
.nv-y .nv-axis g path.domain {
- stroke: black;
+ stroke: black;
+ stroke-width: 2;
+}
+
+.nvd3 .nv-axis.nv-x path.domain {
+ stroke-opacity: 1;
+}
+
+.nvd3 .nv-axis.nv-y path.domain {
+ stroke-opacity: 1;
+}
+
+line.nv-regLine {
+ stroke: red !important;
+}
+
+.nv-axisMin-x,
+.nv-axisMax-x,
+.nv-axisMin-y,
+.nv-axisMax-y {
+ display: none;
}
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 7a5a86bd..96763aca 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -1,74 +1,64 @@
var chart;
nv.addGraph(function() {
- //
- chart = nv.models.scatterChart();
- //
- chart.showLegend(false);
- chart.duration(300);
- chart.color(d3.scale.category10().range());
- chart.pointRange([200,0]);
- //
- // chart.showDistX(true);
- // chart.showDistY(true);
- chart.xAxis.tickFormat(d3.format('.02f'));
- chart.yAxis.tickFormat(d3.format('.02f'));
- // chart.showXAxis(false);
- // chart.showYAxis(false);
- chart.xAxis.axisLabel(js_data.trait_1);
- chart.yAxis.axisLabel(js_data.trait_2);
- //
- xmin = d3.min(js_data.data[0]);
- xmax = d3.max(js_data.data[0]);
- xrange = xmax - xmin;
- ymin = d3.min(js_data.data[1]);
- ymax = d3.max(js_data.data[1]);
- yrange = ymax - ymin;
- chart.xDomain([xmin - xrange/10, xmax + xrange/10]);
- chart.yDomain([ymin - yrange/10, ymax + yrange/10]);
- //
- d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart);
- nv.utils.windowResize(chart.update);
- return chart;
+ //
+ chart = nv.models.scatterChart();
+ //
+ chart.showLegend(false);
+ chart.duration(300);
+ chart.color(d3.scale.category10().range());
+ chart.pointRange([200,0]);
+ //
+ chart.xAxis.axisLabel(js_data.trait_1);
+ chart.xAxis.axisLabelDistance(11);
+ chart.yAxis.axisLabel(js_data.trait_2);
+ chart.yAxis.axisLabelDistance(11);
+ //
+ xmin = d3.min(js_data.data[0]);
+ xmax = d3.max(js_data.data[0]);
+ xrange = xmax - xmin;
+ ymin = d3.min(js_data.data[1]);
+ ymax = d3.max(js_data.data[1]);
+ yrange = ymax - ymin;
+ chart.xDomain([xmin - xrange/10, xmax + xrange/10]);
+ chart.yDomain([ymin - yrange/10, ymax + yrange/10]);
+ chart.xAxis.tickFormat(d3.format(checkformat(xrange)));
+ 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>';
+ });
+ //
+ d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart);
+ nv.utils.windowResize(chart.update);
+ return chart;
});
function getdata () {
- var data = [];
- data.push({
- values: [],
- slope: js_data.slope,
- intercept: js_data.intercept
- });
- for (j = 0; j < js_data.data[0].length; j++) {
- data[0].values.push({
- x: js_data.data[0][j],
- y: js_data.data[1][j],
- size: 10,
- shape: 'circle'
- });
- }
- return data;
+ var data = [];
+ data.push({
+ values: [],
+ slope: js_data.slope,
+ intercept: js_data.intercept
+ });
+ for (j = 0; j < js_data.data[0].length; j++) {
+ data[0].values.push({
+ x: js_data.data[0][j],
+ y: js_data.data[1][j],
+ size: 10,
+ shape: 'circle'
+ });
+ }
+ return data;
}
-
-function randomData(groups, points) {
- var data = [],
- shapes = ['circle'],
- random = d3.random.normal();
- for (i = 0; i < groups; i++) {
- data.push({
- key: 'Group ' + i,
- values: [],
- slope: Math.random() - .01,
- intercept: Math.random() - .5
- });
- for (j = 0; j < points; j++) {
- data[i].values.push({
- x: random(),
- y: random(),
- size: Math.random(),
- shape: shapes[j % shapes.length]
- });
- }
- }
- return data;
+
+function checkformat (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";
+ }
}
diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html
index 4464025e..05891c95 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -53,16 +53,6 @@
<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>
@@ -85,12 +75,12 @@
-->
<div id="scatterplot2">
- <svg style="width: 1000px; height: 800px;"></svg>
+ <svg style="width: 1000px; height: 800px; margin-left: 10px;"></svg>
</div>
<br>
-<div style="margin-left: 75px;">
+<div style="margin-left: 80px;">
{% if trait_1.dataset.type == "ProbeSet" %}
<div>
@@ -144,6 +134,18 @@
</div>
+<br>
+
+<table class="table table-hover table-striped table-bordered" style="width: 250px; margin-left: 80px;">
+ <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>
+ </tbody>
+</table>
+
{% endblock %}
{% block js %}
generated by cgit v1.2.3 (git 2.44.0) at 2024-11-30 01:31:55 +0000