mahuntington
/
SED-Stack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

switching to v. 4

Browse Source
master
Matt Huntington 9 years ago
parent eceba0243e
commit 077d652d0a
3 changed files with 16 additions and 18 deletions
Show Stats Download Patch File Download Diff File

5
public/css/app.css
Unescape View File

@ -3,11 +3,12 @@ svg {
} }
svg circle { svg circle {
transition: transform 0.5s ease-in-out, fill 0.5s linear; r:5;
transition: r 0.5s ease-in-out, fill 0.5s linear;
transform-origin: 50% 50%; transform-origin: 50% 50%;
} }
circle:hover { circle:hover {
fill:blue; fill:blue;
transform: scale(3); r:15;
} }

2
public/index.html
Unescape View File

@ -6,7 +6,7 @@
<body> <body>
<h1>Run Tracker</h1> <h1>Run Tracker</h1>
<svg></svg> <svg></svg>
<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="/js/app.js"></script> <script src="/js/app.js"></script>
</body> </body>
</html> </html>

27
public/js/app.js
Unescape View File

@ -8,25 +8,22 @@ var MIN_DISTANCE = 0;
var MIN_DATE = new Date('2016-1-1'); var MIN_DATE = new Date('2016-1-1');
var MAX_DATE = new Date('2017-1-1'); var MAX_DATE = new Date('2017-1-1');
d3.select('svg').style({ d3.select('svg').style('height', HEIGHT).style('width', WIDTH);
height: HEIGHT,
width: WIDTH
});
// Create scales // Create scales
var yScale = d3.scale.linear(); var yScale = d3.scaleLinear();
yScale.range([HEIGHT, 0]); //max height matches min data value, since max height is at the bottom yScale.range([HEIGHT, 0]); //max height matches min data value, since max height is at the bottom
yScale.domain([MIN_DISTANCE, MAX_DISTANCE]); yScale.domain([MIN_DISTANCE, MAX_DISTANCE]);
var xScale = d3.time.scale(); var xScale = d3.scaleTime();
xScale.range([0, WIDTH]); xScale.range([0, WIDTH]);
xScale.domain([MIN_DATE, MAX_DATE]); xScale.domain([MIN_DATE, MAX_DATE]);
// SVG click handler // SVG click handler
d3.select('svg').on('click', function(d){ d3.select('svg').on('click', function(d){
var x = d3.event.offsetX; var x = d3.event.offsetX;
var y = d3.event.offsetY; var y = d3.event.offsetY;
@ -41,7 +38,7 @@ d3.select('svg').on('click', function(d){
// Log a new run in the server // Log a new run in the server
var logRun = function(runObject, callback){ var logRun = function(runObject, callback){
d3.xhr('/runs') d3.request('/runs')
.header("Content-Type", "application/json") .header("Content-Type", "application/json")
.post( .post(
//must turn data object into string //must turn data object into string
@ -64,7 +61,7 @@ var render = function(){
//add extra circles if there is extra data //add extra circles if there is extra data
circles circles
.enter() .enter()
.append('circle').attr('r', 5) .append('circle')
.attr('cx', function(datum, index){ .attr('cx', function(datum, index){
//convert date value into pixel value //convert date value into pixel value
return xScale(new Date(datum.date)); return xScale(new Date(datum.date));
@ -92,7 +89,7 @@ var attachDeleteHandlers = function(){
//if not dragging (event's default is not prevented) //if not dragging (event's default is not prevented)
if(!d3.event.defaultPrevented){ if(!d3.event.defaultPrevented){
//mkae API call //mkae API call
d3.xhr('/runs/'+d.id) d3.request('/runs/'+d.id)
.header("Content-Type", "application/json") .header("Content-Type", "application/json")
.send('DELETE', render); .send('DELETE', render);
} }
@ -102,19 +99,19 @@ var attachDeleteHandlers = function(){
//Attach drag handler to circles //Attach drag handler to circles
var attachDragHandlers = function(){ var attachDragHandlers = function(){
//create drag behavior //create drag behavior
var drag = d3.behavior.drag() var drag = d3.drag()
.on('dragend', function(d){ .on('end', function(d){
//prevent default for deleting run handler //prevent default for deleting run handler
d3.event.sourceEvent.preventDefault(); d3.event.sourceEvent.preventDefault();
//set new date and distance on datum object //set new date and distance on datum object
var date = xScale.invert(d3.event.sourceEvent.offsetX); var date = xScale.invert(d3.event.x);
var distance = yScale.invert(d3.event.sourceEvent.offsetY); var distance = yScale.invert(d3.event.y);
d.date = date; d.date = date;
d.distance = distance; d.distance = distance;
//make api call //make api call
d3.xhr('/runs/'+d.id) d3.request('/runs/'+d.id)
.header("Content-Type","application/json") .header("Content-Type","application/json")
.send('PUT', JSON.stringify(d), render);//pass alterted 'd' object to API .send('PUT', JSON.stringify(d), render);//pass alterted 'd' object to API
}) })

Write Preview
Loading…
Cancel
Save