diff --git a/src/main.js b/src/main.js
index 6edaf93a..3365089f 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,6 +13,20 @@ var animationFactory = null;
 var paper = null;
 
 $(document).ready(function(){
+  initUI();
+  var mainVis = new Visualization({
+    el: $('#canvasWrapper')[0]  
+  });
+
+  // make the canvas for us
+  if (/\?demo/.test(window.location.href)) {
+    setTimeout(function() {
+      events.trigger('submitCommandValueFromEvent', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase master; git checkout master; gc; gc; git merge bugFix");
+    }, 500);
+  }
+});
+
+function initUI() {
   // static classes
   animationFactory = new AnimationFactory();
   commandCollection = new CommandCollection();
@@ -21,7 +35,6 @@ $(document).ready(function(){
     collection: commandCollection
   });
 
-  // TODO make not global
   commandPromptView = new CommandPromptView({
     el: $('#commandLineBar'),
     collection: commandCollection
@@ -32,16 +45,7 @@ $(document).ready(function(){
   });
 
   $('#commandTextField').focus();
-
-  var mainVis = new Visualization();
-
-  // make the canvas for us
-  if (/\?demo/.test(window.location.href)) {
-    setTimeout(function() {
-      events.trigger('submitCommandValueFromEvent', "gc; git checkout HEAD~1; git commit; git checkout -b bugFix; gc; gc; git rebase master; git checkout master; gc; gc; git merge bugFix");
-    }, 500);
-  }
-});
+}
 
 function windowResize() {
   var smaller = 10;
diff --git a/src/visuals.js b/src/visuals.js
index bb843c18..53f86cd0 100644
--- a/src/visuals.js
+++ b/src/visuals.js
@@ -1,34 +1,35 @@
-function Visualization(options) {
+var Visualization = Backbone.View.extend({
+  initialize: function(options) {
+    var _this = this;
+    Raphael(10, 10, 200, 200, function() {
+      // for some reason raphael calls this function with a predefined
+      // context...
+      // so switch it
+      paper = this;
+      _this.paperInitialize(this);
+    });
+  },
 
-  var _this = this;
-  Raphael(10, 10, 200, 200, function() {
-    // for some reason raphael calls this function with a predefined
-    // context...
-    // so switch it
-    paper = this;
-    _this.initialize(this);
-  });
-}
+  paperInitialize: function(paper, options) {
+    this.commitCollection = new CommitCollection();
+    this.branchCollection = new BranchCollection();
 
-Visualization.prototype.initialize = function(paper, options) {
-  this.commitCollection = new CommitCollection();
-  this.branchCollection = new BranchCollection();
+    gitVisuals = new GitVisuals({
+      commitCollection: this.commitCollection,
+      branchCollection: this.branchCollection
+    });
 
-  gitVisuals = new GitVisuals({
-    commitCollection: this.commitCollection,
-    branchCollection: this.branchCollection
-  });
+    gitEngine = new GitEngine({
+      collection: this.commitCollection,
+      branches: this.branchCollection
+    });
 
-  gitEngine = new GitEngine({
-    collection: this.commitCollection,
-    branches: this.branchCollection
-  });
-
-  // needs to be called before raphael ready
-  windowResize();
-  events.trigger('raphaelReady');
-}
+    // needs to be called before raphael ready
+    windowResize();
+    events.trigger('raphaelReady');
+  }
 
+});
 
 function GitVisuals(options) {
   this.commitCollection = options.commitCollection;