Got anonymous collections working correctly

Got results for the HSNIH and CANDLE marker regression pages (still
some issues with the manhattan plot)

4 files changed, 281 insertions, 100 deletions

diff --git a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee
index 30e6ea5e..74eb2e88 100644
--- a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee
+++ b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.coffee
@@ -29,6 +29,8 @@ class Chr_Manhattan_Plot
         @x_max = d3.max(@x_coords)

         @y_max = d3.max(@y_coords) * 1.2

     

+        @y_threshold = @get_lod_threshold()

+    

         @svg = @create_svg()

 

         @plot_coordinates = _.zip(@x_coords, @y_coords, @marker_names)

@@ -100,11 +102,20 @@ class Chr_Manhattan_Plot
         @y_scale = d3.scale.linear()

             .domain([@y_axis_filter, @y_max])

             .range([@plot_height, @y_buffer])

+            

+    get_lod_threshold: () ->

+        if @y_max/2 > 2

+            return @y_max/2

+        else

+            return 2

+        

 

     create_graph: () ->

         @add_border()

         @add_x_axis()

         @add_y_axis()

+        @add_title()

+        @add_back_button()

         @add_plot_points()

 

     add_border: () ->

@@ -164,7 +175,35 @@ class Chr_Manhattan_Plot
             .attr("class", "y_axis")

             .attr("transform", "translate(" + @x_buffer + ",0)")

             .call(@yAxis)

-            

+

+    add_title: () ->

+        @svg.append("text")

+            .attr("class", "title")

+            .text("Chr " + @chr[0])

+            .attr("x", (d) =>

+                return (@plot_width + @x_buffer)/2

+            )

+            .attr("y", @y_buffer + 20)

+            .attr("dx", "0em")

+            .attr("text-anchor", "middle")

+            .attr("font-family", "sans-serif")

+            .attr("font-size", "18px")

+            .attr("fill", "black")

+

+    add_back_button: () ->

+        @svg.append("text")

+            .attr("class", "back")

+            .text("Return to full view")

+            .attr("x", @x_buffer*2)

+            .attr("y", @y_buffer/2)

+            .attr("dx", "0em")

+            .attr("text-anchor", "middle")

+            .attr("font-family", "sans-serif")

+            .attr("font-size", "18px")

+            .attr("cursor", "pointer")

+            .attr("fill", "black")

+            .on("click", @return_to_full_view)

+

     add_plot_points: () ->

         @plot_point = @svg.selectAll("circle")

             .data(@plot_coordinates)

@@ -176,7 +215,20 @@ class Chr_Manhattan_Plot
             .attr("cy", (d) =>

                 return @y_scale(d[1])

             )

-            .attr("r", 2)

+            .attr("r", (d) =>

+                if d[1] > 2

+                    return 3

+                else

+                    return 2

+            )

+            .attr("fill", (d) =>

+                if d[1] > 2

+                    return "white"

+                else

+                    return "black"

+            )

+            .attr("stroke", "black")

+            .attr("stroke-width", "1")

             .attr("id", (d) =>

                 return "point_" + String(d[2])

             )

@@ -187,16 +239,37 @@ class Chr_Manhattan_Plot
                 this_id = "point_" + String(d[2])

                 d3.select("#" + this_id).classed("d3_highlight", true)

                     .attr("r", 5)

-                    .attr("fill", "yellow")

+                    .attr("stroke", "none")

+                    .attr("fill", "blue")

                     .call(@show_marker_in_table(d))

             )

             .on("mouseout", (d) =>

                 this_id = "point_" + String(d[2])

                 d3.select("#" + this_id).classed("d3_highlight", false)

-                    .attr("r", 2)

-                    .attr("fill", "black")

-                    #.call(@show_marker_in_table())

+                    .attr("r", (d) =>

+                        if d[1] > 2

+                            return 3

+                        else

+                            return 2

+                    )

+                    .attr("fill", (d) =>

+                        if d[1] > 2

+                            return "white"

+                        else

+                            return "black"

+                    )

+                    .attr("stroke", "black")

+                    .attr("stroke-width", "1")

             )

