diff options
| -rw-r--r-- | wqflask/wqflask/correlation/corr_scatter_plot.py | 11 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/css/corr_scatter_plot.css | 17 | ||||
| -rw-r--r-- | wqflask/wqflask/static/new/javascript/corr_scatter_plot.js | 63 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/corr_scatter_plot.html | 22 | ||||
| -rw-r--r-- | wqflask/wqflask/templates/correlation_page.html | 2 | ||||
| -rw-r--r-- | wqflask/wqflask/views.py | 3 |
6 files changed, 108 insertions, 10 deletions
diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py index dd4e439a..13022b44 100644 --- a/wqflask/wqflask/correlation/corr_scatter_plot.py +++ b/wqflask/wqflask/correlation/corr_scatter_plot.py @@ -7,25 +7,18 @@ from utility import corr_result_helpers class CorrScatterPlot(object): def __init__(self, params): - print("params are:", params) self.data_set_1 = data_set.create_dataset(params['dataset_1']) self.data_set_2 = data_set.create_dataset(params['dataset_2']) self.trait_1 = GeneralTrait(name=params['trait_1'], dataset=self.data_set_1) self.trait_2 = GeneralTrait(name=params['trait_2'], dataset=self.data_set_2) - vals_1 = [] for sample in self.trait_1.data.keys(): vals_1.append(self.trait_1.data[sample].value) vals_2 = [] for sample in self.trait_2.data.keys(): vals_2.append(self.trait_2.data[sample].value) - - samples_1, samples_2, num_overlap = corr_result_helpers.normalize_values_with_samples( - self.trait_1.data, self.trait_2.data) - + samples_1, samples_2, num_overlap = corr_result_helpers.normalize_values_with_samples(self.trait_1.data, self.trait_2.data) self.js_data = dict( samples_1 = samples_1, samples_2 = samples_2 - ) - - print("Self.js_data:", self.js_data) \ No newline at end of file + ) \ No newline at end of file diff --git a/wqflask/wqflask/static/new/css/corr_scatter_plot.css b/wqflask/wqflask/static/new/css/corr_scatter_plot.css new file mode 100644 index 00000000..602c7297 --- /dev/null +++ b/wqflask/wqflask/static/new/css/corr_scatter_plot.css @@ -0,0 +1,17 @@ +.chart { + +} + +.main text { + font: 10px sans-serif; +} + +.axis line, .axis path { + shape-rendering: crispEdges; + stroke: black; + fill: none; +} + +circle { + fill: steelblue; +} \ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js new file mode 100644 index 00000000..180e6240 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/corr_scatter_plot.js @@ -0,0 +1,63 @@ +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]; + i++; +} + + var margin = {top: 20, right: 15, bottom: 60, left: 60} + , width = 800 - margin.left - margin.right + , height = 600 - margin.top - margin.bottom; + + var x = d3.scale.linear() + .domain([d3.min(data, function(d){return d[0];})*0.95, d3.max(data, function(d) { return d[0]; })*1.05]) + .range([ 0, width ]); + + var y = d3.scale.linear() + .domain([d3.min(data, function(d){return d[1];})*0.95, d3.max(data, function(d) { return d[1]; })*1.05]) + .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,i) { return x(d[0]); } ) + .attr("cy", function (d) { return y(d[1]); } ) + .attr("r", 6); \ No newline at end of file diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot.html new file mode 100644 index 00000000..b25110d7 --- /dev/null +++ b/wqflask/wqflask/templates/corr_scatter_plot.html @@ -0,0 +1,22 @@ +{% extends "base.html" %} + +{% block css %} + <link rel="stylesheet" type="text/css" href="/static/packages/jqplot/jquery.jqplot.min.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/packages/DataTables/css/jquery.dataTables.css" /> + <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" /> +{% endblock %} + +{% block content %} +<div id='scatter_plot'></div> +{% endblock %} + +{% block js %} + <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="/static/packages/underscore/underscore-min.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/corr_scatter_plot.js"></script> +{% endblock %} \ No newline at end of file diff --git a/wqflask/wqflask/templates/correlation_page.html b/wqflask/wqflask/templates/correlation_page.html index f3bb5531..3f6b7936 100644 --- a/wqflask/wqflask/templates/correlation_page.html +++ b/wqflask/wqflask/templates/correlation_page.html @@ -48,7 +48,7 @@ <td>{{'%0.3f'|format(trait.mean)}}</td> <td>{{'%0.3f'|format(trait.lrs)}}</td> <td>Chr{{ trait.locus_chr }}:{{'%0.6f'|format(trait.locus_mb)}}</td> - <td><a href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}&">{{'%0.3f'|format(trait.sample_r)}}</a></td> + <td><a target="_blank" href="corr_scatter_plot?dataset_1={{dataset.name}}&dataset_2={{trait.dataset.name}}&trait_1={{this_trait.name}}&trait_2={{trait.name}}">{{'%0.3f'|format(trait.sample_r)}}</a></td> <td>{{ trait.num_overlap }}</td> <td>{{'%0.3e'|format(trait.sample_p)}}</td> <td>{{'%0.3f'|format(trait.lit_corr)}}</td> diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py index 4cf540f6..ce213c93 100644 --- a/wqflask/wqflask/views.py +++ b/wqflask/wqflask/views.py @@ -302,6 +302,9 @@ def corr_compute_page(): @app.route("/corr_scatter_plot") def corr_scatter_plot_page(): template_vars = corr_scatter_plot.CorrScatterPlot(request.args) + template_vars.js_data = json.dumps(template_vars.js_data, + default=json_default_handler, + indent=" ") return render_template("corr_scatter_plot.html", **template_vars.__dict__) @app.route("/int_mapping", methods=('POST',)) |