From e53deda954a3fa99a20f804a0e0a7928fc6be9a9 Mon Sep 17 00:00:00 2001
From: Lei Yan
Date: Mon, 5 Mar 2018 22:50:28 +0000
Subject: update Correlation Scatterplot
---
.../wqflask/static/new/javascript/draw_corr_scatterplot-2.js | 12 +++++-------
1 file changed, 5 insertions(+), 7 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 bf0a14e6..cfde6f09 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -200,23 +200,21 @@ function saveassvg_srcs() {
drawg();
srdrawg();
-
-
$(".chartupdate").change(function () {
chartupdate();
});
$(".chartupdatewh").change(function () {
chartupdatewh();
+ chartupdate();
});
$(".chartupdatedata").change(function () {
chartupdatedata();
+ chartupdate();
});
$(document).ready(function(){
- //chartupdate();
-//chartupdatewh();
-chartupdatedata();
-//chartupdate();
-});
\ No newline at end of file
+ chartupdatedata();
+ chartupdate();
+});
--
cgit v1.2.3
From a3423b836a947eaa41e18077530587d2687944d4 Mon Sep 17 00:00:00 2001
From: Lei Yan
Date: Mon, 5 Mar 2018 23:03:25 +0000
Subject: rename draw_corr_scatterplot-2.js to draw_corr_scatterplot.js
---
.../new/javascript/draw_corr_scatterplot-2.js | 220 -------------------
.../static/new/javascript/draw_corr_scatterplot.js | 235 ++++++++++++++++++---
2 files changed, 204 insertions(+), 251 deletions(-)
delete mode 100644 wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
deleted file mode 100644
index cfde6f09..00000000
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ /dev/null
@@ -1,220 +0,0 @@
-var chart;
-var srchart;
-
-function drawg() {
- //
- chart = nv.models.scatterChart();
- //
- chart.showLegend(false);
- chart.duration(300);
- chart.color(d3.scale.category10().range());
- chart.pointRange([0, 400]);
- chart.pointDomain([0, 10]);
- //
- 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 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 '' + obj.point.name + " (" + obj.point.x + ', ' + obj.point.y + ')';
-}
-
-function getdata(size, shape) {
- 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],
- name: js_data.indIDs[j],
- size: size,
- shape: 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;
- if (cell >= 1) {
- return ",r";
- } else {
- cell = -Math.log(cell);
- n = cell.toString().split(".")[0].length;
- return ",.0" + n + "f";
- }
-}
-
-function chartupdate() {
- //
- var labelcolor = $("#labelcolor").val();
- $(".nvd3 .nv-axis.nv-x text").css("fill", labelcolor);
- $(".nvd3 .nv-axis.nv-y text").css("fill", labelcolor);
- //
- 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 numbercolor = $("#numbercolor").val();
- $("g.tick text").css("fill", numbercolor);
- //
- var numberfont = $("#numberfont").val();
- $("g.tick text").css("font-size", numberfont);
- //
- 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 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 linecolor = $("#linecolor").val();
- $("line.nv-regLine").css("stroke", linecolor);
- //
- var linewidth = $("#linewidth").val();
- $("line.nv-regLine").css("stroke-width", linewidth);
- //
- 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'));
-}
-
-function chartupdatedata() {
- //
- var size = $("#marksize").val();
- 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) {
- svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
- var svgData = svgEl.outerHTML;
- var preface = '\r\n';
- preface += '\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");
-}
-
-function saveassvg_srcs() {
- savesvg($("#svg_srcs")[0], "Spearman Rank Correlation Scatterplot.svg");
-}
-
-drawg();
-srdrawg();
-
-$(".chartupdate").change(function () {
- chartupdate();
-});
-
-$(".chartupdatewh").change(function () {
- chartupdatewh();
- chartupdate();
-});
-
-$(".chartupdatedata").change(function () {
- chartupdatedata();
- chartupdate();
-});
-
-$(document).ready(function(){
- chartupdatedata();
- chartupdate();
-});
diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js
index 28534709..cfde6f09 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js
@@ -1,47 +1,220 @@
-// Generated by CoffeeScript 1.8.0
-var data, h, halfh, halfw, indID, intercept, margin, mychart, slope, totalh, totalw, w;
+var chart;
+var srchart;
-h = 600;
+function drawg() {
+ //
+ chart = nv.models.scatterChart();
+ //
+ chart.showLegend(false);
+ chart.duration(300);
+ chart.color(d3.scale.category10().range());
+ chart.pointRange([0, 400]);
+ chart.pointDomain([0, 10]);
+ //
+ 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 tiptext(obj);
+ });
+}
-w = 800;
+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);
+ });
+}
-margin = {
- left: 80,
- top: 60,
- right: 40,
- bottom: 40,
- inner: 30
-};
+function tiptext(obj) {
+ return '' + obj.point.name + " (" + obj.point.x + ', ' + obj.point.y + ')';
+}
-halfh = h + margin.top + margin.bottom;
+function getdata(size, shape) {
+ 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],
+ name: js_data.indIDs[j],
+ size: size,
+ shape: shape
+ });
+ }
+ return data;
+}
-totalh = halfh * 2;
+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;
+ if (cell >= 1) {
+ return ",r";
+ } else {
+ cell = -Math.log(cell);
+ n = cell.toString().split(".")[0].length;
+ return ",.0" + n + "f";
+ }
+}
-halfw = w + margin.left + margin.right;
+function chartupdate() {
+ //
+ var labelcolor = $("#labelcolor").val();
+ $(".nvd3 .nv-axis.nv-x text").css("fill", labelcolor);
+ $(".nvd3 .nv-axis.nv-y text").css("fill", labelcolor);
+ //
+ 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 numbercolor = $("#numbercolor").val();
+ $("g.tick text").css("fill", numbercolor);
+ //
+ var numberfont = $("#numberfont").val();
+ $("g.tick text").css("font-size", numberfont);
+ //
+ 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 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 linecolor = $("#linecolor").val();
+ $("line.nv-regLine").css("stroke", linecolor);
+ //
+ var linewidth = $("#linewidth").val();
+ $("line.nv-regLine").css("stroke-width", linewidth);
+ //
+ var markcolor = $("#markcolor").val();
+ $(".nvd3 g path").css("fill", markcolor);
+}
-totalw = halfw * 2;
+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'));
+}
-mychart = scatterplot().xvar(0).yvar(1).xlab(js_data.trait_1).ylab(js_data.trait_2).height(h).width(w).margin(margin);
+function chartupdatedata() {
+ //
+ var size = $("#marksize").val();
+ 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);
+}
-data = js_data.data;
+function savesvg(svgEl, name) {
+ svgEl.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+ var svgData = svgEl.outerHTML;
+ var preface = '\r\n';
+ preface += '\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);
+}
-indID = js_data.indIDs;
+function saveassvg_pcs() {
+ savesvg($("#svg_pcs")[0], "Pearson Correlation Scatterplot.svg");
+}
-slope = js_data.slope;
+function saveassvg_srcs() {
+ savesvg($("#svg_srcs")[0], "Spearman Rank Correlation Scatterplot.svg");
+}
-intercept = js_data.intercept;
+drawg();
+srdrawg();
-console.log("THE DATA IS:", data);
+$(".chartupdate").change(function () {
+ chartupdate();
+});
+
+$(".chartupdatewh").change(function () {
+ chartupdatewh();
+ chartupdate();
+});
-d3.select("div#chart1").datum({
- data: data,
- indID: indID,
- slope: slope,
- intercept: intercept
-}).call(mychart);
+$(".chartupdatedata").change(function () {
+ chartupdatedata();
+ chartupdate();
+});
-mychart.pointsSelect().on("mouseover", function(d) {
- return d3.select(this).attr("r", mychart.pointsize() * 3);
-}).on("mouseout", function(d) {
- return d3.select(this).attr("r", mychart.pointsize());
+$(document).ready(function(){
+ chartupdatedata();
+ chartupdate();
});
--
cgit v1.2.3