mahuntington
/
runs
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make initial render show all data points

Browse Source
master
Matt Huntington 9 years ago
parent d5f2cc0e73
commit 6e4ca8fb36
1 changed files with 94 additions and 77 deletions
Show Stats Download Patch File Download Diff File

171
public/js/app.js
Unescape View File

@ -8,74 +8,73 @@ d3.select('svg')
var convertYDataPointToVisualPoint = d3.scaleLinear(); var convertYDataPointToVisualPoint = d3.scaleLinear();
var convertXDataPointToVisualPoint = d3.scaleTime(); 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(new Date('2016-12-1')));
// console.log(convertXDataPointToVisualPoint.invert(490)); // console.log(convertXDataPointToVisualPoint.invert(490));
// console.log(convertYDataPointToVisualPoint(0.1)); // console.log(convertYDataPointToVisualPoint(0.1));
// console.log(convertYDataPointToVisualPoint.invert(490)); // console.log(convertYDataPointToVisualPoint.invert(490));
var render = function(){ var generateCircles = function(data){
d3.json('/runs', function(error, data){ var circles = d3.select('#points').selectAll('circle').data(data, function(datum){
var circles = d3.select('#points').selectAll('circle').data(data, function(datum){ return datum.id;
return datum.id; });
}); circles.enter()
circles.enter() .append('circle')
.append('circle') .attr('cy', function(datum, index){
.attr('cy', function(datum, index){ return convertYDataPointToVisualPoint(datum.distance);
return convertYDataPointToVisualPoint(datum.distance); })
}) .attr('cx', function(datum, index){
.attr('cx', function(datum, index){ return convertXDataPointToVisualPoint(new Date(datum.date));
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
}); });
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);
//.... d.date = date;
//define callbacks for dragging d.distance = distance;
var dragEnd = function(d){ //d is the data for the dragged object
var x = d3.event.x; d3.request('/runs/'+d.id)
var y = d3.event.y; .header("Content-Type","application/json") //we're sending JSON
.send('PUT', JSON.stringify(d), render);//pass alterted 'd' object to API
var date = convertXDataPointToVisualPoint.invert(x); }
var distance = convertYDataPointToVisualPoint.invert(y); var drag = function(d){ //d is the data for the dragged object
var x = d3.event.x; //x position of cursor
d.date = date; var y = d3.event.y; //y position of cursor
d.distance = distance; d3.select(this).attr('cx', x);
d3.select(this).attr('cy', y);
d3.request('/runs/'+d.id) }
.header("Content-Type","application/json") //we're sending JSON //create the behavior
.send('PUT', JSON.stringify(d), render);//pass alterted 'd' object to API var dragBehavior = d3.drag()
} // .on('start', dragStart)
var drag = function(d){ //d is the data for the dragged object .on('drag', drag)
var x = d3.event.x; //x position of cursor .on('end', dragEnd);
var y = d3.event.y; //y position of cursor //...
d3.select(this).attr('cx', x); //apply it to a selection
d3.select(this).attr('cy', y); d3.selectAll('circle').call(dragBehavior);
} }
//create the behavior var render = function(){
var dragBehavior = d3.drag() d3.json('/runs', function(error, data){
// .on('start', dragStart) generateCircles(data);
.on('drag', drag)
.on('end', dragEnd);
//...
//apply it to a selection
d3.selectAll('circle').call(dragBehavior);
}); });
}; };
render(); // window.setTimeout(function(){
// render();
// },2000)
var lastTransform = null; var lastTransform = null;
d3.select('svg').on('click', function(){ 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 d3.json('/runs', function(error, data){
var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale var distanceDomain = d3.extent(data, function(element){
d3.select('svg') return element.distance;
.append('g') //append a group element });
.attr('id', 'y-axis') var dateDomain = d3.extent(data, function(element){
.call(leftAxis); //apply the axis to it return new Date(element.date);
d3.select('svg') });
.append('g') //append a group element convertYDataPointToVisualPoint.range([HEIGHT,0]);
.attr('id', 'x-axis') convertYDataPointToVisualPoint.domain(distanceDomain);
.attr('transform', 'translate(0,'+HEIGHT+')')
.call(bottomAxis); //apply the axis to it convertXDataPointToVisualPoint.range([0,WIDTH]);
convertXDataPointToVisualPoint.domain(dateDomain);
var zoomCallback = function(){
lastTransform = d3.event.transform; //save the transform for later inversion with clicks var leftAxis = d3.axisLeft(convertYDataPointToVisualPoint); //create a left axis based on the yScale
d3.select('#points').attr("transform", d3.event.transform); var bottomAxis = d3.axisBottom(convertXDataPointToVisualPoint); //create a left axis based on the yScale
d3.select('#x-axis').call(bottomAxis.scale(d3.event.transform.rescaleX(convertXDataPointToVisualPoint))); d3.select('svg')
d3.select('#y-axis').call(leftAxis.scale(d3.event.transform.rescaleY(convertYDataPointToVisualPoint))); .append('g') //append a group element
} .attr('id', 'y-axis')
var zoom = d3.zoom().on('zoom', zoomCallback); .call(leftAxis); //apply the axis to it
d3.select('svg').call(zoom); 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 //Date Parsing/Formatting

Write Preview
Loading…
Cancel
Save