+            .append("svg:title")

+                .text((d) =>

+                    return d[2]

+                )

+

+    return_to_full_view: () ->

+        $('#manhattan_plot').remove()

+        $('#manhattan_plot_container').append('<div id="manhattan_plot"></div>')

+        root.manhattan_plot = new root.Manhattan_Plot

 

     show_marker_in_table: (marker_info) ->

         console.log("in show_marker_in_table")

diff --git a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js
index 2cbab00c..a38cfe5d 100644
--- a/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js
+++ b/wqflask/wqflask/static/new/javascript/chr_manhattan_plot.js
@@ -29,6 +29,7 @@
       this.y_buffer = this.plot_height / 20;
       this.x_max = d3.max(this.x_coords);
       this.y_max = d3.max(this.y_coords) * 1.2;
+      this.y_threshold = this.get_lod_threshold();
       this.svg = this.create_svg();
       this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names);
       console.log("coordinates:", this.plot_coordinates);
@@ -125,10 +126,20 @@
       return this.y_scale = d3.scale.linear().domain([this.y_axis_filter, this.y_max]).range([this.plot_height, this.y_buffer]);
     };
 
+    Chr_Manhattan_Plot.prototype.get_lod_threshold = function() {
+      if (this.y_max / 2 > 2) {
+        return this.y_max / 2;
+      } else {
+        return 2;
+      }
+    };
+
     Chr_Manhattan_Plot.prototype.create_graph = function() {
       this.add_border();
       this.add_x_axis();
       this.add_y_axis();
+      this.add_title();
+      this.add_back_button();
       return this.add_plot_points();
     };
 
@@ -164,27 +175,70 @@
       return this.svg.append("g").attr("class", "y_axis").attr("transform", "translate(" + this.x_buffer + ",0)").call(this.yAxis);
     };
 
+    Chr_Manhattan_Plot.prototype.add_title = function() {
+      var _this = this;
+      return this.svg.append("text").attr("class", "title").text("Chr " + this.chr[0]).attr("x", function(d) {
+        return (_this.plot_width + _this.x_buffer) / 2;
+      }).attr("y", this.y_buffer + 20).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("fill", "black");
+    };
+
+    Chr_Manhattan_Plot.prototype.add_back_button = function() {
+      return this.svg.append("text").attr("class", "back").text("Return to full view").attr("x", this.x_buffer * 2).attr("y", this.y_buffer / 2).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("cursor", "pointer").attr("fill", "black").on("click", this.return_to_full_view);
+    };
+
     Chr_Manhattan_Plot.prototype.add_plot_points = function() {
       var _this = this;
       return this.plot_point = this.svg.selectAll("circle").data(this.plot_coordinates).enter().append("circle").attr("cx", function(d) {
         return _this.x_scale(d[0]);
       }).attr("cy", function(d) {
         return _this.y_scale(d[1]);
-      }).attr("r", 2).attr("id", function(d) {
+      }).attr("r", function(d) {
+        if (d[1] > 2) {
+          return 3;
+        } else {
+          return 2;
+        }
+      }).attr("fill", function(d) {
+        if (d[1] > 2) {
+          return "white";
+        } else {
+          return "black";
+        }
+      }).attr("stroke", "black").attr("stroke-width", "1").attr("id", function(d) {
         return "point_" + String(d[2]);
       }).classed("circle", true).on("mouseover", function(d) {
         var this_id;
         console.log("d3.event is:", d3.event);
         console.log("d is:", d);
         this_id = "point_" + String(d[2]);
-        return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d));
+        return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("stroke", "none").attr("fill", "blue").call(_this.show_marker_in_table(d));
       }).on("mouseout", function(d) {
         var this_id;
         this_id = "point_" + String(d[2]);
-        return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", 2).attr("fill", "black");
+        return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", function(d) {
+          if (d[1] > 2) {
+            return 3;
+          } else {
+            return 2;
+          }
+        }).attr("fill", function(d) {
+          if (d[1] > 2) {
+            return "white";
+          } else {
+            return "black";
+          }
+        }).attr("stroke", "black").attr("stroke-width", "1");
+      }).append("svg:title").text(function(d) {
+        return d[2];
       });
     };
 
