Fixed loadings plot so it looks like the GN1 figure

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