From 33cf7a7dafc0bf338f98eb793ffd87d4442a58fd Mon Sep 17 00:00:00 2001 From: Zachary Sloan Date: Thu, 12 Jun 2014 20:21:10 +0000 Subject: Long overdue of commit to changes that add a scatter plot to the correlation page and let you select a trait from your collection on the trait page and do a scatter plot against that triat as well. There are a number of accompanying js and css files written by Karl Broman that are needed for these features. The option to compare against more than just one trait still needs to be added for the trait page scatterplot function --- wqflask/wqflask/correlation/corr_scatter_plot.py | 13 +- .../wqflask/interval_mapping/interval_mapping.py | 10 +- wqflask/wqflask/show_trait/show_trait.py | 1 + wqflask/wqflask/static/new/css/bar_chart.css | 4 +- wqflask/wqflask/static/new/css/d3-tip.min.css | 1 + wqflask/wqflask/static/new/css/panelutil.css | 54 +- .../wqflask/static/new/javascript/colorbrewer.js | 302 ++++++++++ .../javascript/compare_traits_scatterplot.coffee | 113 ++++ .../new/javascript/compare_traits_scatterplot.js | 109 ++++ .../new/javascript/draw_corr_scatterplot.coffee | 211 +++++++ .../static/new/javascript/draw_corr_scatterplot.js | 50 ++ .../javascript/get_traits_from_collection.coffee | 63 +- .../new/javascript/get_traits_from_collection.js | 64 +- .../wqflask/static/new/javascript/lod_chart.coffee | 103 ++-- .../wqflask/static/new/javascript/panelutil.coffee | 205 ------- wqflask/wqflask/static/new/javascript/panelutil.js | 643 ++++++++++----------- .../static/new/javascript/scatterplot.coffee | 29 +- .../wqflask/static/new/javascript/scatterplot.js | 17 +- .../static/new/javascript/show_trait.coffee | 16 +- .../wqflask/static/new/javascript/show_trait.js | 16 +- wqflask/wqflask/templates/corr_scatter_plot.html | 59 -- .../wqflask/templates/corr_scatter_plot_old.html | 63 ++ wqflask/wqflask/templates/corr_scatterplot.html | 67 +++ wqflask/wqflask/templates/show_trait.html | 13 +- .../templates/show_trait_mapping_tools.html | 21 +- .../templates/show_trait_statistics_new.html | 19 +- wqflask/wqflask/views.py | 3 +- 27 files changed, 1576 insertions(+), 693 deletions(-) create mode 100644 wqflask/wqflask/static/new/css/d3-tip.min.css create mode 100644 wqflask/wqflask/static/new/javascript/colorbrewer.js create mode 100644 wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.coffee create mode 100644 wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.js create mode 100644 wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.coffee create mode 100644 wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js delete mode 100644 wqflask/wqflask/static/new/javascript/panelutil.coffee delete mode 100755 wqflask/wqflask/templates/corr_scatter_plot.html create mode 100755 wqflask/wqflask/templates/corr_scatter_plot_old.html create mode 100644 wqflask/wqflask/templates/corr_scatterplot.html (limited to 'wqflask') 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('') + $('#hidden_inputs').append('') + + 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(''); + } + $('#hidden_inputs').append(''); + 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.html deleted file mode 100755 index dd9168a8..00000000 --- a/wqflask/wqflask/templates/corr_scatter_plot.html +++ /dev/null @@ -1,59 +0,0 @@ -{% extends "base.html" %} - -{% block css %} - - - - - -{% endblock %} - -{% block content %} -
- - - - - - - - - - - - - - - - - - - - - - -
Canvas WidthCanvas HeightCircle ColorCircle RadiusLine ColorLine Width
- - - -
-
-
-{% endblock %} - -{% block js %} - - - - -{% endblock %} \ No newline at end of file diff --git a/wqflask/wqflask/templates/corr_scatter_plot_old.html b/wqflask/wqflask/templates/corr_scatter_plot_old.html new file mode 100755 index 00000000..79c63ada --- /dev/null +++ b/wqflask/wqflask/templates/corr_scatter_plot_old.html @@ -0,0 +1,63 @@ +{% extends "base.html" %} + +{% block css %} + + + + + + + +{% endblock %} + +{% block content %} +
+ + + + + + + + + + + + + + + + + + + + + + +
Canvas WidthCanvas HeightCircle ColorCircle RadiusLine ColorLine Width
+ + + +
+
+
+{% endblock %} + +{% block js %} + + + + + + +{% 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 %} + + + + + + +{% endblock %} + +{% block content %} + + +
+ + +{% endblock %} + +{% block js %} + + + + + + + + +{% 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 @@ + + {% endblock %} @@ -16,9 +18,11 @@
+
{% for key in hddn %} - + {% endfor %} +
@@ -52,17 +56,22 @@ + + + - + + + 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 @@ - + +
+ +
+ + +
+
@@ -117,11 +132,11 @@
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 @@
  • Bar Chart
    • +
  • + Scatterplot Matrix +
    • @@ -25,7 +28,7 @@

    {% endif %}
    -
    +
    @@ -64,7 +67,7 @@
    -
    +
    +
    + +
    + +
    +
    +
    +
    +
    + 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(): -- cgit v1.2.3