+    Chr_Manhattan_Plot.prototype.return_to_full_view = function() {
+      $('#manhattan_plot').remove();
+      $('#manhattan_plot_container').append('<div id="manhattan_plot"></div>');
+      return root.manhattan_plot = new root.Manhattan_Plot;
+    };
+
     Chr_Manhattan_Plot.prototype.show_marker_in_table = function(marker_info) {
       var marker_name;
       console.log("in show_marker_in_table");
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.coffee b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
index 091dab93..44f4d9f7 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.coffee
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.coffee
@@ -1,10 +1,11 @@
 root = exports ? this
 
 class Manhattan_Plot
-    constructor: (@plot_height, @plot_width) ->
+    constructor: (@plot_height = 600, @plot_width = 1200) ->
         @qtl_results = js_data.qtl_results
         console.log("qtl_results are:", @qtl_results)
         @chromosomes = js_data.chromosomes
+        console.log("chromosomes are:", @chromosomes)

 
         @total_length = 0
 
@@ -31,6 +32,8 @@ class Manhattan_Plot
         console.log("@x_buffer: ", @x_buffer)
         @y_max = d3.max(@y_coords) * 1.2
 
+        @y_threshold = @get_lod_threshold()
+
         @svg = @create_svg()
         console.log("svg created")
 
@@ -62,8 +65,6 @@ class Manhattan_Plot
         #
         ###
         
-        console.log("@chromosomes: ", @chromosomes)
-        
         cumulative_chr_lengths = []
         chr_lengths = []
         total_length = 0
@@ -97,16 +98,18 @@ class Manhattan_Plot
         chr_seen = []
         for result in js_data.qtl_results
             if result.chr == "X"
-                chr_length = parseFloat(@chromosomes[20])
+                chr_length = parseFloat(@chromosomes[13])
             else
-                chr_length = parseFloat(@chromosomes[result.chr])
+                chr_length = parseFloat(@chromosomes[result.chr])

+            console.log("chr_seen is", chr_seen)
             if not(result.chr in chr_seen)
                 chr_seen.push(result.chr) 
                 chr_lengths.push(chr_length)
                 console.log("result.chr:", result.chr)
                 console.log("total_length:", @total_length)
                 if parseInt(result.chr) != 1
-                    console.log("plus:", chr_lengths.length - 2)
+                    console.log("plus:", chr_lengths.length - 2)

+                    console.log("chr_lengths.length", chr_lengths.length)
                     @total_length += parseFloat(chr_lengths[chr_lengths.length - 2])
             if result.lod_score > @y_axis_filter
                 @x_coords.push(@total_length + parseFloat(result.Mb))
@@ -151,9 +154,10 @@ class Manhattan_Plot
         @add_y_axis()
         @add_axis_labels()
         @add_chr_lines()
-        #@fill_chr_areas()
+        @fill_chr_areas()
         @add_chr_labels()
         @add_plot_points()
+        
         #@create_zoom_pane()
 
     add_border: () ->
@@ -298,51 +302,52 @@ class Manhattan_Plot
             )
             .enter()
             .append("rect")
