aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorZachary Sloan2014-06-12 20:21:10 +0000
committerZachary Sloan2014-06-12 20:21:10 +0000
commit33cf7a7dafc0bf338f98eb793ffd87d4442a58fd (patch)
tree513a1370c8c93a03b168d9896da6493945b1fd21
parent0bdeca3490c1ddbb7fa29165893a97f90eeefba7 (diff)
downloadgenenetwork2-33cf7a7dafc0bf338f98eb793ffd87d4442a58fd.tar.gz
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
-rwxr-xr-xwqflask/wqflask/correlation/corr_scatter_plot.py13
-rwxr-xr-xwqflask/wqflask/interval_mapping/interval_mapping.py10
-rwxr-xr-xwqflask/wqflask/show_trait/show_trait.py1
-rwxr-xr-xwqflask/wqflask/static/new/css/bar_chart.css4
-rw-r--r--wqflask/wqflask/static/new/css/d3-tip.min.css1
-rw-r--r--wqflask/wqflask/static/new/css/panelutil.css54
-rw-r--r--wqflask/wqflask/static/new/javascript/colorbrewer.js302
-rw-r--r--wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.coffee113
-rw-r--r--wqflask/wqflask/static/new/javascript/compare_traits_scatterplot.js109
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.coffee211
-rw-r--r--wqflask/wqflask/static/new/javascript/draw_corr_scatterplot.js50
-rwxr-xr-xwqflask/wqflask/static/new/javascript/get_traits_from_collection.coffee63
-rwxr-xr-xwqflask/wqflask/static/new/javascript/get_traits_from_collection.js64
-rw-r--r--wqflask/wqflask/static/new/javascript/lod_chart.coffee103
-rw-r--r--wqflask/wqflask/static/new/javascript/panelutil.coffee205
-rw-r--r--wqflask/wqflask/static/new/javascript/panelutil.js643
-rw-r--r--wqflask/wqflask/static/new/javascript/scatterplot.coffee29
-rw-r--r--wqflask/wqflask/static/new/javascript/scatterplot.js17
-rwxr-xr-xwqflask/wqflask/static/new/javascript/show_trait.coffee16
-rwxr-xr-xwqflask/wqflask/static/new/javascript/show_trait.js16
-rwxr-xr-xwqflask/wqflask/templates/corr_scatter_plot_old.html (renamed from wqflask/wqflask/templates/corr_scatter_plot.html)24
-rw-r--r--wqflask/wqflask/templates/corr_scatterplot.html67
-rwxr-xr-xwqflask/wqflask/templates/show_trait.html13
-rwxr-xr-xwqflask/wqflask/templates/show_trait_mapping_tools.html21
-rwxr-xr-xwqflask/wqflask/templates/show_trait_statistics_new.html19
-rwxr-xr-xwqflask/wqflask/views.py3
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():