Be more resilient to race condition between MathJax loading and visua…

…lizations rendering.

js/MnistVis.js

@@ -87,12 +87,20 @@ var RawExploreMNIST = function RawExploreMNIST(s) {
   this.plot = this.new_child( BasisPlotMNIST );
   this.x    = this.new_child( ImgPixelSelector );
   this.y    = this.new_child( ImgPixelSelector );
-  this.eqx  = this.new_child( BasicVis.Equation );
-  this.eqy  = this.new_child( BasicVis.Equation );
 
   this.axxDiv = this.inner.append('div');
   this.axyDiv = this.inner.append('div');
 
+  try {
+    // Fails if MathJax isn't loaded.
+    this.eqx  = this.new_child( BasicVis.Equation );
+    this.eqy  = this.new_child( BasicVis.Equation );
+  }
+  catch(err) {
+    // Not much we can do to recover; let's just try to avoid breaking the rest of the page
+    // by continuing rendering.
+  }
+
   var this_ = this;
 
   this.plot.scatter.mouseover(function(i) { this_.x.img_display.show(i); this_.y.img_display.show(i);});
@@ -131,14 +139,6 @@ RawExploreMNIST.prototype.child_layout = function child_layout() {
       .pos([plot + gutter, plot + gutter])
       .size([pick, pick]);
 
-  this.eqy.div
-      .style('top', plot - W/4/3 )
-      .style('left', side - W/4/3 - 20 );
-
-  this.eqx.div
-      .style('top',  plot + W/4/3 - 10)
-      .style('left', side + W/4/3);
-
   this.axyDiv
       .attr('style', 'background: -moz-linear-gradient(right, white, black); background: linear-gradient(to right, white , black);')
       .style('border', '1px solid #000000')
@@ -157,6 +157,14 @@ RawExploreMNIST.prototype.child_layout = function child_layout() {
       .style('width',  gutter/3)
       .style('height', plot);
 
+  this.eqy.div
+      .style('top', plot - W/4/3 )
+      .style('left', side - W/4/3 - 20 );
+
+  this.eqx.div
+      .style('top',  plot + W/4/3 - 10)
+      .style('left', side + W/4/3);
+
   return this;
 }
 

part1.md

@@ -245,7 +245,7 @@ Examining this allows us to explore MNIST in a very raw way.
     raw_mnist.x.pixel_selector.value([7,13]);
     raw_mnist.y.pixel_selector.value([18,16]);
     raw_mnist.bindToWindowResize();
-  }, 500);
+  }, 2000);
 </script>
 
 Exploring this visualization, we can see some glimpses of the structure of MNIST.
@@ -330,7 +330,7 @@ Now that we know what the best horizontal and vertical angle are, we can try to
       mnist_pca_plot.x.pixel_display.render();
       mnist_pca_plot.y.pixel_display.render();
     }, 50);
-  }, 500);
+  }, 2000);
 </script>
 <br>