diff --git a/app.js b/app.js index f2e8ac0..14e4078 100644 --- a/app.js +++ b/app.js @@ -86,19 +86,25 @@ var zoomCallback = function(){ d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(yScale))); } +var xScale = d3.scaleTime(); +var parseTime = d3.timeParse("%B%e, %Y at %-I:%M%p"); +var yScale = d3.scaleLinear(); +var bottomAxis = d3.axisBottom(xScale); +var leftAxis = d3.axisLeft(yScale); +var formatTime = d3.timeFormat("%B%e, %Y at %-I:%M%p"); +var lastTransform = null; +var zoom = d3.zoom().on('zoom', zoomCallback); + d3.select('#container') .style('width', WIDTH) .style('height', HEIGHT); -var xScale = d3.scaleTime(); -var parseTime = d3.timeParse("%B%e, %Y at %-I:%M%p"); xScale.range([0,WIDTH]); xDomain = d3.extent(runs, function(datum, index){ return parseTime(datum.date); }); xScale.domain(xDomain); -var yScale = d3.scaleLinear(); yScale.range([HEIGHT, 0]); yDomain = d3.extent(runs, function(datum, index){ return datum.distance; @@ -106,14 +112,12 @@ yDomain = d3.extent(runs, function(datum, index){ yScale.domain(yDomain); render(); -var bottomAxis = d3.axisBottom(xScale); d3.select('#container') .append('g') .attr('id', 'x-axis') .call(bottomAxis) .attr('transform', 'translate(0,'+HEIGHT+')'); -var leftAxis = d3.axisLeft(yScale); d3.select('#container') .append('g') .attr('id', 'y-axis') @@ -121,7 +125,6 @@ d3.select('#container') createTable(); -var formatTime = d3.timeFormat("%B%e, %Y at %-I:%M%p"); d3.select('#container').on('click', function(){ var x = d3.event.offsetX; var y = d3.event.offsetY; @@ -144,6 +147,4 @@ d3.select('#container').on('click', function(){ render(); }); -var lastTransform = null; -var zoom = d3.zoom().on('zoom', zoomCallback); d3.select('#container').call(zoom);