diff options
Diffstat (limited to 'wqflask')
4 files changed, 227 insertions, 137 deletions
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/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); 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 @@ <link rel="stylesheet" type="text/css" href="/static/packages/DT_bootstrap/DT_bootstrap.css" /> <link rel="stylesheet" type="text/css" href="/static/packages/TableTools/media/css/TableTools.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot.css" /> + <link rel="stylesheet" type="text/css" href="http://bgrins.github.io/spectrum/spectrum.css" /> {% endblock %} {% block content %} @@ -25,24 +26,12 @@ <td rowspan="2" style="vertical-align:middle;"><button type="submit" class="btn btn-primary"><i class="icon-refresh"></i>Redraw</button></td> </tr> <tr> - <td><input type="text" name="width" value="{{width}}" style="width: 100px;"></td> - <td><input type="text" name="height" value="{{height}}" style="width: 100px;"></td> - <td> - <select name="circle_color" style="width: 100px;"> - <option value="red">Red</option> - <option value="green">Green</option> - <option value="blue">Blue</option> - </select> - </td> - <td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></td> - <td> - <select name="line_color" style="width: 100px;"> - <option value="red">Red</option> - <option value="green">Green</option> - <option value="blue">Blue</option> - </select> - </td> - <td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td> + <td style="vertical-align:middle;"><input type="text" name="width" value="{{width}}" style="width: 100px; margin: auto;"></td> + <td style="vertical-align:middle;"><input type="text" name="height" value="{{height}}" style="width: 100px; margin: auto;"></td> + <td style="vertical-align:middle;"><input type="text" name="circle_color" id="circle_color" /></td> + <td style="vertical-align:middle;"><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px; margin: auto;"></td> + <td style="vertical-align:middle;"><input type="text" name="line_color" id="line_color" /></td> + <td style="vertical-align:middle;"><input type="text" name="line_width" value="{{line_width}}" style="width: 100px; margin: auto;"></td> </tr> </table> </form> @@ -51,9 +40,64 @@ {% block js %} <script> - js_data = {{ js_data | safe }} - </script> + js_data = {{ js_data | safe }}; + </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> + $("#circle_color").spectrum({ + color: "{{circle_color}}", + showInput: true, + className: "circle_color", + showInitial: true, + showPalette: true, + showSelectionPalette: true, + maxPaletteSize: 10, + preferredFormat: "hex", + localStorageKey: "circle_color", + palette: [ + ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"], + ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", + "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], + ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", + "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", + "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", + "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", + "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", + "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", + "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", + "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", + "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", + "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] + ] + }); + $("#line_color").spectrum({ + color: "{{line_color}}", + showInput: true, + className: "line_color", + showInitial: true, + showPalette: true, + showSelectionPalette: true, + maxPaletteSize: 10, + preferredFormat: "hex", + localStorageKey: "line_color", + palette: [ + ["rgb(0, 0, 0)", "rgb(67, 67, 67)", "rgb(102, 102, 102)", "rgb(204, 204, 204)", "rgb(217, 217, 217)","rgb(255, 255, 255)"], + ["rgb(152, 0, 0)", "rgb(255, 0, 0)", "rgb(255, 153, 0)", "rgb(255, 255, 0)", "rgb(0, 255, 0)", + "rgb(0, 255, 255)", "rgb(74, 134, 232)", "rgb(0, 0, 255)", "rgb(153, 0, 255)", "rgb(255, 0, 255)"], + ["rgb(230, 184, 175)", "rgb(244, 204, 204)", "rgb(252, 229, 205)", "rgb(255, 242, 204)", "rgb(217, 234, 211)", + "rgb(208, 224, 227)", "rgb(201, 218, 248)", "rgb(207, 226, 243)", "rgb(217, 210, 233)", "rgb(234, 209, 220)", + "rgb(221, 126, 107)", "rgb(234, 153, 153)", "rgb(249, 203, 156)", "rgb(255, 229, 153)", "rgb(182, 215, 168)", + "rgb(162, 196, 201)", "rgb(164, 194, 244)", "rgb(159, 197, 232)", "rgb(180, 167, 214)", "rgb(213, 166, 189)", + "rgb(204, 65, 37)", "rgb(224, 102, 102)", "rgb(246, 178, 107)", "rgb(255, 217, 102)", "rgb(147, 196, 125)", + "rgb(118, 165, 175)", "rgb(109, 158, 235)", "rgb(111, 168, 220)", "rgb(142, 124, 195)", "rgb(194, 123, 160)", + "rgb(166, 28, 0)", "rgb(204, 0, 0)", "rgb(230, 145, 56)", "rgb(241, 194, 50)", "rgb(106, 168, 79)", + "rgb(69, 129, 142)", "rgb(60, 120, 216)", "rgb(61, 133, 198)", "rgb(103, 78, 167)", "rgb(166, 77, 121)", + "rgb(91, 15, 0)", "rgb(102, 0, 0)", "rgb(120, 63, 4)", "rgb(127, 96, 0)", "rgb(39, 78, 19)", + "rgb(12, 52, 61)", "rgb(28, 69, 135)", "rgb(7, 55, 99)", "rgb(32, 18, 77)", "rgb(76, 17, 48)"] + ] + }); + </script> {% endblock %} \ No newline at end of file |