-            .attr("x", (d) =>
-                if i == 0
-                    return @x_scale(0)
-                else
-                    return @x_scale(d[1])
+            .attr("x", (d, i) =>
+                return @x_scale(d[1] - d[0])
             )
-            .attr("y", @y_buffer)
-            .attr("width", (d) =>
-                return @x_scale(d[0])
+            .attr("y", @y_buffer + 2)
+            .attr("width", (d, i) =>
+                starting = @x_scale(d[1] - d[0])
+                ending = @x_scale(@cumulative_chr_lengths[i])
+                width = ending - starting
+                console.log("width:", d[0])
+                return width
             )
-            .attr("height", @plot_height-@y_buffer)
-            #.attr("fill", (d, i) =>
-            #    if i%2
-            #        return "whitesmoke"
-            #    else
-            #        return "none"
-            #)
-            
-    fill_chr_areas2: () ->
-        console.log("cumu_chr_lengths:", @cumulative_chr_lengths)
-        console.log("example:", @x_scale(@cumulative_chr_lengths[0]))
-        @svg.selectAll("rect.chr_fill_area")
-            .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) =>
-                return d
-            )
-            .enter()
-            .append("rect")
-            .attr("x", (d) =>
-                if i == 0
-                    return @x_scale(0)
-                else
-                    return @x_scale(d[1])
-            )
-            .attr("y", @y_buffer)
-            .attr("width", (d) =>
-                return @x_scale(d[0])
-            )
-            .attr("height", @plot_height-@y_buffer)
+            .attr("height", @plot_height-@y_buffer-3)
             .attr("fill", (d, i) =>
-                return "whitesmoke"
-                #if i%2
-                #    return "whitesmoke"
-                #else
-                #    return "none"
+                if (i+1)%2
+                    return "none"
+                else
+                    return "whitesmoke"
             )
+            
+    #fill_chr_areas2: () ->
+    #    console.log("cumu_chr_lengths:", @cumulative_chr_lengths)
+    #    console.log("example:", @x_scale(@cumulative_chr_lengths[0]))
+    #    @svg.selectAll("rect.chr_fill_area")
+    #        .data(_.zip(@chr_lengths, @cumulative_chr_lengths), (d) =>
+    #            return d
+    #        )
+    #        .enter()
+    #        .append("rect")
+    #        .attr("x", (d) =>
+    #            if i == 0
+    #                return @x_scale(0)
+    #            else
+    #                return @x_scale(d[1])
+    #        )
+    #        .attr("y", @y_buffer)
+    #        .attr("width", (d) =>
+    #            return @x_scale(d[0])
+    #        )
+    #        .attr("height", @plot_height-@y_buffer)
+    #        .attr("fill", (d, i) =>
+    #            return "whitesmoke"
+    #            #if i%2
+    #            #    return "whitesmoke"
+    #            #else
+    #            #    return "none"
+    #        )
 
     add_chr_labels: () ->
         chr_names = []
@@ -372,6 +377,7 @@ class Manhattan_Plot
             .attr("text-anchor", "middle")
             .attr("font-family", "sans-serif")
             .attr("font-size", "18px")
+            .attr("cursor", "pointer")
             .attr("fill", "black")
             .on("click", (d) =>
                 this_chr = d
@@ -389,7 +395,20 @@ class Manhattan_Plot
             .attr("cy", (d) =>
                 return @y_scale(d[1])
             )
-            .attr("r", 2)
+            .attr("r", (d) =>
+                if d[1] > 2
+                    return 3
+                else
+                    return 2
+            )
+            .attr("fill", (d) =>
+                if d[1] > 2
+                    return "white"
+                else
+                    return "black"
+            )
+            .attr("stroke", "black")
+            .attr("stroke-width", "1")
             .attr("id", (d) =>
                 return "point_" + String(d[2])
             )
@@ -400,15 +419,32 @@ class Manhattan_Plot
                 this_id = "point_" + String(d[2])
                 d3.select("#" + this_id).classed("d3_highlight", true)
                     .attr("r", 5)
-                    .attr("fill", "yellow")
+                    .attr("stroke", "none")
+                    .attr("fill", "blue")
                     .call(@show_marker_in_table(d))
             )
             .on("mouseout", (d) =>
                 this_id = "point_" + String(d[2])
                 d3.select("#" + this_id).classed("d3_highlight", false)
-                    .attr("r", 2)
-                    .attr("fill", "black")
+                    .attr("r", (d) =>
+                        if d[1] > 2
+                            return 3
+                        else
+                            return 2
+                    )
+                    .attr("fill", (d) =>
+                        if d[1] > 2
+                            return "white"
+                        else
+                            return "black"
+                    )
+                    .attr("stroke", "black")
+                    .attr("stroke-width", "1")
             )
