D3 Examples - week 2: load parks.csv, create svg

xxxxxxxxxx
 
<!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>
​
    <svg width='400' height='400'>
        <circle class="clock" cx='200' cy='200' r='150' />
        <line class="tic tic12"  x1="200" y1="50" x2="200" y2="70" />
        <line class="tic tic3"  x1="330" y1="200" x2="350" y2="200" />
        <line class="tic tic6"  x1="200" y1="330" x2="200" y2="350" />
        <line class="tic tic9"  x1="50" y1="200" x2="70" y2="200" />
​
        <line class="hand minute_hand"  x1="200" y1="200" x2="200" y2="50"  />
        <line class="hand second_hand"  x1="200" y1="200" x2="200" y2="50"  />
        <line class="hand hour_hand"  x1="200" y1="200" x2="200" y2="80"  />
​
        <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>
​
    <script>
    (function(){
​
        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 stop = function(){
                clearInterval(interval);
            }
    
            var reset = function() {
                totalSeconds = 0;
            };
    
            return {
                reset: reset,
                start: start,
                stop: stop
            };
    
        };
    
        var timer = Timer();
​
        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>
    