From 255aace685b7919808e93ad3c8c47334b0496eb9 Mon Sep 17 00:00:00 2001
From: Lei Yan
Date: Wed, 2 Aug 2017 22:45:45 +0000
Subject: Update Correlation Scatterplot parameters
---
.../wqflask/static/new/css/corr_scatter_plot2.css | 5 +-
.../new/javascript/draw_corr_scatterplot-2.js | 93 +++++++++++++---
wqflask/wqflask/templates/corr_scatterplot.html | 119 ++++++++++++---------
3 files changed, 152 insertions(+), 65 deletions(-)
(limited to 'wqflask')
diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
index 5aa9b9bf..a2ebb252 100644
--- a/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
+++ b/wqflask/wqflask/static/new/css/corr_scatter_plot2.css
@@ -7,7 +7,7 @@
.nvd3 .nv-axis.nv-y text {
font-size: 16px;
font-weight: normal;
- fill:black;
+ fill: black;
}
.nv-x .nv-axis g path.domain {
@@ -29,7 +29,8 @@
}
line.nv-regLine {
- stroke: red !important;
+ stroke: red;
+ stroke-width: 1;
}
.nv-axisMin-x,
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 96763aca..1fb17bf0 100644
--- a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
+++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot-2.js
@@ -1,13 +1,14 @@
var chart;
-nv.addGraph(function() {
+function drawg () {
//
chart = nv.models.scatterChart();
//
chart.showLegend(false);
chart.duration(300);
chart.color(d3.scale.category10().range());
- chart.pointRange([200,0]);
+ chart.pointRange([0, 400]);
+ chart.pointDomain([0, 10]);
//
chart.xAxis.axisLabel(js_data.trait_1);
chart.xAxis.axisLabelDistance(11);
@@ -26,15 +27,12 @@ nv.addGraph(function() {
chart.yAxis.tickFormat(d3.format(checkformat(yrange)));
//
chart.tooltip.contentGenerator(function (obj) {
- return '(' + obj.point.x + ', ' + obj.point.y + ')';
+ // return '(' + obj.point.x + ', ' + obj.point.y + ')';
+ return '(' + obj.point.name + ')';
});
- //
- d3.select('#scatterplot2 svg').datum(nv.log(getdata())).call(chart);
- nv.utils.windowResize(chart.update);
- return chart;
-});
+}
-function getdata () {
+function getdata(size, shape) {
var data = [];
data.push({
values: [],
@@ -45,14 +43,15 @@ function getdata () {
data[0].values.push({
x: js_data.data[0][j],
y: js_data.data[1][j],
- size: 10,
- shape: 'circle'
+ name: js_data.indIDs[j],
+ size: size,
+ shape: shape
});
}
return data;
}
-function checkformat (range) {
+function checkformat(range) {
cell = range / 10.0;
if (cell >= 1) {
return ",r";
@@ -62,3 +61,73 @@ function checkformat (range) {
return ",.0" + n + "f";
}
}
+
+function chartupdate() {
+ //
+ 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 chartupdatewh() {
+ //
+ var width = $("#width").val();
+ $("#scatterplot2 svg").css("width", width);
+ //
+ var height = $("#height").val();
+ $("#scatterplot2 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);
+ nv.utils.windowResize(chart.update);
+}
+
+drawg();
+chartupdate();
+chartupdatewh();
+chartupdatedata();
+
+$(".chartupdate").change(function () {
+ chartupdate();
+});
+
+$(".chartupdatewh").change(function () {
+ chartupdatewh();
+});
+
+$(".chartupdatedata").change(function () {
+ chartupdatedata();
+});
diff --git a/wqflask/wqflask/templates/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html
index b4525718..b62df32f 100644
--- a/wqflask/wqflask/templates/corr_scatterplot.html
+++ b/wqflask/wqflask/templates/corr_scatterplot.html
@@ -12,67 +12,84 @@
{% endblock %}
{% block content %}
-
+
Correlation Scatterplot
-
--
cgit v1.2.3