aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js130
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2_sr.js137
-rw-r--r--wqflask/wqflask/templates/corr_scatterplot.html176
3 files changed, 151 insertions, 292 deletions
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 '<b style="font-size: 18px">(' + obj.point.x + ', ' + obj.point.y + ')</b>';
- return '<b style="font-size: 18px">' + obj.point.name + '</b>';
+ 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 '<b style="font-size: 18px">' + obj.point.name + " (" + obj.point.x + ', ' + obj.point.y + ')</b>';
+}
+
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 '<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 fb2bd55c..bb509270 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -75,72 +75,16 @@
<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>
+ <td style="vertical-align: middle;">Width <input class="chartupdatewh" id="width" type="text" value="1000" style="width: 44px; height: 22px;"> px</td>
+ <td style="vertical-align: middle;">Height <input class="chartupdatewh" id="height" type="text" value="800" style="width: 44px; height: 22px;"> 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;">
+ <tr>
+ <td style="vertical-align: middle;">Mark
+ <input class="chartupdate" id="markcolor" type="color" value="#8fbbda">
+ <select class="chartupdatedata" id="marksize" style="width: 44px; height: 22px;">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
@@ -152,12 +96,12 @@
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
+ <option value="15">15</option>
+ <option value="20">20</option>
+ <option value="25">25</option>
+ <option value="30">30</option>
</select>
- </td>
-
- <td>Shape</td>
- <td>
- <select class="chartupdatedata" id="markshape" style="width: 100px;">
+ <select class="chartupdatedata" id="markshape" style="width: 100px; height: 22px;">
<option value="circle" selected>Circle</option>
<option value="cross">Cross</option>
<option value="triangle-up">Triangle-up</option>
@@ -166,23 +110,47 @@
<option value="square">Square</option>
</select>
</td>
-
- </tr>
+ </tr>
</table>
-<div><a id="a_svg_pcs" href="#" onclick="javascript:saveassvg_pcs();" class="btn btn-primary">Save as SVG</a></div>
+<table class="table">
+ <tr>
+ <td style="vertical-align: middle;">Label
+ <input class="chartupdate" id="labelcolor" type="color" value="#000000">
+ <input class="chartupdate" id="labelfont" type="text" value="16" style="width: 44px; height: 22px;"> px
+ </td>
+ <td style="vertical-align: middle;">Number
+ <input class="chartupdate" id="numbercolor" type="color" value="#000000">
+ <input class="chartupdate" id="numberfont" type="text" value="16" style="width: 44px; height: 22px;"> px
+ </td>
+ <td style="vertical-align: middle;">Axis
+ <input class="chartupdate" id="axiscolor" type="color" value="#000000">
+ <input class="chartupdate" id="axiswidth" type="text" value="2" style="width: 44px; height: 22px;"> px
+ </td>
+ <td style="vertical-align: middle;">Line
+ <input class="chartupdate" id="linecolor" type="color" value="#8fbbda">
+ <input class="chartupdate" id="linewidth" type="text" value="1" style="width: 44px; height: 22px;"> px
+ </td>
+ </tr>
+</table>
-<div style="width: 1000px; text-align: center;"><h2>Pearson Correlation Scatterplot</h2></div>
+<br>
-<div id="scatterplot2">
- <svg id="svg_pcs" style="width: 1000px; height: 800px; margin-left: 10px;"></svg>
-</div>
+<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>
-<div class="alert alert-info" style="width: 200px; margin-left: 80px;">
- y = {{'%0.3f' % jsdata.slope}} * x + {{'%0.3f' % jsdata.intercept}}
-</div>
+<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>
@@ -196,6 +164,13 @@
<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>
+ <tr>
+ <td style="text-align: left;" colspan="2">
+ Regression Line
+ <br>
+ y = {{'%0.3f' % jsdata.slope}} * x + {{'%0.3f' % jsdata.intercept}}
+ </td>
+ </tr>
</tbody>
</table>
@@ -204,54 +179,12 @@
<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>
+<div id="srscatterplot2"><svg id="svg_srcs" style="width: 1000px; height: 800px; margin-left: 10px;"></svg></div>
<br>
@@ -287,5 +220,4 @@
<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 %}
generated by cgit v1.2.3 (git 2.44.0) at 2024-10-19 22:23:56 +0000