creating init function

app.js

@@ -95,37 +95,38 @@ var formatTime = d3.timeFormat("%B%e, %Y at %-I:%M%p");
 var lastTransform = null;
 var zoom = d3.zoom().on('zoom', zoomCallback);
 
-d3.select('#container')
+var init = function(){
+    d3.select('#container')
         .style('width', WIDTH)
         .style('height', HEIGHT);
 
-xScale.range([0,WIDTH]);
+    xScale.range([0,WIDTH]);
-xDomain = d3.extent(runs, function(datum, index){
+    xDomain = d3.extent(runs, function(datum, index){
         return parseTime(datum.date);
-});
+    });
-xScale.domain(xDomain);
+    xScale.domain(xDomain);
 
-yScale.range([HEIGHT, 0]);
+    yScale.range([HEIGHT, 0]);
-yDomain = d3.extent(runs, function(datum, index){
+    yDomain = d3.extent(runs, function(datum, index){
         return datum.distance;
-})
+    })
-yScale.domain(yDomain);
+    yScale.domain(yDomain);
-render();
+    render();
 
-d3.select('#container')
+    d3.select('#container')
     	.append('g')
         .attr('id', 'x-axis')
     	.call(bottomAxis)
         .attr('transform', 'translate(0,'+HEIGHT+')');
 
-d3.select('#container')
+    d3.select('#container')
     	.append('g')
         .attr('id', 'y-axis')
     	.call(leftAxis);
 
-createTable();
+    createTable();
 
-d3.select('#container').on('click', function(){
+    d3.select('#container').on('click', function(){
         var x = d3.event.offsetX;
     	var y = d3.event.offsetY;
 
@@ -145,6 +146,9 @@ d3.select('#container').on('click', function(){
         runs.push(newRun);
         createTable();
         render();
-});
+    });
+
+    d3.select('#container').call(zoom);
+}
 
-d3.select('#container').call(zoom);
+init();