+            .append("svg:title")
+                .text((d) =>
+                    return d[2]
+                )
             
     redraw_plot: (chr_ob) ->
         console.log("chr_name is:", chr_ob[0])
@@ -434,9 +470,7 @@ class Manhattan_Plot
       @svg.select("path.area").attr("d", area);
       @svg.select("path.line").attr("d", line);
     
-
-    #console.time('Create manhattan plot')
-    #new Manhattan_Plot(600, 1200)
-    #console.timeEnd('Create manhattan plot')
     
-root.Manhattan_Plot = new Manhattan_Plot(600, 1200)
\ No newline at end of file
+root.Manhattan_Plot = Manhattan_Plot
+
+new Manhattan_Plot(600, 1200)
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/marker_regression.js b/wqflask/wqflask/static/new/javascript/marker_regression.js
index 86509316..1965e7aa 100644
--- a/wqflask/wqflask/static/new/javascript/marker_regression.js
+++ b/wqflask/wqflask/static/new/javascript/marker_regression.js
@@ -9,11 +9,12 @@
 
     function Manhattan_Plot(plot_height, plot_width) {
       var _ref;
-      this.plot_height = plot_height;
-      this.plot_width = plot_width;
+      this.plot_height = plot_height != null ? plot_height : 600;
+      this.plot_width = plot_width != null ? plot_width : 1200;
       this.qtl_results = js_data.qtl_results;
       console.log("qtl_results are:", this.qtl_results);
       this.chromosomes = js_data.chromosomes;
+      console.log("chromosomes are:", this.chromosomes);
       this.total_length = 0;
       this.max_chr = this.get_max_chr();
       this.x_coords = [];
@@ -32,6 +33,7 @@
       console.log("@x_max: ", this.x_max);
       console.log("@x_buffer: ", this.x_buffer);
       this.y_max = d3.max(this.y_coords) * 1.2;
+      this.y_threshold = this.get_lod_threshold();
       this.svg = this.create_svg();
       console.log("svg created");
       this.plot_coordinates = _.zip(this.x_coords, this.y_coords, this.marker_names);
@@ -68,7 +70,6 @@
       */
 
       var chr_lengths, cumulative_chr_lengths, key, this_length, total_length;
-      console.log("@chromosomes: ", this.chromosomes);
       cumulative_chr_lengths = [];
       chr_lengths = [];
       total_length = 0;
@@ -110,10 +111,11 @@
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
         result = _ref[_i];
         if (result.chr === "X") {
-          chr_length = parseFloat(this.chromosomes[20]);
+          chr_length = parseFloat(this.chromosomes[13]);
         } else {
           chr_length = parseFloat(this.chromosomes[result.chr]);
         }
+        console.log("chr_seen is", chr_seen);
         if (!(_ref1 = result.chr, __indexOf.call(chr_seen, _ref1) >= 0)) {
           chr_seen.push(result.chr);
           chr_lengths.push(chr_length);
@@ -121,6 +123,7 @@
           console.log("total_length:", this.total_length);
           if (parseInt(result.chr) !== 1) {
             console.log("plus:", chr_lengths.length - 2);
+            console.log("chr_lengths.length", chr_lengths.length);
             this.total_length += parseFloat(chr_lengths[chr_lengths.length - 2]);
           }
         }
@@ -157,6 +160,7 @@
       this.add_y_axis();
       this.add_axis_labels();
       this.add_chr_lines();
+      this.fill_chr_areas();
       this.add_chr_labels();
       return this.add_plot_points();
     };
