From 6e4ca8fb362ea36f76d00c479b6683748ec44dbd Mon Sep 17 00:00:00 2001 From: Matt Huntington Date: Thu, 25 Aug 2016 16:03:49 -0400 Subject: [PATCH] make initial render show all data points --- public/js/app.js | 171 ++++++++++++++++++++++++++--------------------- 1 file changed, 94 insertions(+), 77 deletions(-) diff --git a/public/js/app.js b/public/js/app.js index 0605496..7924569 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -8,74 +8,73 @@ d3.select('svg') var convertYDataPointToVisualPoint = d3.scaleLinear(); var convertXDataPointToVisualPoint = d3.scaleTime(); -convertYDataPointToVisualPoint.range([HEIGHT,0]); -convertYDataPointToVisualPoint.domain([0, 5]); - -convertXDataPointToVisualPoint.range([0,WIDTH]); -convertXDataPointToVisualPoint.domain([new Date('2016-1-1'), new Date('2017-1-1')]); - // console.log(convertXDataPointToVisualPoint(new Date('2016-12-1'))); // console.log(convertXDataPointToVisualPoint.invert(490)); // console.log(convertYDataPointToVisualPoint(0.1)); // console.log(convertYDataPointToVisualPoint.invert(490)); -var render = function(){ - d3.json('/runs', function(error, data){ - var circles = d3.select('#points').selectAll('circle').data(data, function(datum){ - return datum.id; - }); - circles.enter() - .append('circle') - .attr('cy', function(datum, index){ - return convertYDataPointToVisualPoint(datum.distance); - }) - .attr('cx', function(datum, index){ - return convertXDataPointToVisualPoint(new Date(datum.date)); - }); - circles.exit().remove(); - d3.selectAll('circle').on('click', function(datum, index){ - //send delete - d3.event.stopPropagation(); - d3.request('/runs/'+datum.id) - .header("Content-Type", "application/json") //we're sending data - .send('DELETE', render); //send a DELETE request +var generateCircles = function(data){ + var circles = d3.select('#points').selectAll('circle').data(data, function(datum){ + return datum.id; + }); + circles.enter() + .append('circle') + .attr('cy', function(datum, index){ + return convertYDataPointToVisualPoint(datum.distance); + }) + .attr('cx', function(datum, index){ + return convertXDataPointToVisualPoint(new Date(datum.date)); }); + circles.exit().remove(); + d3.selectAll('circle').on('click', function(datum, index){ + //send delete + d3.event.stopPropagation(); + d3.request('/runs/'+datum.id) + .header("Content-Type", "application/json") //we're sending data + .send('DELETE', render); //send a DELETE request + }); + + //.... + //define callbacks for dragging + var dragEnd = function(d){ //d is the data for the dragged object + var x = d3.event.x; + var y = d3.event.y; + + var date = convertXDataPointToVisualPoint.invert(x); + var distance = convertYDataPointToVisualPoint.invert(y); - //.... - //define callbacks for dragging - var dragEnd = function(d){ //d is the data for the dragged object - var x = d3.event.x; - var y = d3.event.y; - - var date = convertXDataPointToVisualPoint.invert(x); - var distance = convertYDataPointToVisualPoint.invert(y); - - d.date = date; - d.distance = distance; - - d3.request('/runs/'+d.id) - .header("Content-Type","application/json") //we're sending JSON - .send('PUT', JSON.stringify(d), render);//pass alterted 'd' object to API - } - var drag = function(d){ //d is the data for the dragged object - var x = d3.event.x; //x position of cursor - var y = d3.event.y; //y position of cursor - d3.select(this).attr('cx', x); - d3.select(this).attr('cy', y); - } - //create the behavior - var dragBehavior = d3.drag() - // .on('start', dragStart) - .on('drag', drag) - .on('end', dragEnd); - //... - //apply it to a selection - d3.selectAll('circle').call(dragBehavior); + d.date = date; + d.distance = distance; + + d3.request('/runs/'+d.id) + .header("Content-Type","application/json") //we're sending JSON + .send('PUT', JSON.stringify(d), render);//pass alterted 'd' object to API + } + var drag = function(d){ //d is the data for the dragged object + var x = d3.event.x; //x position of cursor + var y = d3.event.y; //y position of cursor + d3.select(this).attr('cx', x); + d3.select(this).attr('cy', y); + } + //create the behavior + var dragBehavior = d3.drag() + // .on('start', dragStart) + .on('drag', drag) + .on('end', dragEnd); + //... + //apply it to a selection + d3.selectAll('circle').call(dragBehavior); +} +var render = function(){ + d3.json('/runs', function(error, data){ + generateCircles(data); }); }; -render(); +// window.setTimeout(function(){ +// render(); +// },2000) var lastTransform = null; d3.select('svg').on('click', function(){ @@ -102,26 +101,44 @@ d3.select('svg').on('click', function(){ ); }); -var leftAxis = d3.axisLeft(convertYDataPointToVisualPoint); //create a left axis based on the yScale -var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale -d3.select('svg') - .append('g') //append a group element - .attr('id', 'y-axis') - .call(leftAxis); //apply the axis to it -d3.select('svg') - .append('g') //append a group element - .attr('id', 'x-axis') - .attr('transform', 'translate(0,'+HEIGHT+')') - .call(bottomAxis); //apply the axis to it - -var zoomCallback = function(){ - lastTransform = d3.event.transform; //save the transform for later inversion with clicks - d3.select('#points').attr("transform", d3.event.transform); - d3.select('#x-axis').call(bottomAxis.scale(d3.event.transform.rescaleX(convertXDataPointToVisualPoint))); - d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(convertYDataPointToVisualPoint))); -} -var zoom = d3.zoom().on('zoom', zoomCallback); -d3.select('svg').call(zoom); +d3.json('/runs', function(error, data){ + var distanceDomain = d3.extent(data, function(element){ + return element.distance; + }); + var dateDomain = d3.extent(data, function(element){ + return new Date(element.date); + }); + convertYDataPointToVisualPoint.range([HEIGHT,0]); + convertYDataPointToVisualPoint.domain(distanceDomain); + + convertXDataPointToVisualPoint.range([0,WIDTH]); + convertXDataPointToVisualPoint.domain(dateDomain); + + var leftAxis = d3.axisLeft(convertYDataPointToVisualPoint); //create a left axis based on the yScale + var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale + d3.select('svg') + .append('g') //append a group element + .attr('id', 'y-axis') + .call(leftAxis); //apply the axis to it + d3.select('svg') + .append('g') //append a group element + .attr('id', 'x-axis') + .attr('transform', 'translate(0,'+HEIGHT+')') + .call(bottomAxis); //apply the axis to it + + + var zoomCallback = function(){ + lastTransform = d3.event.transform; //save the transform for later inversion with clicks + d3.select('#points').attr("transform", d3.event.transform); + d3.select('#x-axis').call(bottomAxis.scale(d3.event.transform.rescaleX(convertXDataPointToVisualPoint))); + d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(convertYDataPointToVisualPoint))); + } + var zoom = d3.zoom().on('zoom', zoomCallback); + d3.select('svg').call(zoom); + + generateCircles(data); +}); + //Date Parsing/Formatting