creating render function

app.js

@@ -23,35 +23,40 @@ d3.select('svg')
     .style('width', WIDTH)
     .style('height', HEIGHT);
 
-var yScale = d3.scaleLinear();
-yScale.range([HEIGHT, 0]);
-yDomain = d3.extent(runs, function(datum, index){
-    return datum.distance;
-})
-yScale.domain(yDomain);
+var render = function(){
 
-d3.select('svg').selectAll('circle')
-    .data(runs)
-    .enter()
-    .append('circle');
+    var yScale = d3.scaleLinear();
+    yScale.range([HEIGHT, 0]);
+    yDomain = d3.extent(runs, function(datum, index){
+        return datum.distance;
+    })
+    yScale.domain(yDomain);
 
-d3.selectAll('circle')
-    .attr('cy', function(datum, index){
-        return yScale(datum.distance);
-    });
+    d3.select('svg').selectAll('circle')
+        .data(runs)
+        .enter()
+        .append('circle');
 
-var parseTime = d3.timeParse("%B%e, %Y");
-var xScale = d3.scaleTime();
-xScale.range([0,WIDTH]);
-xDomain = d3.extent(runs, function(datum, index){
-    return parseTime(datum.date);
-});
-xScale.domain(xDomain);
+    d3.selectAll('circle')
+        .attr('cy', function(datum, index){
+            return yScale(datum.distance);
+        });
 
-d3.selectAll('circle')
-    .attr('cx', function(datum, index){
-        return xScale(parseTime(datum.date));
+    var parseTime = d3.timeParse("%B%e, %Y");
+    var xScale = d3.scaleTime();
+    xScale.range([0,WIDTH]);
+    xDomain = d3.extent(runs, function(datum, index){
+        return parseTime(datum.date);
     });
+    xScale.domain(xDomain);
+
+    d3.selectAll('circle')
+        .attr('cx', function(datum, index){
+            return xScale(parseTime(datum.date));
+        });
+        
+}
+render();
 
 var bottomAxis = d3.axisBottom(xScale);
 d3.select('svg')