@@ -266,33 +270,21 @@
       console.log("example:", this.x_scale(this.cumulative_chr_lengths[0]));
       return this.svg.selectAll("rect.chr_fill_area").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) {
         return d;
-      }).enter().append("rect").attr("x", function(d) {
-        if (i === 0) {
-          return _this.x_scale(0);
-        } else {
-          return _this.x_scale(d[1]);
-        }
-      }).attr("y", this.y_buffer).attr("width", function(d) {
-        return _this.x_scale(d[0]);
-      }).attr("height", this.plot_height - this.y_buffer);
-    };
-
-    Manhattan_Plot.prototype.fill_chr_areas2 = function() {
-      var _this = this;
-      console.log("cumu_chr_lengths:", this.cumulative_chr_lengths);
-      console.log("example:", this.x_scale(this.cumulative_chr_lengths[0]));
-      return this.svg.selectAll("rect.chr_fill_area").data(_.zip(this.chr_lengths, this.cumulative_chr_lengths), function(d) {
-        return d;
-      }).enter().append("rect").attr("x", function(d) {
-        if (i === 0) {
-          return _this.x_scale(0);
+      }).enter().append("rect").attr("x", function(d, i) {
+        return _this.x_scale(d[1] - d[0]);
+      }).attr("y", this.y_buffer + 2).attr("width", function(d, i) {
+        var ending, starting, width;
+        starting = _this.x_scale(d[1] - d[0]);
+        ending = _this.x_scale(_this.cumulative_chr_lengths[i]);
+        width = ending - starting;
+        console.log("width:", d[0]);
+        return width;
+      }).attr("height", this.plot_height - this.y_buffer - 3).attr("fill", function(d, i) {
+        if ((i + 1) % 2) {
+          return "none";
         } else {
-          return _this.x_scale(d[1]);
+          return "whitesmoke";
         }
-      }).attr("y", this.y_buffer).attr("width", function(d) {
-        return _this.x_scale(d[0]);
-      }).attr("height", this.plot_height - this.y_buffer).attr("fill", function(d, i) {
-        return "whitesmoke";
       });
     };
 
@@ -316,7 +308,7 @@
         }
       }).attr("x", function(d) {
         return _this.x_scale(d[2] - d[1] / 2);
-      }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("fill", "black").on("click", function(d) {
+      }).attr("y", this.plot_height * 0.1).attr("dx", "0em").attr("text-anchor", "middle").attr("font-family", "sans-serif").attr("font-size", "18px").attr("cursor", "pointer").attr("fill", "black").on("click", function(d) {
         var this_chr;
         this_chr = d;
         return _this.redraw_plot(d);
@@ -329,18 +321,44 @@
         return _this.x_scale(d[0]);
       }).attr("cy", function(d) {
         return _this.y_scale(d[1]);
-      }).attr("r", 2).attr("id", function(d) {
+      }).attr("r", function(d) {
+        if (d[1] > 2) {
+          return 3;
+        } else {
+          return 2;
+        }
+      }).attr("fill", function(d) {
+        if (d[1] > 2) {
+          return "white";
+        } else {
+          return "black";
+        }
+      }).attr("stroke", "black").attr("stroke-width", "1").attr("id", function(d) {
         return "point_" + String(d[2]);
       }).classed("circle", true).on("mouseover", function(d) {
         var this_id;
         console.log("d3.event is:", d3.event);
         console.log("d is:", d);
         this_id = "point_" + String(d[2]);
-        return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("fill", "yellow").call(_this.show_marker_in_table(d));
+        return d3.select("#" + this_id).classed("d3_highlight", true).attr("r", 5).attr("stroke", "none").attr("fill", "blue").call(_this.show_marker_in_table(d));
       }).on("mouseout", function(d) {
         var this_id;
         this_id = "point_" + String(d[2]);
-        return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", 2).attr("fill", "black");
+        return d3.select("#" + this_id).classed("d3_highlight", false).attr("r", function(d) {
+          if (d[1] > 2) {
+            return 3;
+          } else {
+            return 2;
+          }
+        }).attr("fill", function(d) {
+          if (d[1] > 2) {
+            return "white";
+          } else {
+            return "black";
+          }
+        }).attr("stroke", "black").attr("stroke-width", "1");
+      }).append("svg:title").text(function(d) {
+        return d[2];
       });
     };
 
@@ -369,6 +387,8 @@
 
   })();
 
-  root.Manhattan_Plot = new Manhattan_Plot(600, 1200);
+  root.Manhattan_Plot = Manhattan_Plot;
+
+  new Manhattan_Plot(600, 1200);
 
 }).call(this);