aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorzsloan2016-11-29 00:00:37 +0000
committerzsloan2016-11-29 00:00:37 +0000
commit2b6033c3fba3ee2eba195122018011de9c11479f (patch)
tree77d949ded38399731ba0f758e384f43c87bb547b
parentc902f1817275dba8868904f2925c3b3f70b59a15 (diff)
downloadgenenetwork2-2b6033c3fba3ee2eba195122018011de9c11479f.tar.gz
Fixed loadings plot so it looks like the GN1 figure
-rw-r--r--wqflask/wqflask/static/new/javascript/loadings_plot.js98
1 files changed, 98 insertions, 0 deletions
diff --git a/wqflask/wqflask/static/new/javascript/loadings_plot.js b/wqflask/wqflask/static/new/javascript/loadings_plot.js
new file mode 100644
index 00000000..5bc901ec
--- /dev/null
+++ b/wqflask/wqflask/static/new/javascript/loadings_plot.js
@@ -0,0 +1,98 @@
+var margin = {top: 20, right: 60, bottom: 60, left: 60}
+ , width = 960 - margin.left - margin.right
+ , height = 500 - margin.top - margin.bottom;
+
+var x = d3.scale.linear()
+ .domain([d3.min(loadings, function(d) { return d[0]; }) + 0.1*d3.min(loadings, function(d) { return d[0]; }), d3.max(loadings, function(d) { return d[0]; })])
+ .range([ 0, width ]);
+
+var y = d3.scale.linear()
+ .domain([d3.min(loadings, function(d) { return d[1]; }) + 0.1*d3.min(loadings, function(d) { return d[1]; }), d3.max(loadings, function(d) { return d[1]; })])
+ .range([ height, 0 ]);
+
+var chart = d3.select('#loadings_plot')
+ .append('svg:svg')
+ .attr('width', width + margin.right + margin.left)
+ .attr('height', height + margin.top + margin.bottom)
+ .attr('class', 'chart')
+
+var main = chart.append('g')
+ .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
+ .attr('width', width)
+ .attr('height', height)
+ .attr('class', 'main')
+
+// draw the x axis
+var xAxis = d3.svg.axis()
+ .scale(x)
+ .orient('bottom');
+
+main.append('g')
+ .attr('transform', 'translate(0,' + height + ')')
+ .attr('class', 'main axis date')
+ .call(xAxis);
+
+chart.append("text")
+ .attr("class", "x label")
+ .attr("text-anchor", "end")
+ .attr("x", 550)
+ .attr("y", 480)
+ .style("font-size", 14)
+ .text("Factor (1)");
+
+chart.append("text")
+ .attr("class", "y label")
+ .attr("text-anchor", "end")
+ .attr("x", -200)
+ .attr("y", 5)
+ .attr("dy", ".75em")
+ .attr("transform", "rotate(-90)")
+ .style("font-size", 14)
+ .text("Factor (2)");
+
+// draw the y axis
+var yAxis = d3.svg.axis()
+ .scale(y)
+ .orient('left');
+
+main.append('g')
+ .attr('transform', 'translate(0,0)')
+ .attr('class', 'main axis date')
+ .call(yAxis);
+
+var g = main.append("svg:g");
+
+g.selectAll("scatter-dots")
+ .data(loadings)
+ .enter().append("svg:circle")
+ .attr("cx", function (d,i) { return x(d[0]); } )
+ .attr("cy", function (d) { return y(d[1]); } )
+ .attr("r", 4)
+ .style("fill", "blue");
+
+traits_and_loadings = []
+for (i = 0; i < js_data.traits.length; i++) {
+ this_trait_loadings = []
+ this_trait_loadings[0] = js_data.traits[i]
+ this_trait_loadings[1] = [loadings[i][0], loadings[i][1]]
+ traits_and_loadings[i] = this_trait_loadings
+}
+
+g.selectAll("scatter-dots")
+ .data(traits_and_loadings)
+ .enter().append("text")
+ .attr("x", function(d, i) { return x(d[1][0]); })
+ .attr("y", function(d) { return y(d[1][1]); })
+ .text(function(d) { return d[0]; })
+ .style("fill", "blue");
+
+g.selectAll("scatter-lines")
+ .data(loadings)
+ .enter().append("svg:line")
+ .attr("x1", x(0))
+ .attr("y1", y(0))
+ .attr("x2", function (d,i) {return x(d[0]); } )
+ .attr("y2", function (d) { return y(d[1]); } )
+ .attr("stroke-width", 1)
+ .attr("stroke", "red");
+ \ No newline at end of file