diff options
26 files changed, 1527 insertions, 644 deletions
diff --git a/wqflask/wqflask/correlation/corr_scatter_plot.py b/wqflask/wqflask/correlation/corr_scatter_plot.py index dd98c7d5..524e8d89 100755 --- a/wqflask/wqflask/correlation/corr_scatter_plot.py +++ b/wqflask/wqflask/correlation/corr_scatter_plot.py @@ -51,18 +51,27 @@ class CorrScatterPlot(object): self.line_width = line_width samples_1, samples_2, num_overlap = corr_result_helpers.normalize_values_with_samples(self.trait_1.data, self.trait_2.data) + + self.data = [] + self.indIDs = samples_1.keys() vals_1 = [] for sample in samples_1.keys(): vals_1.append(samples_1[sample].value) + self.data.append(vals_1) vals_2 = [] for sample in samples_2.keys(): vals_2.append(samples_2[sample].value) + self.data.append(vals_2) + x = np.array(vals_1) y = np.array(vals_2) slope, intercept, r_value, p_value, std_err = stats.linregress(x, y) + self.js_data = dict( - trait_1 = self.trait_1.dataset.name + ": " + self.trait_1.name, - trait_2 = self.trait_2.dataset.name + ": " + self.trait_2.name, + data = self.data, + indIDs = self.indIDs, + trait_1 = self.trait_1.dataset.name + ": " + str(self.trait_1.name), + trait_2 = self.trait_2.dataset.name + ": " + str(self.trait_2.name), samples_1 = samples_1, samples_2 = samples_2, num_overlap = num_overlap, diff --git a/wqflask/wqflask/interval_mapping/interval_mapping.py b/wqflask/wqflask/interval_mapping/interval_mapping.py index d28cb24b..a81a62b4 100755 --- a/wqflask/wqflask/interval_mapping/interval_mapping.py +++ b/wqflask/wqflask/interval_mapping/interval_mapping.py @@ -98,6 +98,10 @@ class IntervalMapping(object): self.num_permutations = int(start_vars['num_permutations']) #self.do_bootstrap = start_vars['do_bootstrap'] self.selected_chr = start_vars['chromosome'] + if start_vars['display_additive'] == "yes": + self.additive = True + else: + self.additive = False if 'control_locus' in start_vars: self.control_locus = start_vars['control_locus'] else: @@ -169,7 +173,8 @@ class IntervalMapping(object): self.json_data['pos'].append(reaper_locus.Mb) self.json_data['lod.hk'].append(qtl.lrs) self.json_data['markernames'].append(reaper_locus.name) - self.json_data['additive'].append(qtl.additive) + if self.additive: + self.json_data['additive'].append(qtl.additive) locus = {"name":reaper_locus.name, "chr":reaper_locus.chr, "cM":reaper_locus.cM, "Mb":reaper_locus.Mb} qtl = {"lrs": qtl.lrs, "locus": locus, "additive": qtl.additive} self.qtl_results.append(qtl) @@ -220,7 +225,8 @@ class IntervalMapping(object): self.json_data['pos'].append(reaper_locus.Mb) self.json_data['lod.hk'].append(qtl.lrs) self.json_data['markernames'].append(reaper_locus.name) - self.json_data['additive'].append(qtl.additive) + if self.additive: + self.json_data['additive'].append(qtl.additive) locus = {"name":reaper_locus.name, "chr":reaper_locus.chr, "cM":reaper_locus.cM, "Mb":reaper_locus.Mb} qtl = {"lrs_value": qtl.lrs, "chr":reaper_locus.chr, "Mb":reaper_locus.Mb, "cM":reaper_locus.cM, "name":reaper_locus.name, "additive":qtl.additive} diff --git a/wqflask/wqflask/show_trait/show_trait.py b/wqflask/wqflask/show_trait/show_trait.py index 6f0ff44b..c0403bbd 100755 --- a/wqflask/wqflask/show_trait/show_trait.py +++ b/wqflask/wqflask/show_trait/show_trait.py @@ -101,6 +101,7 @@ class ShowTrait(object): hddn['mapping_display_all'] = True hddn['suggestive'] = 0 hddn['maf'] = 0.01 + hddn['compare_traits'] = [] # We'll need access to this_trait and hddn in the Jinja2 Template, so we put it inside self self.hddn = hddn diff --git a/wqflask/wqflask/static/new/css/bar_chart.css b/wqflask/wqflask/static/new/css/bar_chart.css index 3e6e7bd6..78d31eee 100755 --- a/wqflask/wqflask/static/new/css/bar_chart.css +++ b/wqflask/wqflask/static/new/css/bar_chart.css @@ -1,5 +1,5 @@ -.axis path,
-.axis line {
+.barchart .axis path,
+.barchart .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
diff --git a/wqflask/wqflask/static/new/css/d3-tip.min.css b/wqflask/wqflask/static/new/css/d3-tip.min.css new file mode 100644 index 00000000..3d253caf --- /dev/null +++ b/wqflask/wqflask/static/new/css/d3-tip.min.css @@ -0,0 +1 @@ +.d3-tip{line-height:1;font-weight:bold;padding:12px;background:rgba(0,0,0,0.8);color:#fff;border-radius:2px;pointer-events:none}.d3-tip:after{box-sizing:border-box;display:inline;font-size:10px;width:100%;line-height:1;color:rgba(0,0,0,0.8);position:absolute;pointer-events:none}.d3-tip.n:after{content:"\25BC";margin:-1px 0 0 0;top:100%;left:0;text-align:center}.d3-tip.e:after{content:"\25C0";margin:-4px 0 0 0;top:50%;left:-8px}.d3-tip.s:after{content:"\25B2";margin:0 0 1px 0;top:-8px;left:0;text-align:center}.d3-tip.w:after{content:"\25B6";margin:-4px 0 0 -1px;top:50%;left:100%}
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/css/panelutil.css b/wqflask/wqflask/static/new/css/panelutil.css index d02c47d5..35e40db7 100644 --- a/wqflask/wqflask/static/new/css/panelutil.css +++ b/wqflask/wqflask/static/new/css/panelutil.css @@ -1,67 +1,81 @@ -body {
- font-family: sans-serif;
-}
-text {
+/* figures will always be within a div with class="qtlcharts" */
+div.qtlcharts {
font-family: sans-serif;
font-size: 11pt;
}
-.title text {
+div.qtlcharts .title text {
dominant-baseline: middle;
fill: blue;
text-anchor: middle;
}
-.y.axis text {
+div.qtlcharts .y.axis text {
dominant-baseline: middle;
text-anchor: end;
}
-.y.axis text.title {
+div.qtlcharts .y.axis text.title {
text-anchor: middle;
fill: slateblue;
}
-.x.axis text {
+div.qtlcharts .x.axis text {
dominant-baseline: hanging;
text-anchor: middle;
}
-.x.axis text.title {
+div.qtlcharts .x.axis text.title {
fill: slateblue;
}
-line.axis.grid {
+div.qtlcharts line.axis.grid {
fill: none;
stroke-width: 1;
pointer-events: none;
}
-line.x.axis.grid {
+div.qtlcharts line.x.axis.grid {
stroke: rgb(200, 200, 200);
stroke-width: 3;
}
-line.y.axis.grid {
+div.qtlcharts line.y.axis.grid {
stroke: white;
}
-.extent {
+div.qtlcharts .extent {
fill: #cac;
opacity: 0.3;
}
-circle.selected {
+div.qtlcharts circle.selected {
fill: hotpink;
opacity: 1;
}
+div.qtlcharts a {
+ color: #08c;
+ text-decoration: none;
+}
+
+div.qtlcharts a:hover {
+ color: #333;
+ text-decoration: underline;
+}
+
+
+/* figure captions */
.caption {
+ font-family: Sans-serif;
+ font-size: 11pt;
margin-left: 60px;
width: 600px;
}
+
+/* d3 tip for tool tips */
.d3-tip {
background: darkslateblue;
color: #fff;
@@ -74,14 +88,4 @@ circle.selected { .d3-tip.e:after {
color: darkslateblue;
-}
-
-a {
- color: #08c;
- text-decoration: none;
-}
-
-a:hover {
- color: #333;
- text-decoration: underline;
-}
+}
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/colorbrewer.js b/wqflask/wqflask/static/new/javascript/colorbrewer.js new file mode 100644 index 00000000..2efa9632 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/colorbrewer.js @@ -0,0 +1,302 @@ +// This product includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/).
+var colorbrewer = {YlGn: {
+3: ["#f7fcb9","#addd8e","#31a354"],
+4: ["#ffffcc","#c2e699","#78c679","#238443"],
+5: ["#ffffcc","#c2e699","#78c679","#31a354","#006837"],
+6: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#31a354","#006837"],
+7: ["#ffffcc","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
+8: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#005a32"],
+9: ["#ffffe5","#f7fcb9","#d9f0a3","#addd8e","#78c679","#41ab5d","#238443","#006837","#004529"]
+},YlGnBu: {
+3: ["#edf8b1","#7fcdbb","#2c7fb8"],
+4: ["#ffffcc","#a1dab4","#41b6c4","#225ea8"],
+5: ["#ffffcc","#a1dab4","#41b6c4","#2c7fb8","#253494"],
+6: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#2c7fb8","#253494"],
+7: ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
+8: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"],
+9: ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"]
+},GnBu: {
+3: ["#e0f3db","#a8ddb5","#43a2ca"],
+4: ["#f0f9e8","#bae4bc","#7bccc4","#2b8cbe"],
+5: ["#f0f9e8","#bae4bc","#7bccc4","#43a2ca","#0868ac"],
+6: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#43a2ca","#0868ac"],
+7: ["#f0f9e8","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
+8: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#08589e"],
+9: ["#f7fcf0","#e0f3db","#ccebc5","#a8ddb5","#7bccc4","#4eb3d3","#2b8cbe","#0868ac","#084081"]
+},BuGn: {
+3: ["#e5f5f9","#99d8c9","#2ca25f"],
+4: ["#edf8fb","#b2e2e2","#66c2a4","#238b45"],
+5: ["#edf8fb","#b2e2e2","#66c2a4","#2ca25f","#006d2c"],
+6: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#2ca25f","#006d2c"],
+7: ["#edf8fb","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
+8: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#005824"],
+9: ["#f7fcfd","#e5f5f9","#ccece6","#99d8c9","#66c2a4","#41ae76","#238b45","#006d2c","#00441b"]
+},PuBuGn: {
+3: ["#ece2f0","#a6bddb","#1c9099"],
+4: ["#f6eff7","#bdc9e1","#67a9cf","#02818a"],
+5: ["#f6eff7","#bdc9e1","#67a9cf","#1c9099","#016c59"],
+6: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#1c9099","#016c59"],
+7: ["#f6eff7","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
+8: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016450"],
+9: ["#fff7fb","#ece2f0","#d0d1e6","#a6bddb","#67a9cf","#3690c0","#02818a","#016c59","#014636"]
+},PuBu: {
+3: ["#ece7f2","#a6bddb","#2b8cbe"],
+4: ["#f1eef6","#bdc9e1","#74a9cf","#0570b0"],
+5: ["#f1eef6","#bdc9e1","#74a9cf","#2b8cbe","#045a8d"],
+6: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#2b8cbe","#045a8d"],
+7: ["#f1eef6","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
+8: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#034e7b"],
+9: ["#fff7fb","#ece7f2","#d0d1e6","#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"]
+},BuPu: {
+3: ["#e0ecf4","#9ebcda","#8856a7"],
+4: ["#edf8fb","#b3cde3","#8c96c6","#88419d"],
+5: ["#edf8fb","#b3cde3","#8c96c6","#8856a7","#810f7c"],
+6: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8856a7","#810f7c"],
+7: ["#edf8fb","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
+8: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#6e016b"],
+9: ["#f7fcfd","#e0ecf4","#bfd3e6","#9ebcda","#8c96c6","#8c6bb1","#88419d","#810f7c","#4d004b"]
+},RdPu: {
+3: ["#fde0dd","#fa9fb5","#c51b8a"],
+4: ["#feebe2","#fbb4b9","#f768a1","#ae017e"],
+5: ["#feebe2","#fbb4b9","#f768a1","#c51b8a","#7a0177"],
+6: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#c51b8a","#7a0177"],
+7: ["#feebe2","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
+8: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177"],
+9: ["#fff7f3","#fde0dd","#fcc5c0","#fa9fb5","#f768a1","#dd3497","#ae017e","#7a0177","#49006a"]
+},PuRd: {
+3: ["#e7e1ef","#c994c7","#dd1c77"],
+4: ["#f1eef6","#d7b5d8","#df65b0","#ce1256"],
+5: ["#f1eef6","#d7b5d8","#df65b0","#dd1c77","#980043"],
+6: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#dd1c77","#980043"],
+7: ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
+8: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"],
+9: ["#f7f4f9","#e7e1ef","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#980043","#67001f"]
+},OrRd: {
+3: ["#fee8c8","#fdbb84","#e34a33"],
+4: ["#fef0d9","#fdcc8a","#fc8d59","#d7301f"],
+5: ["#fef0d9","#fdcc8a","#fc8d59","#e34a33","#b30000"],
+6: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#e34a33","#b30000"],
+7: ["#fef0d9","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
+8: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#990000"],
+9: ["#fff7ec","#fee8c8","#fdd49e","#fdbb84","#fc8d59","#ef6548","#d7301f","#b30000","#7f0000"]
+},YlOrRd: {
+3: ["#ffeda0","#feb24c","#f03b20"],
+4: ["#ffffb2","#fecc5c","#fd8d3c","#e31a1c"],
+5: ["#ffffb2","#fecc5c","#fd8d3c","#f03b20","#bd0026"],
+6: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#f03b20","#bd0026"],
+7: ["#ffffb2","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
+8: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#b10026"],
+9: ["#ffffcc","#ffeda0","#fed976","#feb24c","#fd8d3c","#fc4e2a","#e31a1c","#bd0026","#800026"]
+},YlOrBr: {
+3: ["#fff7bc","#fec44f","#d95f0e"],
+4: ["#ffffd4","#fed98e","#fe9929","#cc4c02"],
+5: ["#ffffd4","#fed98e","#fe9929","#d95f0e","#993404"],
+6: ["#ffffd4","#fee391","#fec44f","#fe9929","#d95f0e","#993404"],
+7: ["#ffffd4","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
+8: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#8c2d04"],
+9: ["#ffffe5","#fff7bc","#fee391","#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"]
+},Purples: {
+3: ["#efedf5","#bcbddc","#756bb1"],
+4: ["#f2f0f7","#cbc9e2","#9e9ac8","#6a51a3"],
+5: ["#f2f0f7","#cbc9e2","#9e9ac8","#756bb1","#54278f"],
+6: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#756bb1","#54278f"],
+7: ["#f2f0f7","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
+8: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#4a1486"],
+9: ["#fcfbfd","#efedf5","#dadaeb","#bcbddc","#9e9ac8","#807dba","#6a51a3","#54278f","#3f007d"]
+},Blues: {
+3: ["#deebf7","#9ecae1","#3182bd"],
+4: ["#eff3ff","#bdd7e7","#6baed6","#2171b5"],
+5: ["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"],
+6: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#3182bd","#08519c"],
+7: ["#eff3ff","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
+8: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#084594"],
+9: ["#f7fbff","#deebf7","#c6dbef","#9ecae1","#6baed6","#4292c6","#2171b5","#08519c","#08306b"]
+},Greens: {
+3: ["#e5f5e0","#a1d99b","#31a354"],
+4: ["#edf8e9","#bae4b3","#74c476","#238b45"],
+5: ["#edf8e9","#bae4b3","#74c476","#31a354","#006d2c"],
+6: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#31a354","#006d2c"],
+7: ["#edf8e9","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
+8: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#005a32"],
+9: ["#f7fcf5","#e5f5e0","#c7e9c0","#a1d99b","#74c476","#41ab5d","#238b45","#006d2c","#00441b"]
+},Oranges: {
+3: ["#fee6ce","#fdae6b","#e6550d"],
+4: ["#feedde","#fdbe85","#fd8d3c","#d94701"],
+5: ["#feedde","#fdbe85","#fd8d3c","#e6550d","#a63603"],
+6: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#e6550d","#a63603"],
+7: ["#feedde","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
+8: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#8c2d04"],
+9: ["#fff5eb","#fee6ce","#fdd0a2","#fdae6b","#fd8d3c","#f16913","#d94801","#a63603","#7f2704"]
+},Reds: {
+3: ["#fee0d2","#fc9272","#de2d26"],
+4: ["#fee5d9","#fcae91","#fb6a4a","#cb181d"],
+5: ["#fee5d9","#fcae91","#fb6a4a","#de2d26","#a50f15"],
+6: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#de2d26","#a50f15"],
+7: ["#fee5d9","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
+8: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#99000d"],
+9: ["#fff5f0","#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]
+},Greys: {
+3: ["#f0f0f0","#bdbdbd","#636363"],
+4: ["#f7f7f7","#cccccc","#969696","#525252"],
+5: ["#f7f7f7","#cccccc","#969696","#636363","#252525"],
+6: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#636363","#252525"],
+7: ["#f7f7f7","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
+8: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525"],
+9: ["#ffffff","#f0f0f0","#d9d9d9","#bdbdbd","#969696","#737373","#525252","#252525","#000000"]
+},PuOr: {
+3: ["#f1a340","#f7f7f7","#998ec3"],
+4: ["#e66101","#fdb863","#b2abd2","#5e3c99"],
+5: ["#e66101","#fdb863","#f7f7f7","#b2abd2","#5e3c99"],
+6: ["#b35806","#f1a340","#fee0b6","#d8daeb","#998ec3","#542788"],
+7: ["#b35806","#f1a340","#fee0b6","#f7f7f7","#d8daeb","#998ec3","#542788"],
+8: ["#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788"],
+9: ["#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788"],
+10: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"],
+11: ["#7f3b08","#b35806","#e08214","#fdb863","#fee0b6","#f7f7f7","#d8daeb","#b2abd2","#8073ac","#542788","#2d004b"]
+},BrBG: {
+3: ["#d8b365","#f5f5f5","#5ab4ac"],
+4: ["#a6611a","#dfc27d","#80cdc1","#018571"],
+5: ["#a6611a","#dfc27d","#f5f5f5","#80cdc1","#018571"],
+6: ["#8c510a","#d8b365","#f6e8c3","#c7eae5","#5ab4ac","#01665e"],
+7: ["#8c510a","#d8b365","#f6e8c3","#f5f5f5","#c7eae5","#5ab4ac","#01665e"],
+8: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e"],
+9: ["#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e"],
+10: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"],
+11: ["#543005","#8c510a","#bf812d","#dfc27d","#f6e8c3","#f5f5f5","#c7eae5","#80cdc1","#35978f","#01665e","#003c30"]
+},PRGn: {
+3: ["#af8dc3","#f7f7f7","#7fbf7b"],
+4: ["#7b3294","#c2a5cf","#a6dba0","#008837"],
+5: ["#7b3294","#c2a5cf","#f7f7f7","#a6dba0","#008837"],
+6: ["#762a83","#af8dc3","#e7d4e8","#d9f0d3","#7fbf7b","#1b7837"],
+7: ["#762a83","#af8dc3","#e7d4e8","#f7f7f7","#d9f0d3","#7fbf7b","#1b7837"],
+8: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
+9: ["#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837"],
+10: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"],
+11: ["#40004b","#762a83","#9970ab","#c2a5cf","#e7d4e8","#f7f7f7","#d9f0d3","#a6dba0","#5aae61","#1b7837","#00441b"]
+},PiYG: {
+3: ["#e9a3c9","#f7f7f7","#a1d76a"],
+4: ["#d01c8b","#f1b6da","#b8e186","#4dac26"],
+5: ["#d01c8b","#f1b6da","#f7f7f7","#b8e186","#4dac26"],
+6: ["#c51b7d","#e9a3c9","#fde0ef","#e6f5d0","#a1d76a","#4d9221"],
+7: ["#c51b7d","#e9a3c9","#fde0ef","#f7f7f7","#e6f5d0","#a1d76a","#4d9221"],
+8: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
+9: ["#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221"],
+10: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"],
+11: ["#8e0152","#c51b7d","#de77ae","#f1b6da","#fde0ef","#f7f7f7","#e6f5d0","#b8e186","#7fbc41","#4d9221","#276419"]
+},RdBu: {
+3: ["#ef8a62","#f7f7f7","#67a9cf"],
+4: ["#ca0020","#f4a582","#92c5de","#0571b0"],
+5: ["#ca0020","#f4a582","#f7f7f7","#92c5de","#0571b0"],
+6: ["#b2182b","#ef8a62","#fddbc7","#d1e5f0","#67a9cf","#2166ac"],
+7: ["#b2182b","#ef8a62","#fddbc7","#f7f7f7","#d1e5f0","#67a9cf","#2166ac"],
+8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
+9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac"],
+10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"],
+11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#f7f7f7","#d1e5f0","#92c5de","#4393c3","#2166ac","#053061"]
+},RdGy: {
+3: ["#ef8a62","#ffffff","#999999"],
+4: ["#ca0020","#f4a582","#bababa","#404040"],
+5: ["#ca0020","#f4a582","#ffffff","#bababa","#404040"],
+6: ["#b2182b","#ef8a62","#fddbc7","#e0e0e0","#999999","#4d4d4d"],
+7: ["#b2182b","#ef8a62","#fddbc7","#ffffff","#e0e0e0","#999999","#4d4d4d"],
+8: ["#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d"],
+9: ["#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d"],
+10: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"],
+11: ["#67001f","#b2182b","#d6604d","#f4a582","#fddbc7","#ffffff","#e0e0e0","#bababa","#878787","#4d4d4d","#1a1a1a"]
+},RdYlBu: {
+3: ["#fc8d59","#ffffbf","#91bfdb"],
+4: ["#d7191c","#fdae61","#abd9e9","#2c7bb6"],
+5: ["#d7191c","#fdae61","#ffffbf","#abd9e9","#2c7bb6"],
+6: ["#d73027","#fc8d59","#fee090","#e0f3f8","#91bfdb","#4575b4"],
+7: ["#d73027","#fc8d59","#fee090","#ffffbf","#e0f3f8","#91bfdb","#4575b4"],
+8: ["#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4"],
+9: ["#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4"],
+10: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"],
+11: ["#a50026","#d73027","#f46d43","#fdae61","#fee090","#ffffbf","#e0f3f8","#abd9e9","#74add1","#4575b4","#313695"]
+},Spectral: {
+3: ["#fc8d59","#ffffbf","#99d594"],
+4: ["#d7191c","#fdae61","#abdda4","#2b83ba"],
+5: ["#d7191c","#fdae61","#ffffbf","#abdda4","#2b83ba"],
+6: ["#d53e4f","#fc8d59","#fee08b","#e6f598","#99d594","#3288bd"],
+7: ["#d53e4f","#fc8d59","#fee08b","#ffffbf","#e6f598","#99d594","#3288bd"],
+8: ["#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd"],
+9: ["#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd"],
+10: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"],
+11: ["#9e0142","#d53e4f","#f46d43","#fdae61","#fee08b","#ffffbf","#e6f598","#abdda4","#66c2a5","#3288bd","#5e4fa2"]
+},RdYlGn: {
+3: ["#fc8d59","#ffffbf","#91cf60"],
+4: ["#d7191c","#fdae61","#a6d96a","#1a9641"],
+5: ["#d7191c","#fdae61","#ffffbf","#a6d96a","#1a9641"],
+6: ["#d73027","#fc8d59","#fee08b","#d9ef8b","#91cf60","#1a9850"],
+7: ["#d73027","#fc8d59","#fee08b","#ffffbf","#d9ef8b","#91cf60","#1a9850"],
+8: ["#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
+9: ["#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850"],
+10: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"],
+11: ["#a50026","#d73027","#f46d43","#fdae61","#fee08b","#ffffbf","#d9ef8b","#a6d96a","#66bd63","#1a9850","#006837"]
+},Accent: {
+3: ["#7fc97f","#beaed4","#fdc086"],
+4: ["#7fc97f","#beaed4","#fdc086","#ffff99"],
+5: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0"],
+6: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f"],
+7: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17"],
+8: ["#7fc97f","#beaed4","#fdc086","#ffff99","#386cb0","#f0027f","#bf5b17","#666666"]
+},Dark2: {
+3: ["#1b9e77","#d95f02","#7570b3"],
+4: ["#1b9e77","#d95f02","#7570b3","#e7298a"],
+5: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e"],
+6: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02"],
+7: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d"],
+8: ["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"]
+},Paired: {
+3: ["#a6cee3","#1f78b4","#b2df8a"],
+4: ["#a6cee3","#1f78b4","#b2df8a","#33a02c"],
+5: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99"],
+6: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c"],
+7: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f"],
+8: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00"],
+9: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6"],
+10: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a"],
+11: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99"],
+12: ["#a6cee3","#1f78b4","#b2df8a","#33a02c","#fb9a99","#e31a1c","#fdbf6f","#ff7f00","#cab2d6","#6a3d9a","#ffff99","#b15928"]
+},Pastel1: {
+3: ["#fbb4ae","#b3cde3","#ccebc5"],
+4: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4"],
+5: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6"],
+6: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc"],
+7: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd"],
+8: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec"],
+9: ["#fbb4ae","#b3cde3","#ccebc5","#decbe4","#fed9a6","#ffffcc","#e5d8bd","#fddaec","#f2f2f2"]
+},Pastel2: {
+3: ["#b3e2cd","#fdcdac","#cbd5e8"],
+4: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4"],
+5: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9"],
+6: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae"],
+7: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc"],
+8: ["#b3e2cd","#fdcdac","#cbd5e8","#f4cae4","#e6f5c9","#fff2ae","#f1e2cc","#cccccc"]
+},Set1: {
+3: ["#e41a1c","#377eb8","#4daf4a"],
+4: ["#e41a1c","#377eb8","#4daf4a","#984ea3"],
+5: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00"],
+6: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33"],
+7: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628"],
+8: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf"],
+9: ["#e41a1c","#377eb8","#4daf4a","#984ea3","#ff7f00","#ffff33","#a65628","#f781bf","#999999"]
+},Set2: {
+3: ["#66c2a5","#fc8d62","#8da0cb"],
+4: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3"],
+5: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854"],
+6: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f"],
+7: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494"],
+8: ["#66c2a5","#fc8d62","#8da0cb","#e78ac3","#a6d854","#ffd92f","#e5c494","#b3b3b3"]
+},Set3: {
+3: ["#8dd3c7","#ffffb3","#bebada"],
+4: ["#8dd3c7","#ffffb3","#bebada","#fb8072"],
+5: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3"],
+6: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462"],
+7: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69"],
+8: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5"],
+9: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9"],
+10: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd"],
+11: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5"],
+12: ["#8dd3c7","#ffffb3","#bebada","#fb8072","#80b1d3","#fdb462","#b3de69","#fccde5","#d9d9d9","#bc80bd","#ccebc5","#ffed6f"]
+}};
diff --git a/wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.coffee b/wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.coffee new file mode 100644 index 00000000..73eb1466 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.coffee @@ -0,0 +1,113 @@ +root = exports ? this
+
+root.create_scatterplot = (json_ids, json_data) ->
+
+ console.log("TESTING TESTING2")
+
+ h = 400
+ w = 500
+ margin = {left:60, top:40, right:40, bottom: 40, inner:5}
+ halfh = (h+margin.top+margin.bottom)
+ totalh = halfh*2
+ halfw = (w+margin.left+margin.right)
+ totalw = halfw*2
+
+ # Example 1: simplest use
+ #d3.json "data.json", (data) ->
+ mychart = scatterplot().xvar(0)
+ .yvar(1)
+ .xlab("X")
+ .ylab("Y")
+ .height(h)
+ .width(w)
+ .margin(margin)
+
+ data = json_data
+ indID = json_ids
+ #slope = js_data.slope
+ #intercept = js_data.intercept
+
+ d3.select("div#comparison_scatterplot")
+ .datum({data:data, indID:indID})
+ .call(mychart)
+
+ # animate points
+ mychart.pointsSelect()
+ .on "mouseover", (d) ->
+ d3.select(this).attr("r", mychart.pointsize()*3)
+ .on "mouseout", (d) ->
+ d3.select(this).attr("r", mychart.pointsize())
+
+root.create_scatterplots = (json_ids, json_data) ->
+ h = 400
+ w = 500
+ margin = {left:60, top:40, right:40, bottom: 40, inner:5}
+ halfh = (h+margin.top+margin.bottom)
+ totalh = halfh*2
+ halfw = (w+margin.left+margin.right)
+ totalw = halfw*2
+
+ # Example 2: three scatterplots within one SVG, with brushing
+ #d3.json "data.json", (data) ->
+ xvar = [1, 2, 2]
+ yvar = [0, 0, 1]
+ xshift = [0, halfw, halfw]
+ yshift = [0, 0, halfh]
+
+ svg = d3.select("div#chart2")
+ .append("svg")
+ .attr("height", totalh)
+ .attr("width", totalw)
+
+ mychart = []
+ chart = []
+ for i in [0..2]
+ mychart[i] = scatterplot().xvar(xvar[i])
+ .yvar(yvar[i])
+ .nxticks(6)
+ .height(h)
+ .width(w)
+ .margin(margin)
+ .pointsize(4)
+ .xlab("X#{xvar[i]+1}")
+ .ylab("X#{yvar[i]+1}")
+ .title("X#{yvar[i]+1} vs. X#{xvar[i]+1}")
+
+ chart[i] = svg.append("g").attr("id", "chart#{i}")
+ .attr("transform", "translate(#{xshift[i]},#{yshift[i]})")
+ chart[i].datum({data:data}).call(mychart[i])
+
+ brush = []
+ brushstart = (i) ->
+ () ->
+ for j in [0..2]
+ chart[j].call(brush[j].clear()) if j != i
+ svg.selectAll("circle").attr("opacity", 0.6).classed("selected", false)
+
+ brushmove = (i) ->
+ () ->
+ svg.selectAll("circle").classed("selected", false)
+ e = brush[i].extent()
+ chart[i].selectAll("circle")
+ .classed("selected", (d,j) ->
+ circ = d3.select(this)
+ cx = circ.attr("cx")
+ cy = circ.attr("cy")
+ selected = e[0][0] <= cx and cx <= e[1][0] and
+ e[0][1] <= cy and cy <= e[1][1]
+ svg.selectAll("circle.pt#{j}").classed("selected", true) if selected
+ selected)
+
+ brushend = () ->
+ svg.selectAll("circle").attr("opacity", 1)
+
+ xscale = d3.scale.linear().domain([margin.left,margin.left+w]).range([margin.left,margin.left+w])
+ yscale = d3.scale.linear().domain([margin.top,margin.top+h]).range([margin.top,margin.top+h])
+
+ for i in [0..2]
+ brush[i] = d3.svg.brush().x(xscale).y(yscale)
+ .on("brushstart", brushstart(i))
+ .on("brush", brushmove(i))
+ .on("brushend", brushend)
+
+ chart[i].call(brush[i])
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.js b/wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.js new file mode 100644 index 00000000..c1596a14 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.js @@ -0,0 +1,109 @@ +// Generated by CoffeeScript 1.6.1 +(function() { + var root; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; + + root.create_scatterplot = function(json_ids, json_data) { + var data, h, halfh, halfw, indID, margin, mychart, totalh, totalw, w; + console.log("TESTING TESTING2"); + h = 400; + w = 500; + margin = { + left: 60, + top: 40, + right: 40, + bottom: 40, + inner: 5 + }; + halfh = h + margin.top + margin.bottom; + totalh = halfh * 2; + halfw = w + margin.left + margin.right; + totalw = halfw * 2; + mychart = scatterplot().xvar(0).yvar(1).xlab("X").ylab("Y").height(h).width(w).margin(margin); + data = json_data; + indID = json_ids; + d3.select("div#comparison_scatterplot").datum({ + data: data, + indID: indID + }).call(mychart); + return mychart.pointsSelect().on("mouseover", function(d) { + return d3.select(this).attr("r", mychart.pointsize() * 3); + }).on("mouseout", function(d) { + return d3.select(this).attr("r", mychart.pointsize()); + }); + }; + + root.create_scatterplots = function(json_ids, json_data) { + var brush, brushend, brushmove, brushstart, chart, h, halfh, halfw, i, margin, mychart, svg, totalh, totalw, w, xscale, xshift, xvar, yscale, yshift, yvar, _i, _j, _results; + h = 400; + w = 500; + margin = { + left: 60, + top: 40, + right: 40, + bottom: 40, + inner: 5 + }; + halfh = h + margin.top + margin.bottom; + totalh = halfh * 2; + halfw = w + margin.left + margin.right; + totalw = halfw * 2; + xvar = [1, 2, 2]; + yvar = [0, 0, 1]; + xshift = [0, halfw, halfw]; + yshift = [0, 0, halfh]; + svg = d3.select("div#chart2").append("svg").attr("height", totalh).attr("width", totalw); + mychart = []; + chart = []; + for (i = _i = 0; _i <= 2; i = ++_i) { + mychart[i] = scatterplot().xvar(xvar[i]).yvar(yvar[i]).nxticks(6).height(h).width(w).margin(margin).pointsize(4).xlab("X" + (xvar[i] + 1)).ylab("X" + (yvar[i] + 1)).title("X" + (yvar[i] + 1) + " vs. X" + (xvar[i] + 1)); + chart[i] = svg.append("g").attr("id", "chart" + i).attr("transform", "translate(" + xshift[i] + "," + yshift[i] + ")"); + chart[i].datum({ + data: data + }).call(mychart[i]); + } + brush = []; + brushstart = function(i) { + return function() { + var j, _j; + for (j = _j = 0; _j <= 2; j = ++_j) { + if (j !== i) { + chart[j].call(brush[j].clear()); + } + } + return svg.selectAll("circle").attr("opacity", 0.6).classed("selected", false); + }; + }; + brushmove = function(i) { + return function() { + var e; + svg.selectAll("circle").classed("selected", false); + e = brush[i].extent(); + return chart[i].selectAll("circle").classed("selected", function(d, j) { + var circ, cx, cy, selected; + circ = d3.select(this); + cx = circ.attr("cx"); + cy = circ.attr("cy"); + selected = e[0][0] <= cx && cx <= e[1][0] && e[0][1] <= cy && cy <= e[1][1]; + if (selected) { + svg.selectAll("circle.pt" + j).classed("selected", true); + } + return selected; + }); + }; + }; + brushend = function() { + return svg.selectAll("circle").attr("opacity", 1); + }; + xscale = d3.scale.linear().domain([margin.left, margin.left + w]).range([margin.left, margin.left + w]); + yscale = d3.scale.linear().domain([margin.top, margin.top + h]).range([margin.top, margin.top + h]); + _results = []; + for (i = _j = 0; _j <= 2; i = ++_j) { + brush[i] = d3.svg.brush().x(xscale).y(yscale).on("brushstart", brushstart(i)).on("brush", brushmove(i)).on("brushend", brushend); + _results.push(chart[i].call(brush[i])); + } + return _results; + }; + +}).call(this); diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.coffee b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.coffee new file mode 100644 index 00000000..36b1f2b3 --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.coffee @@ -0,0 +1,211 @@ +# illustration of use of the scatterplot function
+
+h = 400
+w = 500
+margin = {left:60, top:40, right:40, bottom: 40, inner:5}
+halfh = (h+margin.top+margin.bottom)
+totalh = halfh*2
+halfw = (w+margin.left+margin.right)
+totalw = halfw*2
+
+# Example 1: simplest use
+#d3.json "data.json", (data) ->
+mychart = scatterplot().xvar(0)
+ .yvar(1)
+ .xlab(js_data.trait_1)
+ .ylab(js_data.trait_2)
+ .height(h)
+ .width(w)
+ .margin(margin)
+
+data = js_data.data
+indID = js_data.indIDs
+slope = js_data.slope
+intercept = js_data.intercept
+
+console.log("THE DATA IS:", data)
+
+d3.select("div#chart1")
+ .datum({data:data, indID:indID, slope:slope, intercept:intercept})
+ .call(mychart)
+
+# animate points
+mychart.pointsSelect()
+ .on "mouseover", (d) ->
+ d3.select(this).attr("r", mychart.pointsize()*3)
+ .on "mouseout", (d) ->
+ d3.select(this).attr("r", mychart.pointsize())
+
+#
+## Example 2: three scatterplots within one SVG, with brushing
+#d3.json "data.json", (data) ->
+# xvar = [1, 2, 2]
+# yvar = [0, 0, 1]
+# xshift = [0, halfw, halfw]
+# yshift = [0, 0, halfh]
+#
+# svg = d3.select("div#chart2")
+# .append("svg")
+# .attr("height", totalh)
+# .attr("width", totalw)
+#
+# mychart = []
+# chart = []
+# for i in [0..2]
+# mychart[i] = scatterplot().xvar(xvar[i])
+# .yvar(yvar[i])
+# .nxticks(6)
+# .height(h)
+# .width(w)
+# .margin(margin)
+# .pointsize(4)
+# .xlab("X#{xvar[i]+1}")
+# .ylab("X#{yvar[i]+1}")
+# .title("X#{yvar[i]+1} vs. X#{xvar[i]+1}")
+#
+# chart[i] = svg.append("g").attr("id", "chart#{i}")
+# .attr("transform", "translate(#{xshift[i]},#{yshift[i]})")
+# chart[i].datum({data:data}).call(mychart[i])
+#
+# brush = []
+# brushstart = (i) ->
+# () ->
+# for j in [0..2]
+# chart[j].call(brush[j].clear()) if j != i
+# svg.selectAll("circle").attr("opacity", 0.6).classed("selected", false)
+#
+# brushmove = (i) ->
+# () ->
+# svg.selectAll("circle").classed("selected", false)
+# e = brush[i].extent()
+# chart[i].selectAll("circle")
+# .classed("selected", (d,j) ->
+# circ = d3.select(this)
+# cx = circ.attr("cx")
+# cy = circ.attr("cy")
+# selected = e[0][0] <= cx and cx <= e[1][0] and
+# e[0][1] <= cy and cy <= e[1][1]
+# svg.selectAll("circle.pt#{j}").classed("selected", true) if selected
+# selected)
+#
+# brushend = () ->
+# svg.selectAll("circle").attr("opacity", 1)
+#
+# xscale = d3.scale.linear().domain([margin.left,margin.left+w]).range([margin.left,margin.left+w])
+# yscale = d3.scale.linear().domain([margin.top,margin.top+h]).range([margin.top,margin.top+h])
+#
+# for i in [0..2]
+# brush[i] = d3.svg.brush().x(xscale).y(yscale)
+# .on("brushstart", brushstart(i))
+# .on("brush", brushmove(i))
+# .on("brushend", brushend)
+#
+# chart[i].call(brush[i])
+#
+#
+#
+## Example 3: different options regarding treatment of missing values
+#d3.json "data.json", (data) ->
+# mychart01 = scatterplot().xvar(1)
+# .yvar(0)
+# .height(h)
+# .width(w)
+# .margin(margin)
+# .xlab("X2")
+# .ylab("X1")
+# .xNA({handle:true, force:true, width:15, gap:10})
+# .yNA({handle:true, force:true, width:15, gap:10})
+# .title("X1 vs X2")
+#
+# mychart02 = scatterplot().xvar(2)
+# .yvar(0)
+# .height(h)
+# .width(w)
+# .margin(margin)
+# .xlab("X3")
+# .ylab("X1")
+# .yNA({handle:true, force:true, width:15, gap:10})
+# .title("X1 vs X3")
+# mychart12 = scatterplot().xvar(2)
+# .yvar(1)
+# .height(h)
+# .width(w)
+# .margin(margin)
+# .xlab("X3")
+# .ylab("X2")
+# .xNA({handle:false, force:false, width:15, gap:10})
+# .title("X2 vs X3")
+#
+# svg = d3.select("div#chart3")
+# .append("svg")
+# .attr("height", totalh)
+# .attr("width", totalw)
+#
+# chart01 = svg.append("g").attr("id", "chart01")
+#
+# chart02 = svg.append("g").attr("id", "chart02")
+# .attr("transform", "translate(#{halfw}, 0)")
+#
+# chart12 = svg.append("g").attr("id", "chart12")
+# .attr("transform", "translate(#{halfw}, #{halfh})")
+#
+# chart01.datum({data:data})
+# .call(mychart01)
+#
+# chart02.datum({data:data})
+# .call(mychart02)
+#
+# chart12.datum({data:data})
+# .call(mychart12)
+#
+# [mychart01, mychart02, mychart12].forEach (chart) ->
+# chart.pointsSelect()
+# .on "mouseover", (d,i) ->
+# svg.selectAll("circle.pt#{i}").attr("r", chart.pointsize()*3)
+# .on "mouseout", (d,i) ->
+# svg.selectAll("circle.pt#{i}").attr("r", chart.pointsize())
+#
+#
+## Example 4: Data not by individual but with X and Y as separate columns
+#d3.json "data.json", (data) ->
+# mychart = scatterplot().height(h)
+# .width(w)
+# .margin(margin)
+# .dataByInd(false)
+#
+# dataReorg = [(x[0] for x in data), (x[1] for x in data)]
+#
+# d3.select("div#chart4")
+# .datum({data:dataReorg})
+# .call(mychart)
+#
+# # animate points
+# mychart.pointsSelect()
+# .on "mouseover", (d) ->
+# d3.select(this).attr("r", mychart.pointsize()*3)
+# .on "mouseout", (d) ->
+# d3.select(this).attr("r", mychart.pointsize())
+#
+## Example 5: color by grouping
+#d3.json "data.json", (data) ->
+# mychart = scatterplot().xvar(0)
+# .yvar(1)
+# .xlab("X1")
+# .ylab("X2")
+# .height(h)
+# .width(w)
+# .margin(margin)
+#
+# ngroup = 3
+# group = (Math.ceil(Math.random()*ngroup) for i in data)
+#
+# d3.select("div#chart5")
+# .datum({data:data, group:group})
+# .call(mychart)
+#
+# # animate points
+# mychart.pointsSelect()
+# .on "mouseover", (d) ->
+# d3.select(this).attr("r", mychart.pointsize()*3)
+# .on "mouseout", (d) ->
+# d3.select(this).attr("r", mychart.pointsize())
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js new file mode 100644 index 00000000..396f4bbe --- /dev/null +++ b/wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js @@ -0,0 +1,50 @@ +// Generated by CoffeeScript 1.6.1 +(function() { + var data, h, halfh, halfw, indID, intercept, margin, mychart, slope, totalh, totalw, w; + + h = 400; + + w = 500; + + margin = { + left: 60, + top: 40, + right: 40, + bottom: 40, + inner: 5 + }; + + halfh = h + margin.top + margin.bottom; + + totalh = halfh * 2; + + halfw = w + margin.left + margin.right; + + totalw = halfw * 2; + + mychart = scatterplot().xvar(0).yvar(1).xlab(js_data.trait_1).ylab(js_data.trait_2).height(h).width(w).margin(margin); + + data = js_data.data; + + indID = js_data.indIDs; + + slope = js_data.slope; + + intercept = js_data.intercept; + + console.log("THE DATA IS:", data); + + d3.select("div#chart1").datum({ + data: data, + indID: indID, + slope: slope, + intercept: intercept + }).call(mychart); + + mychart.pointsSelect().on("mouseover", function(d) { + return d3.select(this).attr("r", mychart.pointsize() * 3); + }).on("mouseout", function(d) { + return d3.select(this).attr("r", mychart.pointsize()); + }); + +}).call(this); diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee index db398809..691eb798 100755 --- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee +++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee @@ -1,5 +1,3 @@ -root = exports ? this - console.log("before get_traits_from_collection") # Going to be used to hold collection list @@ -28,10 +26,69 @@ trait_click = () -> $.ajax( dataType: "json", url: this_trait_url, - success: color_by_trait + success: get_trait_data ) $.colorbox.close() +get_trait_data = (trait_sample_data, textStatus, jqXHR) -> + trait_list = $('input[name=compare_traits]') + console.log("trait_list:", trait_list.val()) + console.log("trait_sample_data:", trait_sample_data) + samples = $('input[name=allsamples]').val().split(" ") + vals = [] + + for sample in samples + if sample in Object.keys(trait_sample_data) + vals.push(parseFloat(trait_sample_data[sample])) + else + vals.push(null) + + #console.log("sorted_samples:", samples) + #console.log("sorted_vals:", vals) + + if $('input[name=samples]').length < 1 + $('#hidden_inputs').append('<input type="hidden" name="samples" value="[' + samples.toString() + ']" />') + $('#hidden_inputs').append('<input type="hidden" name="vals" value="[' + vals.toString() + ']" />') + + this_trait_vals = get_this_trait_vals(samples) + + #json_data = assemble_into_json(this_trait_vals_json) + + #console.log("json_data[1]:", json_data[1]) + + console.log("THE LENGTH IS:", $('input[name=vals]').length) + if $('input[name=vals]').length == 1 + create_scatterplot(samples, [this_trait_vals, vals]) + + + +get_this_trait_vals = (samples) -> + this_trait_vals = [] + for sample in samples + this_val = parseFloat($("input[name='value:"+sample+"']").val()) + if !isNaN(this_val) + this_trait_vals.push(this_val) + else + this_trait_vals.push(null) + console.log("this_trait_vals:", this_trait_vals) + + this_vals_json = '[' + this_trait_vals.toString() + ']' + + return this_trait_vals + +assemble_into_json = (this_trait_vals) -> + num_traits = $('input[name=vals]').length + samples = $('input[name=samples]').val() + json_ids = samples + + json_data = '[' + this_trait_vals + + $('input[name=vals]').each (index, element) => + json_data += ',' + $(element).val() + json_data += ']' + + return [json_ids, json_data] + color_by_trait = (trait_sample_data, textStatus, jqXHR) -> #trait_sample_data = trait_sample_data #console.log('in color_by_trait:', trait_sample_data) diff --git a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js index fac543f8..146c2619 100755 --- a/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js +++ b/wqflask/wqflask/static/new/javascript/get_traits_from_collection.js @@ -1,8 +1,7 @@ // Generated by CoffeeScript 1.6.1 (function() { - var back_to_collections, collection_click, collection_list, color_by_trait, process_traits, root, this_trait_data, trait_click; - - root = typeof exports !== "undefined" && exports !== null ? exports : this; + var assemble_into_json, back_to_collections, collection_click, collection_list, color_by_trait, get_this_trait_vals, get_trait_data, process_traits, this_trait_data, trait_click, + __indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; }; console.log("before get_traits_from_collection"); @@ -34,12 +33,69 @@ return $.ajax({ dataType: "json", url: this_trait_url, - success: color_by_trait + success: get_trait_data }); }; $.colorbox.close(); + get_trait_data = function(trait_sample_data, textStatus, jqXHR) { + var sample, samples, this_trait_vals, trait_list, vals, _i, _len; + trait_list = $('input[name=compare_traits]'); + console.log("trait_list:", trait_list.val()); + console.log("trait_sample_data:", trait_sample_data); + samples = $('input[name=allsamples]').val().split(" "); + vals = []; + for (_i = 0, _len = samples.length; _i < _len; _i++) { + sample = samples[_i]; + if (__indexOf.call(Object.keys(trait_sample_data), sample) >= 0) { + vals.push(parseFloat(trait_sample_data[sample])); + } else { + vals.push(null); + } + } + if ($('input[name=samples]').length < 1) { + $('#hidden_inputs').append('<input type="hidden" name="samples" value="[' + samples.toString() + ']" />'); + } + $('#hidden_inputs').append('<input type="hidden" name="vals" value="[' + vals.toString() + ']" />'); + this_trait_vals = get_this_trait_vals(samples); + console.log("THE LENGTH IS:", $('input[name=vals]').length); + if ($('input[name=vals]').length === 1) { + return create_scatterplot(samples, [this_trait_vals, vals]); + } + }; + + get_this_trait_vals = function(samples) { + var sample, this_trait_vals, this_val, this_vals_json, _i, _len; + this_trait_vals = []; + for (_i = 0, _len = samples.length; _i < _len; _i++) { + sample = samples[_i]; + this_val = parseFloat($("input[name='value:" + sample + "']").val()); + if (!isNaN(this_val)) { + this_trait_vals.push(this_val); + } else { + this_trait_vals.push(null); + } + } + console.log("this_trait_vals:", this_trait_vals); + this_vals_json = '[' + this_trait_vals.toString() + ']'; + return this_trait_vals; + }; + + assemble_into_json = function(this_trait_vals) { + var json_data, json_ids, num_traits, samples, + _this = this; + num_traits = $('input[name=vals]').length; + samples = $('input[name=samples]').val(); + json_ids = samples; + json_data = '[' + this_trait_vals; + $('input[name=vals]').each(function(index, element) { + return json_data += ',' + $(element).val(); + }); + json_data += ']'; + return [json_ids, json_data]; + }; + color_by_trait = function(trait_sample_data, textStatus, jqXHR) { return root.bar_chart.color_by_trait(trait_sample_data); }; diff --git a/wqflask/wqflask/static/new/javascript/lod_chart.coffee b/wqflask/wqflask/static/new/javascript/lod_chart.coffee index fb11eeae..41e9c311 100644 --- a/wqflask/wqflask/static/new/javascript/lod_chart.coffee +++ b/wqflask/wqflask/static/new/javascript/lod_chart.coffee @@ -44,7 +44,8 @@ lodchart = () -> data[lodvarname] = (Math.abs(x) for x in data[lodvarname]) # take absolute values
data['additive'] = (Math.abs(x) for x in data['additive'])
ylim = ylim ? [0, d3.max(data[lodvarname])]
- additive_ylim = additive_ylim ? [0, d3.max(data['additive'])]
+ if data['additive'].length > 0
+ additive_ylim = additive_ylim ? [0, d3.max(data['additive'])]
lodvarnum = data.lodnames.indexOf(lodvarname)
# Select the svg element, if it exists.
@@ -71,13 +72,15 @@ lodchart = () -> yscale.domain(ylim)
.range([height+margin.top, margin.top+margin.inner])
-
- additive_yscale.domain(additive_ylim)
- .range([height+margin.top, margin.top+margin.inner + height/2])
+
+ if data['additive'].length > 0
+ additive_yscale.domain(additive_ylim)
+ .range([height+margin.top, margin.top+margin.inner + height/2])
# if yticks not provided, use nyticks to choose pretty ones
yticks = yticks ? yscale.ticks(nyticks)
- additive_yticks = additive_yticks ? additive_yscale.ticks(nyticks)
+ if data['additive'].length > 0
+ additive_yticks = additive_yticks ? additive_yscale.ticks(nyticks)
# reorganize lod,pos by chromosomes
data = reorgLodData(data, lodvarname)
@@ -152,35 +155,36 @@ lodchart = () -> .text(ylab)
.attr("transform", if rotate_ylab then "rotate(270,#{margin.left-axispos.ytitle},#{margin.top+height/2})" else "")
+ if data['additive'].length > 0
rotate_additive_ylab = rotate_additive_ylab ? (additive_ylab.length > 1)
- additive_yaxis = g.append("g").attr("class", "y axis")
- additive_yaxis.selectAll("empty")
- .data(additive_yticks)
- .enter()
- .append("line")
- .attr("y1", (d) -> additive_yscale(d))
- .attr("y2", (d) -> additive_yscale(d))
- .attr("x1", margin.left + width)
- .attr("x2", margin.left + width - 7)
- .attr("fill", "none")
- .attr("stroke", "white")
- .attr("stroke-width", 1)
- .style("pointer-events", "none")
-
- additive_yaxis.selectAll("empty")
- .data(additive_yticks)
- .enter()
- .append("text")
- .attr("y", (d) -> additive_yscale(d))
- .attr("x", (d) -> margin.left + width + axispos.ylabel + 20)
- .attr("fill", "green")
- .text((d) -> formatAxis(additive_yticks)(d))
-
- additive_yaxis.append("text").attr("class", "title")
- .attr("y", margin.top+1.5*height)
- .attr("x", margin.left + width + axispos.ytitle)
- .text(additive_ylab)
- .attr("transform", if rotate_additive_ylab then "rotate(270,#{margin.left + width + axispos.ytitle}, #{margin.top+height*1.5})" else "")
+ additive_yaxis = g.append("g").attr("class", "y axis")
+ additive_yaxis.selectAll("empty")
+ .data(additive_yticks)
+ .enter()
+ .append("line")
+ .attr("y1", (d) -> additive_yscale(d))
+ .attr("y2", (d) -> additive_yscale(d))
+ .attr("x1", margin.left + width)
+ .attr("x2", margin.left + width - 7)
+ .attr("fill", "none")
+ .attr("stroke", "white")
+ .attr("stroke-width", 1)
+ .style("pointer-events", "none")
+
+ additive_yaxis.selectAll("empty")
+ .data(additive_yticks)
+ .enter()
+ .append("text")
+ .attr("y", (d) -> additive_yscale(d))
+ .attr("x", (d) -> margin.left + width + axispos.ylabel + 20)
+ .attr("fill", "green")
+ .text((d) -> formatAxis(additive_yticks)(d))
+
+ additive_yaxis.append("text").attr("class", "title")
+ .attr("y", margin.top+1.5*height)
+ .attr("x", margin.left + width + axispos.ytitle)
+ .text(additive_ylab)
+ .attr("transform", if rotate_additive_ylab then "rotate(270,#{margin.left + width + axispos.ytitle}, #{margin.top+height*1.5})" else "")
suggestive_bar = g.append("g").attr("class", "suggestive")
@@ -217,10 +221,11 @@ lodchart = () -> .x((d) -> xscale[chr](d))
.y((d,i) -> yscale(data.lodByChr[chr][i][lodcolumn]))
- additivecurve = (chr, lodcolumn) ->
- d3.svg.line()
- .x((d) -> xscale[chr](d))
- .y((d,i) -> additive_yscale(data.additiveByChr[chr][i][lodcolumn]))
+ if data['additive'].length > 0
+ additivecurve = (chr, lodcolumn) ->
+ d3.svg.line()
+ .x((d) -> xscale[chr](d))
+ .y((d,i) -> additive_yscale(data.additiveByChr[chr][i][lodcolumn]))
curves = g.append("g").attr("id", "curves")
@@ -338,11 +343,12 @@ lodchart = () -> ylim = value
chart
- chart.additive_ylim = (value) ->
- return additive_ylim unless arguments.length
- additive_ylim = value
- chart
-
+ if data['additive'].length > 0
+ chart.additive_ylim = (value) ->
+ return additive_ylim unless arguments.length
+ additive_ylim = value
+ chart
+
chart.nyticks = (value) ->
return nyticks unless arguments.length
nyticks = value
@@ -431,8 +437,9 @@ lodchart = () -> chart.yscale = () ->
return yscale
- chart.additive_yscale = () ->
- return additive_yscale
+ if data['additive'].length > 0
+ chart.additive_yscale = () ->
+ return additive_yscale
chart.xscale = () ->
return xscale
@@ -440,8 +447,9 @@ lodchart = () -> chart.lodcurve = () ->
return lodcurve
- chart.additivecurve = () ->
- return additivecurve
+ if data['additive'].length > 0
+ chart.additivecurve = () ->
+ return additivecurve
chart.markerSelect = () ->
return markerSelect
@@ -470,7 +478,8 @@ reorgLodData = (data, lodvarname=null) -> if data.chr[j] == chr
data.posByChr[chr].push(pos)
data.lodnames = [data.lodnames] unless Array.isArray(data.lodnames)
- additiveval = (data['additive'][j] for lodcolumn in data.lodnames)
+ if data['additive'].length > 0
+ additiveval = (data['additive'][j] for lodcolumn in data.lodnames)
lodval = (data[lodcolumn][j] for lodcolumn in data.lodnames)
data.additiveByChr[chr].push(additiveval)
data.lodByChr[chr].push(lodval)
diff --git a/wqflask/wqflask/static/new/javascript/panelutil.coffee b/wqflask/wqflask/static/new/javascript/panelutil.coffee deleted file mode 100644 index 42636369..00000000 --- a/wqflask/wqflask/static/new/javascript/panelutil.coffee +++ /dev/null @@ -1,205 +0,0 @@ -# A variety of utility functions used by the different panel functions
-
-root = exports ? this
-
-# determine rounding of axis labels
-formatAxis = (d) ->
- d = d[1] - d[0]
- ndig = Math.floor( Math.log(d % 10) / Math.log(10) )
- ndig = 0 if ndig > 0
- ndig = Math.abs(ndig)
- d3.format(".#{ndig}f")
-
-# unique values of array (ignore nulls)
-unique = (x) ->
- output = {}
- output[v] = v for v in x when v
- output[v] for v of output
-
-# Pull out a variable (column) from a two-dimensional array
-pullVarAsArray = (data, variable) ->
- v = []
- for i of data
- v = v.concat data[i][variable]
- v
-
-# reorganize lod/pos by chromosome
-# lodvarname==null -> case for multiple LOD columns (lodheatmap)
-# lodvarname provided -> case for one LOD column (lodchart)
-reorgLodData = (data, lodvarname=null) ->
- data.posByChr = {}
- data.lodByChr = {}
-
- for chr,i in data.chrnames
- data.posByChr[chr] = []
- data.lodByChr[chr] = []
- for pos,j in data.pos
- if data.chr[j] == chr
- data.posByChr[chr].push(pos)
- data.lodnames = [data.lodnames] unless Array.isArray(data.lodnames)
- lodval = (data[lodcolumn][j] for lodcolumn in data.lodnames)
- data.lodByChr[chr].push(lodval)
-
- if lodvarname?
- data.markers = []
- for marker,i in data.markernames
- if marker != ""
- data.markers.push({name:marker, chr:data.chr[i], pos:data.pos[i], lod:data[lodvarname][i]})
-
- data
-
-# calculate chromosome start/end + scales, for heat map
-chrscales = (data, width, chrGap, leftMargin, pad4heatmap) ->
- # start and end of chromosome positions
- chrStart = []
- chrEnd = []
- chrLength = []
- totalChrLength = 0
- maxd = 0
- for chr in data.chrnames
- d = maxdiff(data.posByChr[chr])
- maxd = d if d > maxd
-
- rng = d3.extent(data.posByChr[chr])
- chrStart.push(rng[0])
- chrEnd.push(rng[1])
- L = rng[1] - rng[0]
- chrLength.push(L)
- totalChrLength += L
-
- # adjust lengths for heatmap
- if pad4heatmap
- data.recwidth = maxd
- chrStart = chrStart.map (x) -> x-maxd/2
- chrEnd = chrEnd.map (x) -> x+maxd/2
- chrLength = chrLength.map (x) -> x+maxd
- totalChrLength += (chrLength.length*maxd)
-
- # break up x axis into chromosomes by length, with gaps
- data.chrStart = []
- data.chrEnd = []
- cur = leftMargin
- cur += chrGap/2 unless pad4heatmap
- data.xscale = {}
- for chr,i in data.chrnames
- data.chrStart.push(cur)
- w = Math.round((width-chrGap*(data.chrnames.length-pad4heatmap))/totalChrLength*chrLength[i])
- data.chrEnd.push(cur + w)
- cur = data.chrEnd[i] + chrGap
- # x-axis scales, by chromosome
- data.xscale[chr] = d3.scale.linear()
- .domain([chrStart[i], chrEnd[i]])
- .range([data.chrStart[i], data.chrEnd[i]])
-
- # return data with new stuff added
- data
-
-# Select a set of categorical colors
-# ngroup is positive integer
-# palette = "dark" or "pastel"
-selectGroupColors = (ngroup, palette) ->
- return [] if ngroup == 0
-
- if palette == "dark"
- return ["slateblue"] if ngroup == 1
- return ["MediumVioletRed", "slateblue"] if ngroup == 2
- return colorbrewer.Set1[ngroup] if ngroup <= 9
- return d3.scale.category20().range()[0...ngroup]
- else
- return [d3.rgb(190, 190, 190)] if ngroup == 1
- return ["lightpink", "lightblue"] if ngroup == 2
- return colorbrewer.Pastel1[ngroup] if ngroup <= 9
- # below is rough attempt to make _big_ pastel palette
- return ["#8fc7f4", "#fed7f8", "#ffbf8e", "#fffbb8",
- "#8ce08c", "#d8ffca", "#f68788", "#ffd8d6",
- "#d4a7fd", "#f5f0f5", "#cc968b", "#f4dcd4",
- "#f3b7f2", "#f7f6f2", "#bfbfbf", "#f7f7f7",
- "#fcfd82", "#fbfbcd", "#87feff", "#defaf5"][0...ngroup]
-
-# expand element/array (e.g., of colors) to a given length
-# single elment -> array, then repeated to length n
-expand2vector = (input, n) ->
- return input if Array.isArray(input) and input.length >= n
- input = [input] unless Array.isArray(input)
- input = (input[0] for i of d3.range(n)) if input.length == 1 and n > 1
- input
-
-# median of a vector
-median = (x) ->
- return null if !x?
- n = x.length
- x.sort((a,b) -> a-b)
- if n % 2 == 1
- return x[(n-1)/2]
- (x[n/2] + x[(n/2)-1])/2
-
-# given a vector of x's, return hash with values to left and right, and the differences
-getLeftRight = (x) ->
- n = x.length
- x.sort( (a,b) -> a-b )
-
- xdif = []
- result = {}
- for v in x
- result[v] = {}
-
- for i in [1...n]
- xdif.push(x[i]-x[i-1])
- result[x[i]].left = x[i-1]
- for i in [0...(n-1)]
- result[x[i]].right = x[i+1]
-
- xdif = median(xdif)
- result.mediandiff = xdif
-
- result[x[0]].left = x[0]-xdif
- result[x[n-1]].right = x[n-1]+xdif
- result.extent = [x[0]-xdif/2, x[n-1]+xdif/2]
-
- result
-
-# maximum difference between adjacent values in a vector
-maxdiff = (x) ->
- return null if x.length < 2
- result = x[1] - x[0]
- return result if x.length < 3
- for i in [2...x.length]
- d = x[i] - x[i-1]
- result = d if d > result
- result
-
-# matrix extent, min max
-matrixMin = (mat) ->
- result = mat[0][0]
- for i of mat
- for j of mat[i]
- result = mat[i][j] if result > mat[i][j]
- result
-
-matrixMax = (mat) ->
- result = mat[0][0]
- for i of mat
- for j of mat[i]
- result = mat[i][j] if result < mat[i][j]
- result
-
-matrixMaxAbs = (mat) ->
- result = Math.abs(mat[0][0])
- for i of mat
- for j of mat[i]
- result = Math.abs(mat[i][j]) if result < mat[i][j]
- result
-
-matrixExtent = (mat) -> [matrixMin(mat), matrixMax(mat)]
-
-d3.selection.prototype.moveToFront = () ->
- this.each () -> this.parentNode.appendChild(this)
-
-d3.selection.prototype.moveToBack = () ->
- this.each () ->
- firstChild = this.parentNode.firstchild
- this.parentNode.insertBefore(this, firstChild) if firstChild
-
-forceAsArray = (x) ->
- return x if Array.isArray(x)
- [x]
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/panelutil.js b/wqflask/wqflask/static/new/javascript/panelutil.js index d5e7fd27..07384f2b 100644 --- a/wqflask/wqflask/static/new/javascript/panelutil.js +++ b/wqflask/wqflask/static/new/javascript/panelutil.js @@ -1,324 +1,319 @@ -// Generated by CoffeeScript 1.6.1 -(function() { - var chrscales, expand2vector, forceAsArray, formatAxis, getLeftRight, matrixExtent, matrixMax, matrixMaxAbs, matrixMin, maxdiff, median, pullVarAsArray, reorgLodData, root, selectGroupColors, unique; - - root = typeof exports !== "undefined" && exports !== null ? exports : this; - - formatAxis = function(d) { - var ndig; - d = d[1] - d[0]; - ndig = Math.floor(Math.log(d % 10) / Math.log(10)); - if (ndig > 0) { - ndig = 0; - } - ndig = Math.abs(ndig); - return d3.format("." + ndig + "f"); - }; - - unique = function(x) { - var output, v, _i, _len, _results; - output = {}; - for (_i = 0, _len = x.length; _i < _len; _i++) { - v = x[_i]; - if (v) { - output[v] = v; - } - } - _results = []; - for (v in output) { - _results.push(output[v]); - } - return _results; - }; - - pullVarAsArray = function(data, variable) { - var i, v; - v = []; - for (i in data) { - v = v.concat(data[i][variable]); - } - return v; - }; - - reorgLodData = function(data, lodvarname) { - var chr, i, j, lodcolumn, lodval, marker, pos, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2; - if (lodvarname == null) { - lodvarname = null; - } - data.posByChr = {}; - data.lodByChr = {}; - _ref = data.chrnames; - for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) { - chr = _ref[i]; - data.posByChr[chr] = []; - data.lodByChr[chr] = []; - _ref1 = data.pos; - for (j = _j = 0, _len1 = _ref1.length; _j < _len1; j = ++_j) { - pos = _ref1[j]; - if (data.chr[j] === chr) { - data.posByChr[chr].push(pos); - if (!Array.isArray(data.lodnames)) { - data.lodnames = [data.lodnames]; - } - lodval = (function() { - var _k, _len2, _ref2, _results; - _ref2 = data.lodnames; - _results = []; - for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) { - lodcolumn = _ref2[_k]; - _results.push(data[lodcolumn][j]); - } - return _results; - })(); - data.lodByChr[chr].push(lodval); - } - } - } - if (lodvarname != null) { - data.markers = []; - _ref2 = data.markernames; - for (i = _k = 0, _len2 = _ref2.length; _k < _len2; i = ++_k) { - marker = _ref2[i]; - if (marker !== "") { - data.markers.push({ - name: marker, - chr: data.chr[i], - pos: data.pos[i], - lod: data[lodvarname][i] - }); - } - } - } - return data; - }; - - chrscales = function(data, width, chrGap, leftMargin, pad4heatmap) { - var L, chr, chrEnd, chrLength, chrStart, cur, d, i, maxd, rng, totalChrLength, w, _i, _j, _len, _len1, _ref, _ref1; - chrStart = []; - chrEnd = []; - chrLength = []; - totalChrLength = 0; - maxd = 0; - _ref = data.chrnames; - for (_i = 0, _len = _ref.length; _i < _len; _i++) { - chr = _ref[_i]; - d = maxdiff(data.posByChr[chr]); - if (d > maxd) { - maxd = d; - } - rng = d3.extent(data.posByChr[chr]); - chrStart.push(rng[0]); - chrEnd.push(rng[1]); - L = rng[1] - rng[0]; - chrLength.push(L); - totalChrLength += L; - } - if (pad4heatmap) { - data.recwidth = maxd; - chrStart = chrStart.map(function(x) { - return x - maxd / 2; - }); - chrEnd = chrEnd.map(function(x) { - return x + maxd / 2; - }); - chrLength = chrLength.map(function(x) { - return x + maxd; - }); - totalChrLength += chrLength.length * maxd; - } - data.chrStart = []; - data.chrEnd = []; - cur = leftMargin; - if (!pad4heatmap) { - cur += chrGap / 2; - } - data.xscale = {}; - _ref1 = data.chrnames; - for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) { - chr = _ref1[i]; - data.chrStart.push(cur); - w = Math.round((width - chrGap * (data.chrnames.length - pad4heatmap)) / totalChrLength * chrLength[i]); - data.chrEnd.push(cur + w); - cur = data.chrEnd[i] + chrGap; - data.xscale[chr] = d3.scale.linear().domain([chrStart[i], chrEnd[i]]).range([data.chrStart[i], data.chrEnd[i]]); - } - return data; - }; - - selectGroupColors = function(ngroup, palette) { - if (ngroup === 0) { - return []; - } - if (palette === "dark") { - if (ngroup === 1) { - return ["slateblue"]; - } - if (ngroup === 2) { - return ["MediumVioletRed", "slateblue"]; - } - if (ngroup <= 9) { - return colorbrewer.Set1[ngroup]; - } - return d3.scale.category20().range().slice(0, ngroup); - } else { - if (ngroup === 1) { - return [d3.rgb(190, 190, 190)]; - } - if (ngroup === 2) { - return ["lightpink", "lightblue"]; - } - if (ngroup <= 9) { - return colorbrewer.Pastel1[ngroup]; - } - return ["#8fc7f4", "#fed7f8", "#ffbf8e", "#fffbb8", "#8ce08c", "#d8ffca", "#f68788", "#ffd8d6", "#d4a7fd", "#f5f0f5", "#cc968b", "#f4dcd4", "#f3b7f2", "#f7f6f2", "#bfbfbf", "#f7f7f7", "#fcfd82", "#fbfbcd", "#87feff", "#defaf5"].slice(0, ngroup); - } - }; - - expand2vector = function(input, n) { - var i; - if (Array.isArray(input) && input.length >= n) { - return input; - } - if (!Array.isArray(input)) { - input = [input]; - } - if (input.length === 1 && n > 1) { - input = (function() { - var _results; - _results = []; - for (i in d3.range(n)) { - _results.push(input[0]); - } - return _results; - })(); - } - return input; - }; - - median = function(x) { - var n; - if (x == null) { - return null; - } - n = x.length; - x.sort(function(a, b) { - return a - b; - }); - if (n % 2 === 1) { - return x[(n - 1) / 2]; - } - return (x[n / 2] + x[(n / 2) - 1]) / 2; - }; - - getLeftRight = function(x) { - var i, n, result, v, xdif, _i, _j, _k, _len, _ref; - n = x.length; - x.sort(function(a, b) { - return a - b; - }); - xdif = []; - result = {}; - for (_i = 0, _len = x.length; _i < _len; _i++) { - v = x[_i]; - result[v] = {}; - } - for (i = _j = 1; 1 <= n ? _j < n : _j > n; i = 1 <= n ? ++_j : --_j) { - xdif.push(x[i] - x[i - 1]); - result[x[i]].left = x[i - 1]; - } - for (i = _k = 0, _ref = n - 1; 0 <= _ref ? _k < _ref : _k > _ref; i = 0 <= _ref ? ++_k : --_k) { - result[x[i]].right = x[i + 1]; - } - xdif = median(xdif); - result.mediandiff = xdif; - result[x[0]].left = x[0] - xdif; - result[x[n - 1]].right = x[n - 1] + xdif; - result.extent = [x[0] - xdif / 2, x[n - 1] + xdif / 2]; - return result; - }; - - maxdiff = function(x) { - var d, i, result, _i, _ref; - if (x.length < 2) { - return null; - } - result = x[1] - x[0]; - if (x.length < 3) { - return result; - } - for (i = _i = 2, _ref = x.length; 2 <= _ref ? _i < _ref : _i > _ref; i = 2 <= _ref ? ++_i : --_i) { - d = x[i] - x[i - 1]; - if (d > result) { - result = d; - } - } - return result; - }; - - matrixMin = function(mat) { - var i, j, result; - result = mat[0][0]; - for (i in mat) { - for (j in mat[i]) { - if (result > mat[i][j]) { - result = mat[i][j]; - } - } - } - return result; - }; - - matrixMax = function(mat) { - var i, j, result; - result = mat[0][0]; - for (i in mat) { - for (j in mat[i]) { - if (result < mat[i][j]) { - result = mat[i][j]; - } - } - } - return result; - }; - - matrixMaxAbs = function(mat) { - var i, j, result; - result = Math.abs(mat[0][0]); - for (i in mat) { - for (j in mat[i]) { - if (result < mat[i][j]) { - result = Math.abs(mat[i][j]); - } - } - } - return result; - }; - - matrixExtent = function(mat) { - return [matrixMin(mat), matrixMax(mat)]; - }; - - d3.selection.prototype.moveToFront = function() { - return this.each(function() { - return this.parentNode.appendChild(this); - }); - }; - - d3.selection.prototype.moveToBack = function() { - return this.each(function() { - var firstChild; - firstChild = this.parentNode.firstchild; - if (firstChild) { - return this.parentNode.insertBefore(this, firstChild); - } - }); - }; - - forceAsArray = function(x) { - if (Array.isArray(x)) { - return x; - } - return [x]; - }; - -}).call(this); +// Generated by CoffeeScript 1.7.1
+var chrscales, expand2vector, forceAsArray, formatAxis, getLeftRight, matrixExtent, matrixMax, matrixMaxAbs, matrixMin, maxdiff, median, pullVarAsArray, reorgLodData, selectGroupColors, unique;
+
+formatAxis = function(d) {
+ var ndig;
+ d = d[1] - d[0];
+ ndig = Math.floor(Math.log(d % 10) / Math.log(10));
+ if (ndig > 0) {
+ ndig = 0;
+ }
+ ndig = Math.abs(ndig);
+ return d3.format("." + ndig + "f");
+};
+
+unique = function(x) {
+ var output, v, _i, _len, _results;
+ output = {};
+ for (_i = 0, _len = x.length; _i < _len; _i++) {
+ v = x[_i];
+ if (v) {
+ output[v] = v;
+ }
+ }
+ _results = [];
+ for (v in output) {
+ _results.push(output[v]);
+ }
+ return _results;
+};
+
+pullVarAsArray = function(data, variable) {
+ var i, v;
+ v = [];
+ for (i in data) {
+ v = v.concat(data[i][variable]);
+ }
+ return v;
+};
+
+reorgLodData = function(data, lodvarname) {
+ var chr, i, j, lodcolumn, lodval, marker, pos, _i, _j, _k, _len, _len1, _len2, _ref, _ref1, _ref2;
+ if (lodvarname == null) {
+ lodvarname = null;
+ }
+ data.posByChr = {};
+ data.lodByChr = {};
+ _ref = data.chrnames;
+ for (i = _i = 0, _len = _ref.length; _i < _len; i = ++_i) {
+ chr = _ref[i];
+ data.posByChr[chr] = [];
+ data.lodByChr[chr] = [];
+ _ref1 = data.pos;
+ for (j = _j = 0, _len1 = _ref1.length; _j < _len1; j = ++_j) {
+ pos = _ref1[j];
+ if (data.chr[j] === chr) {
+ data.posByChr[chr].push(pos);
+ if (!Array.isArray(data.lodnames)) {
+ data.lodnames = [data.lodnames];
+ }
+ lodval = (function() {
+ var _k, _len2, _ref2, _results;
+ _ref2 = data.lodnames;
+ _results = [];
+ for (_k = 0, _len2 = _ref2.length; _k < _len2; _k++) {
+ lodcolumn = _ref2[_k];
+ _results.push(data[lodcolumn][j]);
+ }
+ return _results;
+ })();
+ data.lodByChr[chr].push(lodval);
+ }
+ }
+ }
+ if (lodvarname != null) {
+ data.markers = [];
+ _ref2 = data.markernames;
+ for (i = _k = 0, _len2 = _ref2.length; _k < _len2; i = ++_k) {
+ marker = _ref2[i];
+ if (marker !== "") {
+ data.markers.push({
+ name: marker,
+ chr: data.chr[i],
+ pos: data.pos[i],
+ lod: data[lodvarname][i]
+ });
+ }
+ }
+ }
+ return data;
+};
+
+chrscales = function(data, width, chrGap, leftMargin, pad4heatmap) {
+ var L, chr, chrEnd, chrLength, chrStart, cur, d, i, maxd, rng, totalChrLength, w, _i, _j, _len, _len1, _ref, _ref1;
+ chrStart = [];
+ chrEnd = [];
+ chrLength = [];
+ totalChrLength = 0;
+ maxd = 0;
+ _ref = data.chrnames;
+ for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+ chr = _ref[_i];
+ d = maxdiff(data.posByChr[chr]);
+ if (d > maxd) {
+ maxd = d;
+ }
+ rng = d3.extent(data.posByChr[chr]);
+ chrStart.push(rng[0]);
+ chrEnd.push(rng[1]);
+ L = rng[1] - rng[0];
+ chrLength.push(L);
+ totalChrLength += L;
+ }
+ if (pad4heatmap) {
+ data.recwidth = maxd;
+ chrStart = chrStart.map(function(x) {
+ return x - maxd / 2;
+ });
+ chrEnd = chrEnd.map(function(x) {
+ return x + maxd / 2;
+ });
+ chrLength = chrLength.map(function(x) {
+ return x + maxd;
+ });
+ totalChrLength += chrLength.length * maxd;
+ }
+ data.chrStart = [];
+ data.chrEnd = [];
+ cur = leftMargin;
+ if (!pad4heatmap) {
+ cur += chrGap / 2;
+ }
+ data.xscale = {};
+ _ref1 = data.chrnames;
+ for (i = _j = 0, _len1 = _ref1.length; _j < _len1; i = ++_j) {
+ chr = _ref1[i];
+ data.chrStart.push(cur);
+ w = Math.round((width - chrGap * (data.chrnames.length - pad4heatmap)) / totalChrLength * chrLength[i]);
+ data.chrEnd.push(cur + w);
+ cur = data.chrEnd[i] + chrGap;
+ data.xscale[chr] = d3.scale.linear().domain([chrStart[i], chrEnd[i]]).range([data.chrStart[i], data.chrEnd[i]]);
+ }
+ return data;
+};
+
+selectGroupColors = function(ngroup, palette) {
+ if (ngroup === 0) {
+ return [];
+ }
+ if (palette === "dark") {
+ if (ngroup === 1) {
+ return ["slateblue"];
+ }
+ if (ngroup === 2) {
+ return ["MediumVioletRed", "slateblue"];
+ }
+ if (ngroup <= 9) {
+ return colorbrewer.Set1[ngroup];
+ }
+ return d3.scale.category20().range().slice(0, ngroup);
+ } else {
+ if (ngroup === 1) {
+ return [d3.rgb(190, 190, 190)];
+ }
+ if (ngroup === 2) {
+ return ["lightpink", "lightblue"];
+ }
+ if (ngroup <= 9) {
+ return colorbrewer.Pastel1[ngroup];
+ }
+ return ["#8fc7f4", "#fed7f8", "#ffbf8e", "#fffbb8", "#8ce08c", "#d8ffca", "#f68788", "#ffd8d6", "#d4a7fd", "#f5f0f5", "#cc968b", "#f4dcd4", "#f3b7f2", "#f7f6f2", "#bfbfbf", "#f7f7f7", "#fcfd82", "#fbfbcd", "#87feff", "#defaf5"].slice(0, ngroup);
+ }
+};
+
+expand2vector = function(input, n) {
+ var i;
+ if (Array.isArray(input) && input.length >= n) {
+ return input;
+ }
+ if (!Array.isArray(input)) {
+ input = [input];
+ }
+ if (input.length === 1 && n > 1) {
+ input = (function() {
+ var _results;
+ _results = [];
+ for (i in d3.range(n)) {
+ _results.push(input[0]);
+ }
+ return _results;
+ })();
+ }
+ return input;
+};
+
+median = function(x) {
+ var n;
+ if (x == null) {
+ return null;
+ }
+ n = x.length;
+ x.sort(function(a, b) {
+ return a - b;
+ });
+ if (n % 2 === 1) {
+ return x[(n - 1) / 2];
+ }
+ return (x[n / 2] + x[(n / 2) - 1]) / 2;
+};
+
+getLeftRight = function(x) {
+ var i, n, result, v, xdif, _i, _j, _k, _len, _ref;
+ n = x.length;
+ x.sort(function(a, b) {
+ return a - b;
+ });
+ xdif = [];
+ result = {};
+ for (_i = 0, _len = x.length; _i < _len; _i++) {
+ v = x[_i];
+ result[v] = {};
+ }
+ for (i = _j = 1; 1 <= n ? _j < n : _j > n; i = 1 <= n ? ++_j : --_j) {
+ xdif.push(x[i] - x[i - 1]);
+ result[x[i]].left = x[i - 1];
+ }
+ for (i = _k = 0, _ref = n - 1; 0 <= _ref ? _k < _ref : _k > _ref; i = 0 <= _ref ? ++_k : --_k) {
+ result[x[i]].right = x[i + 1];
+ }
+ xdif = median(xdif);
+ result.mediandiff = xdif;
+ result[x[0]].left = x[0] - xdif;
+ result[x[n - 1]].right = x[n - 1] + xdif;
+ result.extent = [x[0] - xdif / 2, x[n - 1] + xdif / 2];
+ return result;
+};
+
+maxdiff = function(x) {
+ var d, i, result, _i, _ref;
+ if (x.length < 2) {
+ return null;
+ }
+ result = x[1] - x[0];
+ if (x.length < 3) {
+ return result;
+ }
+ for (i = _i = 2, _ref = x.length; 2 <= _ref ? _i < _ref : _i > _ref; i = 2 <= _ref ? ++_i : --_i) {
+ d = x[i] - x[i - 1];
+ if (d > result) {
+ result = d;
+ }
+ }
+ return result;
+};
+
+matrixMin = function(mat) {
+ var i, j, result;
+ result = mat[0][0];
+ for (i in mat) {
+ for (j in mat[i]) {
+ if (result > mat[i][j]) {
+ result = mat[i][j];
+ }
+ }
+ }
+ return result;
+};
+
+matrixMax = function(mat) {
+ var i, j, result;
+ result = mat[0][0];
+ for (i in mat) {
+ for (j in mat[i]) {
+ if (result < mat[i][j]) {
+ result = mat[i][j];
+ }
+ }
+ }
+ return result;
+};
+
+matrixMaxAbs = function(mat) {
+ var i, j, result;
+ result = Math.abs(mat[0][0]);
+ for (i in mat) {
+ for (j in mat[i]) {
+ if (result < mat[i][j]) {
+ result = Math.abs(mat[i][j]);
+ }
+ }
+ }
+ return result;
+};
+
+matrixExtent = function(mat) {
+ return [matrixMin(mat), matrixMax(mat)];
+};
+
+d3.selection.prototype.moveToFront = function() {
+ return this.each(function() {
+ return this.parentNode.appendChild(this);
+ });
+};
+
+d3.selection.prototype.moveToBack = function() {
+ return this.each(function() {
+ var firstChild;
+ firstChild = this.parentNode.firstchild;
+ if (firstChild) {
+ return this.parentNode.insertBefore(this, firstChild);
+ }
+ });
+};
+
+forceAsArray = function(x) {
+ if (Array.isArray(x)) {
+ return x;
+ }
+ return [x];
+};
diff --git a/wqflask/wqflask/static/new/javascript/scatterplot.coffee b/wqflask/wqflask/static/new/javascript/scatterplot.coffee index 546205ce..2d809071 100644 --- a/wqflask/wqflask/static/new/javascript/scatterplot.coffee +++ b/wqflask/wqflask/static/new/javascript/scatterplot.coffee @@ -1,8 +1,10 @@ +root = exports ? this
+
scatterplot = () ->
width = 800
- height = 500
+ height = 600
margin = {left:60, top:40, right:40, bottom: 40, inner:5}
- axispos = {xtitle:25, ytitle:30, xlabel:5, ylabel:5}
+ axispos = {xtitle:25, ytitle:45, xlabel:5, ylabel:5}
titlepos = 20
xNA = {handle:true, force:false, width:15, gap:10}
yNA = {handle:true, force:false, width:15, gap:10}
@@ -16,7 +18,7 @@ scatterplot = () -> pointcolor = null
pointstroke = "black"
pointsize = 3 # default = no visible points at markers
- title = ""
+ title = "Correlation Scatterplot"
xlab = "X"
ylab = "Y"
rotate_ylab = null
@@ -25,7 +27,7 @@ scatterplot = () -> xvar = 0
yvar = 1
pointsSelect = null
- dataByInd = true
+ dataByInd = false
## the main function
chart = (selection) ->
@@ -38,11 +40,16 @@ scatterplot = () -> x = data.data[xvar]
y = data.data[yvar]
+ console.log("x:", x)
+ console.log("y:", y)
+
# grab indID if it's there
# if no indID, create a vector of them
indID = data?.indID ? null
indID = indID ? [1..x.length]
+ console.log("indID:", indID)
+
# groups of colors
group = data?.group ? (1 for i in x)
ngroup = d3.max(group)
@@ -217,6 +224,16 @@ scatterplot = () -> .offset([0,10])
svg.call(indtip)
+ #g.append("line")
+ # .attr("x1")
+ #
+ #g.append("line")
+ # .attr("x1", xscale(minx))
+ # .attr("x2", xscale(maxx*0.995))
+ # .attr("y2", yscale(slope*maxx*0.995+intercept))
+ # .style("stroke", "black")
+ # .style("stroke-width", 2);
+
points = g.append("g").attr("id", "points")
pointsSelect =
points.selectAll("empty")
@@ -404,4 +421,6 @@ scatterplot = () -> return pointsSelect
# return the chart function
- chart
\ No newline at end of file + chart
+
+root.scatterplot = scatterplot
\ No newline at end of file diff --git a/wqflask/wqflask/static/new/javascript/scatterplot.js b/wqflask/wqflask/static/new/javascript/scatterplot.js index 23a66e6b..ac32301b 100644 --- a/wqflask/wqflask/static/new/javascript/scatterplot.js +++ b/wqflask/wqflask/static/new/javascript/scatterplot.js @@ -1,11 +1,13 @@ // Generated by CoffeeScript 1.6.1 (function() { - var scatterplot; + var root, scatterplot; + + root = typeof exports !== "undefined" && exports !== null ? exports : this; scatterplot = function() { var axispos, chart, dataByInd, height, margin, nxticks, nyticks, pointcolor, pointsSelect, pointsize, pointstroke, rectcolor, rotate_ylab, title, titlepos, width, xNA, xlab, xlim, xscale, xticks, xvar, yNA, ylab, ylim, yscale, yticks, yvar; width = 800; - height = 500; + height = 600; margin = { left: 60, top: 40, @@ -15,7 +17,7 @@ }; axispos = { xtitle: 25, - ytitle: 30, + ytitle: 45, xlabel: 5, ylabel: 5 }; @@ -42,7 +44,7 @@ pointcolor = null; pointstroke = "black"; pointsize = 3; - title = ""; + title = "Correlation Scatterplot"; xlab = "X"; ylab = "Y"; rotate_ylab = null; @@ -51,7 +53,7 @@ xvar = 0; yvar = 1; pointsSelect = null; - dataByInd = true; + dataByInd = false; chart = function(selection) { return selection.each(function(data) { var g, gEnter, group, i, indID, indtip, na_value, ngroup, panelheight, paneloffset, panelwidth, points, svg, titlegrp, x, xaxis, xrange, xs, y, yaxis, yrange, ys, _i, _ref, _ref1, _ref2, _results; @@ -66,12 +68,15 @@ x = data.data[xvar]; y = data.data[yvar]; } + console.log("x:", x); + console.log("y:", y); indID = (_ref = data != null ? data.indID : void 0) != null ? _ref : null; indID = indID != null ? indID : (function() { _results = []; for (var _i = 1, _ref1 = x.length; 1 <= _ref1 ? _i <= _ref1 : _i >= _ref1; 1 <= _ref1 ? _i++ : _i--){ _results.push(_i); } return _results; }).apply(this); + console.log("indID:", indID); group = (_ref2 = data != null ? data.group : void 0) != null ? _ref2 : (function() { var _j, _len, _results1; _results1 = []; @@ -403,4 +408,6 @@ return chart; }; + root.scatterplot = scatterplot; + }).call(this); diff --git a/wqflask/wqflask/static/new/javascript/show_trait.coffee b/wqflask/wqflask/static/new/javascript/show_trait.coffee index a410baf3..6b31124c 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait.coffee +++ b/wqflask/wqflask/static/new/javascript/show_trait.coffee @@ -95,6 +95,21 @@ $ -> new Box_Plot(all_samples) + d3.select("#select_compare_trait").on("click", => + open_trait_selection() + ) + + open_trait_selection = () -> + $('#collections_holder').load('/collections/list?color_by_trait #collections_list', => + $.colorbox( + inline: true + href: "#collections_holder" + ) + #Removes the links from the collection names, because clicking them would leave the page + #instead of loading the list of traits in the colorbox + $('a.collection_name').attr( 'onClick', 'return false' ) + ) + hide_tabs = (start) -> for x in [start..10] $("#stats_tabs" + x).hide() @@ -232,7 +247,6 @@ $ -> $('#show_hide_outliers').val("Hide Outliers") console.log("Should be now Hide Outliers") - ##Calculate Correlations Code on_corr_method_change = -> diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js index d4e01e6d..2f7dcf78 100755 --- a/wqflask/wqflask/static/new/javascript/show_trait.js +++ b/wqflask/wqflask/static/new/javascript/show_trait.js @@ -58,7 +58,8 @@ ]; $(function() { - var block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, populate_sample_attributes_values_dropdown, process_id, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values; + var block_by_attribute_value, block_by_index, block_outliers, change_stats_value, create_value_dropdown, edit_data_change, export_sample_table_data, get_sample_table_data, hide_no_value, hide_tabs, make_table, on_corr_method_change, open_trait_selection, populate_sample_attributes_values_dropdown, process_id, reset_samples_table, sample_group_types, sample_lists, show_hide_outliers, stats_mdp_change, update_stat_values, + _this = this; sample_lists = js_data.sample_lists; sample_group_types = js_data.sample_group_types; root.bar_chart = new Bar_Chart(sample_lists[0]); @@ -92,6 +93,19 @@ return new Box_Plot(all_samples); } }); + d3.select("#select_compare_trait").on("click", function() { + return open_trait_selection(); + }); + open_trait_selection = function() { + var _this = this; + return $('#collections_holder').load('/collections/list?color_by_trait #collections_list', function() { + $.colorbox({ + inline: true, + href: "#collections_holder" + }); + return $('a.collection_name').attr('onClick', 'return false'); + }); + }; hide_tabs = function(start) { var x, _i, _results; _results = []; diff --git a/wqflask/wqflask/templates/corr_scatter_plot.html b/wqflask/wqflask/templates/corr_scatter_plot_old.html index dd9168a8..79c63ada 100755 --- a/wqflask/wqflask/templates/corr_scatter_plot.html +++ b/wqflask/wqflask/templates/corr_scatter_plot_old.html @@ -5,6 +5,8 @@ <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/panelutil.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/corr_scatter_plot.css" /> {% endblock %} @@ -16,17 +18,17 @@ <input type="hidden" name="trait_2" value="{{trait_2.name}}"> <table class="table" style="width: auto;"> <tr> - <td>Canvas Width</td> - <td>Canvas Height</td> - <td>Circle Color</td> - <td>Circle Radius</td> + <td>Canvas Width</td> + <td>Canvas Height</td> + <td>Circle Color</td> + <td>Circle Radius</td> <td>Line Color</td> - <td>Line Width</td> + <td>Line Width</td> <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><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> @@ -34,7 +36,7 @@ <option value="blue">Blue</option> </select> </td> - <td><input type="text" name="circle_radius" value="{{circle_radius}}" style="width: 100px;"></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> @@ -42,7 +44,7 @@ <option value="blue">Blue</option> </select> </td> - <td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td> + <td><input type="text" name="line_width" value="{{line_width}}" style="width: 100px;"></td> </tr> </table> </form> @@ -55,5 +57,7 @@ </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> + <script language="javascript" type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script> + <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.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/corr_scatterplot.html b/wqflask/wqflask/templates/corr_scatterplot.html new file mode 100644 index 00000000..2b2119ea --- /dev/null +++ b/wqflask/wqflask/templates/corr_scatterplot.html @@ -0,0 +1,67 @@ +{% 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/panelutil.css" />
+ <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.min.css" />
+{% endblock %}
+
+{% block content %}
+<!--<form action="" method="get">
+<input type="hidden" name="dataset_1" value="{{data_set_1.name}}">
+<input type="hidden" name="dataset_2" value="{{data_set_2.name}}">
+<input type="hidden" name="trait_1" value="{{trait_1.name}}">
+<input type="hidden" name="trait_2" value="{{trait_2.name}}">
+<table class="table" style="width: auto;">
+ <tr>
+ <td>Canvas Width</td>
+ <td>Canvas Height</td>
+ <td>Circle Color</td>
+ <td>Circle Radius</td>
+ <td>Line Color</td>
+ <td>Line Width</td>
+ <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>
+ </tr>
+</table>
+</form>-->
+
+<div id="chart1" class="qtlcharts"></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/js_external/d3-tip.min.js"></script>
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/colorbrewer.js"></script>
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/panelutil.js"></script>
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/scatterplot.js"></script>
+ <script language="javascript" type="text/javascript" src="/static/new/javascript/draw_corr_scatterplot.js"></script>
+{% endblock %}
\ No newline at end of file diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html index ff05e859..ae4adf25 100755 --- a/wqflask/wqflask/templates/show_trait.html +++ b/wqflask/wqflask/templates/show_trait.html @@ -5,6 +5,8 @@ <link rel="stylesheet" type="text/css" href="/static/new/css/interval_mapping.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/bar_chart.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/box_plot.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/panelutil.css" /> + <link rel="stylesheet" type="text/css" href="/static/new/css/d3-tip.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" /> {% endblock %} @@ -16,9 +18,11 @@ <form method="post" action="/corr_compute" name="trait_page" id="trait_data_form" class="form-horizontal"> + <div id="hidden_inputs"> {% for key in hddn %} - <input type="hidden" name="{{ key }}" value="{{ hddn[key] }}"> + <input type="hidden" name="{{ key }}" value="{{ hddn[key] }}"> {% endfor %} + </div> <input type="hidden" name="temp_uuid" id="temp_uuid" value="{{ temp_uuid }}"> @@ -52,17 +56,22 @@ <script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> <script type="text/javascript" src="/static/new/js_external/underscore-min.js"></script> <script type="text/javascript" src="/static/new/js_external/underscore.string.min.js"></script> + <script type="text/javascript" src="/static/new/js_external/d3-tip.min.js"></script> + <script type="text/javascript" src="/static/new/javascript/colorbrewer.js"></script> <script type="text/javascript" src="/static/new/packages/ValidationPlugin/dist/jquery.validate.min.js"></script> + <script type="text/javascript" src="/static/new/javascript/panelutil.js"></script> <script type="text/javascript" src="/static/new/javascript/stats.js"></script> <script type="text/javascript" src="/static/new/javascript/box.js"></script> - <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script> <script type="text/javascript" src="/static/new/javascript/bar_chart.js"></script> <script type="text/javascript" src="/static/new/javascript/histogram.js"></script> <script type="text/javascript" src="/static/new/javascript/box_plot.js"></script> + <script type="text/javascript" src="/static/new/javascript/scatterplot.js"></script> + <script type="text/javascript" src="/static/new/javascript/compare_traits_scatterplot.js"></script> <script type="text/javascript" src="/static/new/javascript/show_trait_mapping_tools.js"></script> <script type="text/javascript" src="/static/new/javascript/show_trait.js"></script> + <script type="text/javascript" src="/static/new/javascript/get_traits_from_collection.js"></script> <script type="text/javascript" src="/static/new/javascript/validation.js"></script> <script language="javascript" type="text/javascript" src="/static/new/packages/DataTables/js/jquery.dataTables.min.js"></script> diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html index a2c7564f..07f33d28 100755 --- a/wqflask/wqflask/templates/show_trait_mapping_tools.html +++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html @@ -58,7 +58,22 @@ <input name="mapping_bootstraps" value="2000" type="text" /> </div> </div> - + + <div class="control-group mapping_method_fields"> + <label class="control-label">Display Additive Effect</label> + <div class="controls" id="display_additive_effect"> + <label class="radio inline"> + <input type="radio" name="display_additive" + id="display_dditive" value="yes" checked> + Yes + </label> + <label class="radio inline"> + <input type="radio" name="display_additive" + id="display_additive" value="no"> + No + </label> + </div> + </div> <div class="control-group mapping_method_fields"> <label class="control-label"><b>Composite Mapping</b></label> @@ -117,11 +132,11 @@ <label class="control-label">Display all</label> <div class="controls"> <label class="radio inline"> - <input type="radio" name="display_all_reaper" value="True" checked> + <input type="radio" name="display_all_pylmm" value="True" checked> Yes </label> <label class="radio inline"> - <input type="radio" name="display_all_reaper" value="False"> + <input type="radio" name="display_all_pylmm" value="False"> No </label> </div> diff --git a/wqflask/wqflask/templates/show_trait_statistics_new.html b/wqflask/wqflask/templates/show_trait_statistics_new.html index 8f6f07ce..9b6b37a4 100755 --- a/wqflask/wqflask/templates/show_trait_statistics_new.html +++ b/wqflask/wqflask/templates/show_trait_statistics_new.html @@ -10,6 +10,9 @@ <li> <a href="#bar_chart_tab" data-toggle="tab">Bar Chart</a> </li> + <li> + <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a> + </li> <!-- <li> <a href="#box_plot_tab" data-toggle="tab">Box Plot</a> </li>--> @@ -25,7 +28,7 @@ <br><br> {% endif %} <div id="histogram_container"> - <div id="histogram"></div> + <div id="histogram" class="barchart"></div> </div> </div> <div class="tab-pane" id="bar_chart_tab"> @@ -64,7 +67,7 @@ </button> </div> <div id="bar_chart_container"> - <div id="bar_chart"></div> + <div id="bar_chart" class="barchart"></div> </div> </div> <!-- <div class="tab-pane" id="box_plot_tab"> @@ -80,6 +83,18 @@ <div id="box_plot"></div> </div> </div>--> + <div class="tab-pane" id="scatterplot_matrix"> + + <div class="btn-group"> + <button type="button" class="btn" id="select_compare_trait"> + <i class="icon-th-large"></i> Select Trait + </button> + </div> + <div id="scatterplot_container"> + <div id="comparison_scatterplot" class="qtlcharts"></div> + </div> + </div> + </div> </div> </div> diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py index 7bde1006..aa33700f 100755 --- a/wqflask/wqflask/views.py +++ b/wqflask/wqflask/views.py @@ -270,6 +270,7 @@ def interval_mapping_page(): 'chromosome', 'num_permutations', 'do_bootstraps', + 'display_additive', 'default_control_locus', 'control_locus' ) @@ -330,7 +331,7 @@ def corr_scatter_plot_page(): 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__) + return render_template("corr_scatterplot.html", **template_vars.__dict__) #@app.route("/int_mapping", methods=('POST',)) #def interval_mapping_page(): |