diff options
7 files changed, 156 insertions, 157 deletions
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 %} <script> js_data = {{ js_data | safe }}; - </script> + </script> <script language="javascript" type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> <script language="javascript" type="text/javascript" src="http://bgrins.github.io/spectrum/spectrum.js"></script> <script language="javascript" type="text/javascript" src="/static/packages/underscore/underscore-min.js"></script> <script language="javascript" type="text/javascript" src="/static/new/javascript/corr_scatter_plot.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/show_corr.js"></script> <script> $("#circle_color").spectrum({ color: "{{circle_color}}", |