removing runs

8 years ago · d55a745cd6
parent b50c643f1a
commit d55a745cd6
3 changed files with 31 additions and 17 deletions
--- a/app.css
+++ b/app.css
@ -4,6 +4,11 @@ body {
 circle {
    r: 5;
    fill: black;
+    transition: r 0.5s linear, fill 0.5s linear;
+}
+circle:hover {
+    r:10;
+    fill: blue;
 }
 svg {
     overflow: visible;
--- a/app.js
+++ b/app.js
@ -24,16 +24,23 @@ d3.select('svg')
    .style('height', HEIGHT);

 var xScale = d3.scaleTime();
-var yScale = d3.scaleLinear();
-var render = function(){
+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;
 })
 yScale.domain(yDomain);
+var render = function(){

-    d3.select('svg').selectAll('circle')
+    d3.select('#points').html('');
+    d3.select('#points').selectAll('circle')
        .data(runs)
        .enter()
        .append('circle');
@ -43,18 +50,18 @@ var render = function(){
            return yScale(datum.distance);
        });

-    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);
-
    d3.selectAll('circle')
        .attr('cx', function(datum, index){
            return xScale(parseTime(datum.date));
        });
-
+    d3.selectAll('circle').on('click', function(datum, index){
+        d3.event.stopPropagation();
+        runs = runs.filter(function(run, index){
+            return run.id != datum.id;
+        });
+        render();
+        createTable();
+    });
 }
 render();

@ -90,7 +97,7 @@ d3.select('svg').on('click', function(){
    var distance = yScale.invert(y);

    var newRun = {
-        id: runs[runs.length-1].id+1,
+        id: ( runs.length > 0 ) ? runs[runs.length-1].id+1 : 1,
        date: formatTime(date),
        distance: distance
    }
--- a/index.html
+++ b/index.html
@ -6,7 +6,9 @@
        <link rel="stylesheet" href="app.css">
    </head>
    <body>
-        <svg></svg>
+        <svg>
+            <g id="points"></g>
+        </svg>
        <table>
            <thead>
                <tr>