week 2: load parks.csv, create svg

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script  src="https://d3js.org/d3.v3.min.js" ></script>
    <style>
        .clock {
            fill: white;
            stroke: black;
            stroke-width: 2;
            -webkit-animation-name: logo;
            -webkit-animation-duration: 2s;
            -webkit-animation-direction: alternate;
            -webkit-animation-iteration-count: infinite;
         }
        
        .tic {
            stroke: blue;
        }
        
        .hand {
            stroke: black;
        }

.rotateHand {
            -webkit-animation-name: rotateHand;
            -webkit-animation-iteration-count: infinite;
            -webkit-transform-origin: 0% 100%; 
            -webkit-animation-timing-function: linear;
        }
        
        /* 4:31;
        second:
        1 sec for 1/60 = 60 sec for 1
        
        minute: 
        60 sec  for 1/60 = 3600 sec for 1
        
        hour:
        3600 sec for 1/12 = 43200 sec for 1
        */
        .second_hand {
            -webkit-animation-duration: 60s;
            stroke: red;
            stroke-width: 2;
        }
        
        .minute_hand {
            -webkit-animation-duration: 3600s;
            stroke-width: 3;
        }

.hour_hand {
            -webkit-animation-duration: 43200s;
            stroke-width: 6;
        }

@-webkit-keyframes  rotateHand {
          0% {
                -webkit-transform: rotate(0deg);
          }
          100% {
              -webkit-transform: rotate(360deg);
          }
        }

.controls {
            width: 400px;
            text-align: center;
        }

</style>
</head>
<body>

<text class="time" x="180" y="375">0:00:00</text>
    </svg>
    
    <div class="controls">
        <button class="start">Start</button>
        <button class="stop">Stop</button>
    </div>

var Timer = function() {
            var totalSeconds = 0;
            var interval;
    
            var incrementSecond = function() {
                totalSeconds++;
            };
    
            var startTimer = function() {
                incrementSecond();
                displayTimer();
            };

var displayTimer = function() {
                d3.select('.time').text(formatTime());

};
    
            var formatTime = function(){
                var seconds, minutes, hours, secondsString, minutesString ;
    
                seconds = totalSeconds % 60;
                minutes = (Math.floor(totalSeconds/60)) % 60;
                hours = Math.floor(totalSeconds/3600);
    
                if (seconds < 10) {
                    secondsString = '0' + seconds;
                } else {
                    secondsString = '' + seconds;
                }
    
                if (minutes < 10) {
                    minutesString = '0' + minutes;
                } else {
                    minutesString = '' + minutes;
                }
    
                return hours + ':' + minutesString + ':' + secondsString;
            };

var start = function() {
                interval = setInterval(startTimer, 1000);
            }

var startBtn = document.querySelector('.start');
        startBtn.addEventListener('click', function(){
            // add rotateHand class
            d3.selectAll('.hand')
                .classed('rotateHand', true);

timer.reset();
            timer.start();
        }, false);

var stopBtn = document.querySelector('.stop');
        stopBtn.addEventListener('click', function(){
            // remove rotateHand class
            d3.selectAll('.hand')
                .classed('rotateHand', false);

timer.stop();
        }, false);

d3.csv('parks.csv', function(data){
            console.log(data);
        })

}(d3));

</script>
    
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js