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():