diff options
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/loadings_plot.js | 98 |
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 |