From 84bd7376678f79a5e25aa458c649c8d6f065e360 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Fri, 22 Nov 2013 22:39:41 +0000 Subject: Add color picker --- wqflask/wqflask/correlation/corr_scatter_plot.py | 4 +- wqflask/wqflask/templates/corr_scatter_plot.html | 84 ++++++++++++++++++------ 2 files changed, 66 insertions(+), 22 deletions(-) (limited to 'wqflask') diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py index dd98c7d5..f7fbffd2 100644 --- a/wqflask/wqflask/correlation/corr_scatter_plot.py +++ b/wqflask/wqflask/correlation/corr_scatter_plot.py @@ -29,7 +29,7 @@ class CorrScatterPlot(object): try: circle_color = params['circle_color'] except: - circle_color = 'steelblue' + circle_color = '#3D85C6' self.circle_color = circle_color try: @@ -41,7 +41,7 @@ class CorrScatterPlot(object): try: line_color = params['line_color'] except: - line_color = 'red' + line_color = '#FF0000' self.line_color = line_color try: diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html index dd9168a8..490024ec 100644 --- a/wqflask/wqflask/templates/corr_scatter_plot.html +++ b/wqflask/wqflask/templates/corr_scatter_plot.html @@ -6,6 +6,7 @@ + {% endblock %} {% block content %} @@ -25,24 +26,12 @@ - - - - - - - - - - + + + + + + @@ -51,9 +40,64 @@ {% block js %} + js_data = {{ js_data | safe }}; + + + {% endblock %} \ No newline at end of file -- cgit v1.2.3 From e07da192b37ac6ff35e06c0be2884be44a9840f7 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Wed, 18 Dec 2013 20:53:41 +0000 Subject: Add a coffee script file for correlation scatter plot function. --- .../static/new/javascript/corr_scatter_plot.coffee | 61 ++++++ .../static/new/javascript/corr_scatter_plot.js | 215 ++++++++++----------- 2 files changed, 161 insertions(+), 115 deletions(-) create mode 100644 wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee (limited to 'wqflask') diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee new file mode 100644 index 00000000..92a5c600 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee @@ -0,0 +1,61 @@ +data = new Array() +samples_1 = js_data.samples_1 +samples_2 = js_data.samples_2 +i = 0 +for samplename of samples_1 + sample1 = samples_1[samplename] + sample2 = samples_2[samplename] + data[i++] = [sample1.value, sample2.value] +margin = + top: 100 + right: 15 + bottom: 60 + left: 60 + +width = js_data.width - margin.left - margin.right +height = js_data.height - margin.top - margin.bottom +minx = d3.min(data, (d) -> + d[0] +) * 0.95 +maxx = d3.max(data, (d) -> + d[0] +) * 1.05 +miny = d3.min(data, (d) -> + d[1] +) * 0.95 +maxy = d3.max(data, (d) -> + d[1] +) * 1.05 +x = d3.scale.linear().domain([minx, maxx]).range([0, width]) +y = d3.scale.linear().domain([miny, maxy]).range([height, 0]) +chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart") +main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main") + +# draw the x axis +xAxis = d3.svg.axis().scale(x).orient("bottom") +main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call xAxis + +# draw the y axis +yAxis = d3.svg.axis().scale(y).orient("left") +main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call yAxis +g = main.append("svg:g") +g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", (d) -> + x d[0] +).attr("cy", (d) -> + y d[1] +).attr("fill", js_data.circle_color).attr "r", js_data.circle_radius +main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style "stroke-width", js_data.line_width +chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text "Sample Correlation Scatterplot" +text = "" +text += "N=" + js_data.num_overlap +chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text text +text = "" +text += "r=" + js_data.r_value + "\t" +text += "p(r)=" + js_data.p_value +chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text text +text = "" +text += "slope=" + js_data.slope + "\t" +text += "intercept=" + js_data.intercept +chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text text +chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text js_data.trait_1 +chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text js_data.trait_2 diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js index 26132492..4b34a09b 100644 --- a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js +++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js @@ -1,115 +1,100 @@ -var data = new Array(); -samples_1 = js_data.samples_1; -samples_2 = js_data.samples_2; -i = 0; -for (var samplename in samples_1){ - sample1 = samples_1[samplename]; - sample2 = samples_2[samplename]; - data[i++] = [sample1.value, sample2.value]; -} - - var margin = {top: 100, right: 15, bottom: 60, left: 60}; - var width = js_data.width - margin.left - margin.right; - var height = js_data.height - margin.top - margin.bottom; - - minx = d3.min(data, function(d){return d[0];})*0.95; - maxx = d3.max(data, function(d){return d[0];})*1.05; - miny = d3.min(data, function(d){return d[1];})*0.95; - maxy = d3.max(data, function(d){return d[1];})*1.05; - - var x = d3.scale.linear() - .domain([minx, maxx]) - .range([0, width]); - - var y = d3.scale.linear() - .domain([miny, maxy]) - .range([height, 0]); - - var chart = d3.select('#scatter_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); - - // 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(data) - .enter().append("svg:circle") - .attr("cx", function (d) { return x(d[0]); } ) - .attr("cy", function (d) { return y(d[1]); } ) - .attr("fill", js_data.circle_color) - .attr("r", js_data.circle_radius); - - main.append('line') - .attr('x1', x(minx)) - .attr('y1', y(js_data.slope*minx+js_data.intercept)) - .attr('x2', x(maxx*0.995)) - .attr('y2', y(js_data.slope*maxx*0.995+js_data.intercept)) - .style('stroke', js_data.line_color) - .style('stroke-width', js_data.line_width); - - chart.append("text") - .attr("x", width/2) - .attr("y", margin.top/2-25) - .text("Sample Correlation Scatterplot"); - - text = ""; - text += "N=" + js_data.num_overlap; - chart.append("text") - .attr("x", margin.left) - .attr("y", margin.top/2-5) - .text(text); - - text = ""; - text += "r=" + js_data.r_value + "\t"; - text += "p(r)=" + js_data.p_value; - chart.append("text") - .attr("x", margin.left) - .attr("y", margin.top/2+15) - .text(text); - - text = ""; - text += "slope=" + js_data.slope + "\t"; - text += "intercept=" + js_data.intercept; - chart.append("text") - .attr("x", margin.left) - .attr("y", margin.top/2+35) - .text(text); - - chart.append("text") - .attr("x", width/2) - .attr("y", height+margin.top+35) - .text(js_data.trait_1); - - chart.append("text") - .attr("x", 20) - .attr("y", height/2+margin.top+30) - .attr('transform', 'rotate(-90 20,' + (height/2+margin.top+30) + ')') - .text(js_data.trait_2); +// Generated by CoffeeScript 1.6.1 +(function() { + var chart, data, g, height, i, main, margin, maxx, maxy, minx, miny, sample1, sample2, samplename, samples_1, samples_2, text, width, x, xAxis, y, yAxis; + + data = new Array(); + + samples_1 = js_data.samples_1; + + samples_2 = js_data.samples_2; + + i = 0; + + for (samplename in samples_1) { + sample1 = samples_1[samplename]; + sample2 = samples_2[samplename]; + data[i++] = [sample1.value, sample2.value]; + } + + margin = { + top: 100, + right: 15, + bottom: 60, + left: 60 + }; + + width = js_data.width - margin.left - margin.right; + + height = js_data.height - margin.top - margin.bottom; + + minx = d3.min(data, function(d) { + return d[0]; + }) * 0.95; + + maxx = d3.max(data, function(d) { + return d[0]; + }) * 1.05; + + miny = d3.min(data, function(d) { + return d[1]; + }) * 0.95; + + maxy = d3.max(data, function(d) { + return d[1]; + }) * 1.05; + + x = d3.scale.linear().domain([minx, maxx]).range([0, width]); + + y = d3.scale.linear().domain([miny, maxy]).range([height, 0]); + + chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart"); + + main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main"); + + xAxis = d3.svg.axis().scale(x).orient("bottom"); + + main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call(xAxis); + + yAxis = d3.svg.axis().scale(y).orient("left"); + + main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call(yAxis); + + g = main.append("svg:g"); + + g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", function(d) { + return x(d[0]); + }).attr("cy", function(d) { + return y(d[1]); + }).attr("fill", js_data.circle_color).attr("r", js_data.circle_radius); + + main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style("stroke-width", js_data.line_width); + + chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text("Sample Correlation Scatterplot"); + + text = ""; + + text += "N=" + js_data.num_overlap; + + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text(text); + + text = ""; + + text += "r=" + js_data.r_value + "\t"; + + text += "p(r)=" + js_data.p_value; + + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text(text); + + text = ""; + + text += "slope=" + js_data.slope + "\t"; + + text += "intercept=" + js_data.intercept; + + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text(text); + + chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text(js_data.trait_1); + + chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text(js_data.trait_2); + +}).call(this); -- cgit v1.2.3 From 7e8aa8f8531d8796ed52caea18451f558633bb36 Mon Sep 17 00:00:00 2001 From: Lei Yan Date: Fri, 24 Jan 2014 20:21:32 +0000 Subject: Committer: Lei Yan On branch master --- .../static/new/javascript/corr_scatter_plot.coffee | 122 ++++++++------- .../static/new/javascript/corr_scatter_plot.js | 169 +++++++++------------ .../new/javascript/dataset_select_menu.coffee | 2 +- .../static/new/javascript/dataset_select_menu.js | 2 +- .../wqflask/static/new/javascript/show_corr.coffee | 4 + wqflask/wqflask/static/new/javascript/show_corr.js | 11 ++ wqflask/wqflask/templates/corr_scatter_plot.html | 3 +- 7 files changed, 156 insertions(+), 157 deletions(-) create mode 100644 wqflask/wqflask/static/new/javascript/show_corr.coffee create mode 100644 wqflask/wqflask/static/new/javascript/show_corr.js (limited to 'wqflask') diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee index 92a5c600..29a0e8f7 100644 --- a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee +++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.coffee @@ -1,61 +1,67 @@ -data = new Array() -samples_1 = js_data.samples_1 -samples_2 = js_data.samples_2 -i = 0 -for samplename of samples_1 - sample1 = samples_1[samplename] - sample2 = samples_2[samplename] - data[i++] = [sample1.value, sample2.value] -margin = - top: 100 - right: 15 - bottom: 60 - left: 60 +root = exports ? this -width = js_data.width - margin.left - margin.right -height = js_data.height - margin.top - margin.bottom -minx = d3.min(data, (d) -> - d[0] -) * 0.95 -maxx = d3.max(data, (d) -> - d[0] -) * 1.05 -miny = d3.min(data, (d) -> - d[1] -) * 0.95 -maxy = d3.max(data, (d) -> - d[1] -) * 1.05 -x = d3.scale.linear().domain([minx, maxx]).range([0, width]) -y = d3.scale.linear().domain([miny, maxy]).range([height, 0]) -chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart") -main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main") +class Scatter_Plot + constructor: () -> + data = new Array() + samples_1 = js_data.samples_1 + samples_2 = js_data.samples_2 + i = 0 + for samplename of samples_1 + sample1 = samples_1[samplename] + sample2 = samples_2[samplename] + data[i++] = [sample1.value, sample2.value] + margin = + top: 100 + right: 15 + bottom: 60 + left: 60 -# draw the x axis -xAxis = d3.svg.axis().scale(x).orient("bottom") -main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call xAxis + width = js_data.width - margin.left - margin.right + height = js_data.height - margin.top - margin.bottom + minx = d3.min(data, (d) -> + d[0] + ) * 0.95 + maxx = d3.max(data, (d) -> + d[0] + ) * 1.05 + miny = d3.min(data, (d) -> + d[1] + ) * 0.95 + maxy = d3.max(data, (d) -> + d[1] + ) * 1.05 + x = d3.scale.linear().domain([minx, maxx]).range([0, width]) + y = d3.scale.linear().domain([miny, maxy]).range([height, 0]) + chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart") + main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main") -# draw the y axis -yAxis = d3.svg.axis().scale(y).orient("left") -main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call yAxis -g = main.append("svg:g") -g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", (d) -> - x d[0] -).attr("cy", (d) -> - y d[1] -).attr("fill", js_data.circle_color).attr "r", js_data.circle_radius -main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style "stroke-width", js_data.line_width -chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text "Sample Correlation Scatterplot" -text = "" -text += "N=" + js_data.num_overlap -chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text text -text = "" -text += "r=" + js_data.r_value + "\t" -text += "p(r)=" + js_data.p_value -chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text text -text = "" -text += "slope=" + js_data.slope + "\t" -text += "intercept=" + js_data.intercept -chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text text -chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text js_data.trait_1 -chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text js_data.trait_2 + # draw the x axis + xAxis = d3.svg.axis().scale(x).orient("bottom") + main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call xAxis + + # draw the y axis + yAxis = d3.svg.axis().scale(y).orient("left") + main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call yAxis + g = main.append("svg:g") + g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", (d) -> + x d[0] + ).attr("cy", (d) -> + y d[1] + ).attr("fill", js_data.circle_color).attr "r", js_data.circle_radius + main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style "stroke-width", js_data.line_width + chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text "Sample Correlation Scatterplot" + text = "" + text += "N=" + js_data.num_overlap + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text text + text = "" + text += "r=" + js_data.r_value + "\t" + text += "p(r)=" + js_data.p_value + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text text + text = "" + text += "slope=" + js_data.slope + "\t" + text += "intercept=" + js_data.intercept + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text text + chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text js_data.trait_1 + chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text js_data.trait_2 + +root.Scatter_Plot = Scatter_Plot diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js index 4b34a09b..df1e62b6 100644 --- a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js +++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js @@ -1,100 +1,77 @@ // Generated by CoffeeScript 1.6.1 (function() { - var chart, data, g, height, i, main, margin, maxx, maxy, minx, miny, sample1, sample2, samplename, samples_1, samples_2, text, width, x, xAxis, y, yAxis; - - data = new Array(); - - samples_1 = js_data.samples_1; - - samples_2 = js_data.samples_2; - - i = 0; - - for (samplename in samples_1) { - sample1 = samples_1[samplename]; - sample2 = samples_2[samplename]; - data[i++] = [sample1.value, sample2.value]; - } - - margin = { - top: 100, - right: 15, - bottom: 60, - left: 60 - }; - - width = js_data.width - margin.left - margin.right; - - height = js_data.height - margin.top - margin.bottom; - - minx = d3.min(data, function(d) { - return d[0]; - }) * 0.95; - - maxx = d3.max(data, function(d) { - return d[0]; - }) * 1.05; - - miny = d3.min(data, function(d) { - return d[1]; - }) * 0.95; - - maxy = d3.max(data, function(d) { - return d[1]; - }) * 1.05; - - x = d3.scale.linear().domain([minx, maxx]).range([0, width]); - - y = d3.scale.linear().domain([miny, maxy]).range([height, 0]); - - chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart"); - - main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main"); - - xAxis = d3.svg.axis().scale(x).orient("bottom"); - - main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call(xAxis); - - yAxis = d3.svg.axis().scale(y).orient("left"); - - main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call(yAxis); - - g = main.append("svg:g"); - - g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", function(d) { - return x(d[0]); - }).attr("cy", function(d) { - return y(d[1]); - }).attr("fill", js_data.circle_color).attr("r", js_data.circle_radius); - - main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style("stroke-width", js_data.line_width); - - chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text("Sample Correlation Scatterplot"); - - text = ""; - - text += "N=" + js_data.num_overlap; - - chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text(text); - - text = ""; - - text += "r=" + js_data.r_value + "\t"; - - text += "p(r)=" + js_data.p_value; - - chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text(text); - - text = ""; - - text += "slope=" + js_data.slope + "\t"; - - text += "intercept=" + js_data.intercept; - - chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text(text); - - chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text(js_data.trait_1); - - chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text(js_data.trait_2); + var Scatter_Plot, root; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; + + Scatter_Plot = (function() { + + function Scatter_Plot() { + var chart, data, g, height, i, main, margin, maxx, maxy, minx, miny, sample1, sample2, samplename, samples_1, samples_2, text, width, x, xAxis, y, yAxis; + data = new Array(); + samples_1 = js_data.samples_1; + samples_2 = js_data.samples_2; + i = 0; + for (samplename in samples_1) { + sample1 = samples_1[samplename]; + sample2 = samples_2[samplename]; + data[i++] = [sample1.value, sample2.value]; + } + margin = { + top: 100, + right: 15, + bottom: 60, + left: 60 + }; + width = js_data.width - margin.left - margin.right; + height = js_data.height - margin.top - margin.bottom; + minx = d3.min(data, function(d) { + return d[0]; + }) * 0.95; + maxx = d3.max(data, function(d) { + return d[0]; + }) * 1.05; + miny = d3.min(data, function(d) { + return d[1]; + }) * 0.95; + maxy = d3.max(data, function(d) { + return d[1]; + }) * 1.05; + x = d3.scale.linear().domain([minx, maxx]).range([0, width]); + y = d3.scale.linear().domain([miny, maxy]).range([height, 0]); + chart = d3.select("#scatter_plot").append("svg:svg").attr("width", width + margin.right + margin.left).attr("height", height + margin.top + margin.bottom).attr("class", "chart"); + main = chart.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")").attr("width", width).attr("height", height).attr("class", "main"); + xAxis = d3.svg.axis().scale(x).orient("bottom"); + main.append("g").attr("transform", "translate(0," + height + ")").attr("class", "main axis date").call(xAxis); + yAxis = d3.svg.axis().scale(y).orient("left"); + main.append("g").attr("transform", "translate(0,0)").attr("class", "main axis date").call(yAxis); + g = main.append("svg:g"); + g.selectAll("scatter-dots").data(data).enter().append("svg:circle").attr("cx", function(d) { + return x(d[0]); + }).attr("cy", function(d) { + return y(d[1]); + }).attr("fill", js_data.circle_color).attr("r", js_data.circle_radius); + main.append("line").attr("x1", x(minx)).attr("y1", y(js_data.slope * minx + js_data.intercept)).attr("x2", x(maxx * 0.995)).attr("y2", y(js_data.slope * maxx * 0.995 + js_data.intercept)).style("stroke", js_data.line_color).style("stroke-width", js_data.line_width); + chart.append("text").attr("x", width / 2).attr("y", margin.top / 2 - 25).text("Sample Correlation Scatterplot"); + text = ""; + text += "N=" + js_data.num_overlap; + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 - 5).text(text); + text = ""; + text += "r=" + js_data.r_value + "\t"; + text += "p(r)=" + js_data.p_value; + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 15).text(text); + text = ""; + text += "slope=" + js_data.slope + "\t"; + text += "intercept=" + js_data.intercept; + chart.append("text").attr("x", margin.left).attr("y", margin.top / 2 + 35).text(text); + chart.append("text").attr("x", width / 2).attr("y", height + margin.top + 35).text(js_data.trait_1); + chart.append("text").attr("x", 20).attr("y", height / 2 + margin.top + 30).attr("transform", "rotate(-90 20," + (height / 2 + margin.top + 30) + ")").text(js_data.trait_2); + } + + return Scatter_Plot; + + })(); + + root.Scatter_Plot = Scatter_Plot; }).call(this); diff --git a/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee b/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee index 16590e26..af53bd09 100644 --- a/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee +++ b/wqflask/wqflask/static/new/javascript/dataset_select_menu.coffee @@ -104,7 +104,7 @@ $ -> defaults = species: "mouse" group: "BXD" - type: "Hippocampus" + type: "Hippocampus mRNA" dataset: "HC_M2_0606_P" for item in [['species', 'group'] diff --git a/wqflask/wqflask/static/new/javascript/dataset_select_menu.js b/wqflask/wqflask/static/new/javascript/dataset_select_menu.js index 5c5b433a..3a2f044f 100644 --- a/wqflask/wqflask/static/new/javascript/dataset_select_menu.js +++ b/wqflask/wqflask/static/new/javascript/dataset_select_menu.js @@ -111,7 +111,7 @@ defaults = { species: "mouse", group: "BXD", - type: "Hippocampus", + type: "Hippocampus mRNA", dataset: "HC_M2_0606_P" }; } diff --git a/wqflask/wqflask/static/new/javascript/show_corr.coffee b/wqflask/wqflask/static/new/javascript/show_corr.coffee new file mode 100644 index 00000000..727d3d86 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/show_corr.coffee @@ -0,0 +1,4 @@ +root = exports ? this + +$ -> + root.scatter_plot = new Scatter_Plot() diff --git a/wqflask/wqflask/static/new/javascript/show_corr.js b/wqflask/wqflask/static/new/javascript/show_corr.js new file mode 100644 index 00000000..0a866548 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/show_corr.js @@ -0,0 +1,11 @@ +// Generated by CoffeeScript 1.6.1 +(function() { + var root; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; + + $(function() { + return root.scatter_plot = new Scatter_Plot(); + }); + +}).call(this); diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html index 490024ec..3ee1817c 100644 --- a/wqflask/wqflask/templates/corr_scatter_plot.html +++ b/wqflask/wqflask/templates/corr_scatter_plot.html @@ -41,11 +41,12 @@ {% block js %} + +