Last active
August 29, 2015 13:57
-
-
Save danharr/9832320 to your computer and use it in GitHub Desktop.
Passing the ball
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="content-type" content="text/html;charset=utf-8"> | |
<title>Lines using D3.js</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script> | |
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script> | |
<style type="text/css"> | |
@font-face{font-family:danx;src:url('http://www.24-the-movie.com/Barclays Premier League.ttf')} | |
body {background-color:#ffffff;} | |
.year.label { | |
font-family: danx; | |
} | |
h1 { | |
font-family: 'Helvetica Neue'; | |
position:absolute; | |
top:2px; | |
right:2px; | |
} | |
h3 { | |
font-family: 'Helvetica Neue'; | |
position:absolute; | |
top:26px; | |
right:2px; | |
} | |
body {font-size:62.5%;} /* Set the size of 1em to 10px in all browsers */ | |
body.extraWide {font-size:85%;} | |
body.wide {font-size:75%;} | |
body.narrow {font-size:50%;} | |
body.extraNarrow {font-size:40%;} | |
</style> | |
</head> | |
<body> | |
<h1>Passing the ball animation made using d3.js - my first ever d3.js visual April 2012</h1> | |
<script type="text/javascript"> | |
/*Select the DIV container "D3line" and add an SVG element to it*/ | |
$(function(){ | |
var viewPortWidth = $(window).width(); | |
if (viewPortWidth > 1900) {$('body').addClass('extraWide')} | |
else if (viewPortWidth > 1400) {$('body').addClass('wide')} | |
else if (viewPortWidth > 1000) {$('body').addClass('standard')} | |
else if (viewPortWidth > 700) {$('body').addClass('narrow')} | |
else {$('body').addClass('extraNarrow')} | |
}); | |
var color = d3.scale.linear() | |
.domain([0,94]) | |
.range(["#99CCFF","#2E3D4C"]); | |
var x = ($(window).width() / 100); | |
var y = ($(window).height() / 100); | |
var xScale = d3.scale.linear().domain([-100, 100]).range([-(x*12.5),(x*12.5)]); | |
var yScale = d3.scale.linear().domain([-100, 100]).range([-(y*12.5),(y*12.5)]); | |
var svg = d3.select("body").append("svg"); | |
var dataset = [ | |
[-18.7,10.4,0,37.5,37.5], | |
[-26.5,7.5,0,12.5,37.5], | |
[12.3,45.9,0,12.5,62.5], | |
[-0.9,2.3,0,37.5,12.5], | |
[27.4,-19.2,0,12.5,37.5], | |
[-17.4,0.9,0,37.5,62.5], | |
[6.4,-8.8,11,62.5,62.5], | |
[-12.7,3.4,11,12.5,37.5], | |
[4.9,-7.8,12,37.5,12.5], | |
[10.8,0.7,12,12.5,37.5], | |
[-3.9,-4.6,12,62.5,37.5], | |
[23.3,-0.4,12,12.5,37.5], | |
[-21.7,-2.9,12,37.5,37.5], | |
[4.3,2.5,12,12.5,62.5], | |
[-16.6,10.4,12,37.5,37.5], | |
[13.4,6.6,12,37.5,12.5], | |
[0.7,-7.7,12,87.5,37.5], | |
[17.2,7.5,12,12.5,62.5], | |
[19.4,-4.1,12,37.5,37.5], | |
[22,14.5,12,12.5,37.5], | |
[16.2,12.6,13,37.5,62.5], | |
[0.5,-11.6,13,87.5,37.5], | |
[12.9,3.5,13,37.5,62.5], | |
[-19.3,9.9,13,87.5,37.5], | |
[-11.8,-2.5,13,37.5,12.5], | |
[10.1,-4.3,14,12.5,37.5], | |
[-46.4,-2.2,14,62.5,37.5], | |
[23.4,-0.5,14,12.5,62.5], | |
[-11.2,6.5,14,37.5,37.5], | |
[-18.7,-6.3,14,12.5,37.5], | |
[-8.1,15.2,14,62.5,62.5], | |
[10.9,-10.7,14,12.5,62.5], | |
[-12.8,-5.6,14,37.5,37.5], | |
[9.4,23.2,14,62.5,62.5], | |
[-4.9,-15.3,14,37.5,12.5], | |
[20.9,-2.1,14,62.5,62.5], | |
[12.3,17.7,14,37.5,37.5], | |
[-2.8,6.2,14,87.5,37.5], | |
[12.9,22.1,14,12.5,37.5], | |
[-20.2,1.1,14,87.5,62.5], | |
[-10.9,7.9,14,50,87.5], | |
[9.8,0.9,14,62.5,62.5], | |
[10.5,-22.2,15,37.5,37.5], | |
[-29.3,15.3,15,50,87.5], | |
[35.1,2.4,15,62.5,62.5], | |
[-27.7,0.1,15,37.5,37.5], | |
[-13.4,2.6,15,62.5,62.5], | |
[12.4,3.6,15,62.5,37.5], | |
[29.3,3.5,15,12.5,37.5], | |
[-18.8,-8.5,15,37.5,12.5], | |
[-2,-12.3,15,37.5,37.5], | |
[0.2,11.5,15,62.5,62.5], | |
[24.9,-11.7,15,37.5,37.5], | |
[-17.8,21.9,15,37.5,62.5], | |
[-15.7,1.9,15,12.5,37.5], | |
[1.6,-7.1,16,12.5,62.5], | |
[6.6,14.8,16,62.5,37.5], | |
[7.8,-1.7,16,62.5,12.5], | |
[-10.9,-10.8,16,87.5,62.5], | |
[-27.7,5.4,16,50,87.5], | |
[-1.6,16.5,17,62.5,62.5], | |
[-22.8,1.7,17,12.5,37.5], | |
[21.4,-1.3,17,12.5,62.5], | |
[15.7,-5.3,17,12.5,37.5], | |
[47.8,-0.1,17,62.5,12.5], | |
[-29.9,11.3,17,87.5,37.5], | |
[29,-0.6,17,62.5,12.5], | |
[47.3,12.8,19,50,87.5], | |
[-7.8,-4.5,19,87.5,37.5], | |
[0.6,29.6,19,62.5,37.5], | |
[-34.7,26.3,19,87.5,37.5], | |
[-54.5,24.6,19,50,87.5], | |
[3.2,4.2,19,62.5,62.5], | |
[-20.4,-4.6,19,37.5,37.5], | |
[36.6,-21.1,19,62.5,62.5], | |
[30.9,5.2,19,50,87.5], | |
[-22.9,7.6,20,37.5,62.5], | |
[21.5,-0.9,20,37.5,37.5], | |
[2.3,16.5,20,62.5,37.5], | |
[1.2,-11.6,20,87.5,37.5], | |
[-29.9,-4.2,20,62.5,37.5], | |
[-21.6,1,20,37.5,62.5], | |
[20.1,-2.1,20,62.5,62.5], | |
[-13.8,8,20,37.5,62.5], | |
[13.2,-11.9,20,37.5,37.5], | |
[-3.6,23.6,20,37.5,62.5], | |
[7.4,16.5,20,62.5,37.5], | |
[50.2,-4.9,22,37.5,37.5], | |
[-0.2,13.2,22,37.5,62.5], | |
[-2.2,-16.4,22,87.5,37.5], | |
[22.1,7.4,22,37.5,62.5], | |
[-7.2,11.2,22,87.5,37.5], | |
[-1.9,-15,22,62.5,12.5], | |
[-26.8,-7.8,22,37.5,62.5], | |
[39.7,3.7,22,62.5,62.5], | |
[10.6,9.4,22,37.5,62.5], | |
[-17.7,-30.4,23,37.5,62.5], | |
[-9.9,-14.4,23,62.5,62.5], | |
[-1.4,17.9,23,50,87.5], | |
[-13.4,12.5,23,37.5,37.5], | |
[14.3,-11.1,23,12.5,37.5], | |
[-19,-3.4,23,37.5,37.5], | |
[9.2,16.2,23,62.5,62.5], | |
[35.6,-0.3,23,37.5,37.5], | |
[0.7,14.4,23,37.5,62.5], | |
[-14.6,-10.7,23,87.5,37.5], | |
[-8.8,-23.5,23,62.5,37.5], | |
[-0.9,9.9,24,62.5,62.5], | |
[3.6,-16.2,24,37.5,37.5], | |
[18.9,4.2,24,62.5,62.5], | |
[-16.8,-1.8,24,62.5,37.5], | |
[-36.6,10.9,24,62.5,12.5], | |
[10.8,9.7,25,12.5,62.5], | |
[-2,-6.8,25,87.5,37.5], | |
[10.9,-9.8,25,12.5,62.5], | |
[35.5,6.2,26,50,87.5], | |
[-23.8,-16.9,26,87.5,37.5], | |
[-27.4,-3.9,26,87.5,62.5], | |
[-21.7,-2.5,26,37.5,62.5], | |
[-0.3,5.3,26,62.5,62.5], | |
[-37.7,59.3,27,37.5,37.5], | |
[22.6,-8.3,27,12.5,37.5], | |
[-0.3,-6.6,28,62.5,37.5], | |
[-10.9,20.9,28,62.5,62.5], | |
[15.6,4.2,28,50,87.5], | |
[-49.6,2.9,28,87.5,62.5], | |
[-30.9,13.2,28,62.5,62.5], | |
[11.7,-9.5,28,12.5,62.5], | |
[31.1,-6.5,29,37.5,12.5], | |
[-11.7,-5.7,29,87.5,62.5], | |
[-20.7,3.6,29,62.5,37.5], | |
[20.1,-6.1,29,12.5,37.5], | |
[3.9,18,29,62.5,37.5], | |
[1.4,-5.4,29,37.5,12.5], | |
[26.3,17,29,12.5,37.5], | |
[-17.6,-1.4,29,62.5,37.5], | |
[-35.1,1,29,62.5,37.5], | |
[-20.9,19.8,3,87.5,37.5], | |
[-19.8,10.6,3,62.5,12.5], | |
[-3.8,22.2,3,37.5,62.5], | |
[-23.2,9.4,31,50,87.5], | |
[-0.8,9,31,62.5,62.5], | |
[2.2,-8.1,31,37.5,37.5], | |
[21.5,-8.7,31,37.5,62.5], | |
[7.1,0.3,32,12.5,37.5], | |
[-7.9,23.1,32,37.5,37.5], | |
[-3,-13.3,32,37.5,12.5], | |
[-19.6,41.1,32,37.5,37.5], | |
[9.1,-8.4,32,12.5,37.5], | |
[-14.9,-5.1,32,37.5,37.5], | |
[19,-0.3,32,12.5,62.5], | |
[10.3,4.6,32,37.5,37.5], | |
[18,1.4,32,12.5,37.5], | |
[-14,13.4,32,62.5,37.5], | |
[-10.6,-0.2,32,87.5,37.5], | |
[-10.7,3.6,32,37.5,37.5], | |
[9.5,-3.5,32,37.5,12.5], | |
[-7.4,8.2,32,87.5,37.5], | |
[0.6,-6.1,32,37.5,37.5], | |
[-9.2,3,33,37.5,62.5], | |
[-21,-8.9,33,87.5,62.5], | |
[7.3,9.1,34,62.5,62.5], | |
[10.2,1.1,34,37.5,37.5], | |
[21.2,4.1,34,62.5,37.5], | |
[-30.3,16.3,34,87.5,62.5], | |
[1.2,-14.2,34,62.5,62.5], | |
[-2.2,7.8,34,37.5,37.5], | |
[6.2,5.2,34,87.5,37.5], | |
[-30.2,-2.7,34,62.5,12.5], | |
[-10.4,-1.3,35,62.5,37.5], | |
[35.1,5.6,35,37.5,37.5], | |
[7.8,5.8,35,37.5,12.5], | |
[-17.3,11,35,12.5,37.5], | |
[19.3,17.1,36,37.5,12.5], | |
[0.6,9.6,36,37.5,62.5], | |
[16.2,-3.1,36,37.5,37.5], | |
[-16.7,32.4,36,87.5,37.5], | |
[0,-9.9,36,12.5,62.5], | |
[41.6,-25.5,36,87.5,37.5], | |
[-1.5,2.5,39,62.5,12.5], | |
[-2.2,-18.4,39,37.5,12.5], | |
[-33.5,-2.1,39,62.5,37.5], | |
[12.1,-6.8,39,12.5,62.5], | |
[15.6,-16.5,39,62.5,62.5], | |
[-35.1,-3.7,4,87.5,62.5], | |
[-47.4,-2.9,4,37.5,37.5], | |
[18.2,-1.7,4,12.5,62.5], | |
[-2.5,-20.1,4,37.5,37.5], | |
[41.9,-3.3,4,62.5,62.5], | |
[-18.9,7.8,4,37.5,62.5], | |
[20.5,5.3,4,37.5,37.5], | |
[-15.7,-2.8,4,37.5,62.5], | |
[31,6.5,4,37.5,37.5], | |
[-12.2,14.5,4,62.5,37.5], | |
[38.2,42.8,40,12.5,62.5], | |
[-16.8,-3,43,62.5,37.5], | |
[2.6,14.5,43,37.5,37.5], | |
[10.6,26.4,45,12.5,62.5], | |
[-3.2,-8.5,46,12.5,37.5], | |
[15.9,16.8,46,12.5,62.5], | |
[53.1,7.3,46,87.5,37.5], | |
[10.7,11.7,46,37.5,37.5], | |
[-17.5,12.5,46,87.5,37.5], | |
[5.6,12.3,48,37.5,62.5], | |
[5,14.2,48,87.5,37.5], | |
[16.7,1.3,48,37.5,12.5], | |
[-13.8,16.2,48,62.5,37.5], | |
[-6.1,-4.2,48,12.5,37.5], | |
[8.6,6.7,48,37.5,12.5], | |
[4.4,-8.3,48,62.5,37.5], | |
[3.1,12.7,48,37.5,62.5], | |
[2.3,7.8,48,87.5,62.5], | |
[-7.7,28.7,48,12.5,37.5], | |
[9.3,4.5,48,37.5,37.5], | |
[-8.2,-2.3,49,62.5,37.5], | |
[1.4,17.2,49,37.5,37.5], | |
[8.6,-7.6,49,37.5,12.5], | |
[24.4,2.7,49,12.5,37.5], | |
[8.3,10.2,49,12.5,62.5], | |
[-59.8,-0.4,5,87.5,62.5], | |
[3.5,-21.2,5,12.5,62.5], | |
[-3.1,57.9,5,50,87.5], | |
[-21.5,0.5,5,62.5,12.5], | |
[-19.6,21.2,5,12.5,37.5], | |
[-6.4,-6.2,50,62.5,12.5], | |
[18.7,2.3,50,12.5,62.5], | |
[-3.1,-2.3,50,12.5,37.5], | |
[53.1,-4.4,50,62.5,12.5], | |
[-30.8,13.4,50,87.5,62.5], | |
[11.3,13,50,62.5,37.5], | |
[17.5,1.3,50,87.5,37.5], | |
[16.4,1,51,12.5,62.5], | |
[18.7,-3.1,52,62.5,37.5], | |
[-6,-1.9,52,87.5,37.5], | |
[-5.6,16.7,52,37.5,37.5], | |
[-5.8,2.2,52,62.5,12.5], | |
[0,4.4,53,62.5,37.5], | |
[-8.8,-0.3,53,87.5,37.5], | |
[-10.6,3.1,53,12.5,37.5], | |
[19.1,19.2,53,87.5,37.5], | |
[24,2.5,53,62.5,37.5], | |
[6.2,-0.1,53,12.5,37.5], | |
[10,4.6,54,37.5,12.5], | |
[0.3,25.7,54,12.5,37.5], | |
[-6,18.6,56,37.5,37.5], | |
[36,22.3,57,12.5,37.5], | |
[0.1,4.3,57,62.5,37.5], | |
[-53.8,-15.2,57,87.5,62.5], | |
[36.7,3.7,57,62.5,62.5], | |
[17.3,7.8,57,37.5,62.5], | |
[-10.1,21,58,87.5,62.5], | |
[7.5,-5.7,58,62.5,12.5], | |
[-12,19.2,58,87.5,37.5], | |
[-19.1,-7.7,58,12.5,37.5], | |
[13.2,-0.1,58,87.5,37.5], | |
[-1.4,-8.1,58,12.5,37.5], | |
[-29.1,12.3,58,87.5,37.5], | |
[-14.9,6.5,59,62.5,62.5], | |
[8.2,10.8,59,37.5,37.5], | |
[0,17.9,59,87.5,37.5], | |
[3.9,-6.7,6,12.5,37.5], | |
[-0.1,-5.5,6,37.5,37.5], | |
[17.9,-1.4,6,12.5,37.5], | |
[14.8,21.3,6,62.5,62.5], | |
[-5.8,26.8,6,12.5,37.5], | |
[10.8,-3.7,6,12.5,37.5], | |
[-4.5,-3.5,6,37.5,37.5], | |
[7.2,5.9,6,12.5,62.5], | |
[-5.8,2,6,62.5,37.5], | |
[4.7,-3.2,60,12.5,37.5], | |
[-3.6,-2.8,61,12.5,37.5], | |
[0.6,-7.5,61,87.5,37.5], | |
[-20.1,2.3,61,12.5,37.5], | |
[0,-5.4,61,87.5,62.5], | |
[-6.7,-17.6,61,12.5,37.5], | |
[-26.7,1.8,61,87.5,37.5], | |
[4.3,20.1,61,62.5,37.5], | |
[-12.1,-3.1,61,12.5,37.5], | |
[1.6,2.4,62,62.5,12.5], | |
[-2.5,-18.6,62,37.5,12.5], | |
[11.5,-0.6,64,87.5,37.5], | |
[-9,0.4,64,37.5,37.5], | |
[17,0.9,64,12.5,37.5], | |
[13.6,18.1,64,12.5,62.5], | |
[7.7,-4.2,64,62.5,12.5], | |
[-7.2,-5.7,64,37.5,37.5], | |
[19,21.3,64,12.5,62.5], | |
[-8.9,14.4,65,87.5,37.5], | |
[-5,-3.4,65,12.5,37.5], | |
[33.3,-1.6,65,87.5,37.5], | |
[-10.1,0.2,66,87.5,37.5], | |
[0.4,7.4,66,12.5,37.5], | |
[19.8,-0.5,66,37.5,12.5], | |
[28,2.9,66,87.5,37.5], | |
[-14.5,7.3,66,62.5,12.5], | |
[6.2,20.3,66,87.5,37.5], | |
[-5.3,-0.6,67,62.5,12.5], | |
[-14,-14,67,12.5,37.5], | |
[5.2,16.4,68,12.5,62.5], | |
[1.4,13.4,68,87.5,37.5], | |
[-2.8,-5,68,87.5,37.5], | |
[-0.1,9.4,68,87.5,62.5], | |
[-15.1,-0.2,68,87.5,37.5], | |
[-9.5,-14.7,68,62.5,12.5], | |
[11.4,-15.5,68,62.5,62.5], | |
[-15,-6.7,69,87.5,62.5], | |
[-1.4,12.3,7,62.5,62.5], | |
[8.1,21.3,7,12.5,37.5], | |
[13.3,-17.6,7,37.5,12.5], | |
[41.9,15.8,7,62.5,37.5], | |
[-3.3,-5.2,7,87.5,37.5], | |
[-14.9,3.8,7,62.5,37.5], | |
[10.3,11.1,71,87.5,37.5], | |
[28.5,10.5,71,12.5,37.5], | |
[12,20.2,72,87.5,62.5], | |
[-25.5,-7.2,72,87.5,37.5], | |
[-22.1,1,72,37.5,37.5], | |
[24.3,10.7,72,62.5,37.5], | |
[-6.7,4.6,72,37.5,62.5], | |
[-50.4,-7.5,72,37.5,37.5], | |
[-4.4,14.5,72,12.5,62.5], | |
[27.8,4.8,72,12.5,37.5], | |
[-25.1,54.2,74,50,87.5], | |
[20.5,3.5,74,37.5,37.5], | |
[-1,-12.3,74,62.5,12.5], | |
[-27.4,13.2,74,62.5,37.5], | |
[11.2,-3.6,74,12.5,37.5], | |
[26.3,-4.6,74,37.5,37.5], | |
[31.7,7.5,74,62.5,37.5], | |
[-9.8,0.1,75,87.5,62.5], | |
[-18.8,9.1,75,87.5,37.5], | |
[21.3,2.3,76,62.5,62.5], | |
[9.5,16.6,76,62.5,37.5], | |
[-14,-2.3,76,87.5,37.5], | |
[19.1,-11.6,76,37.5,37.5], | |
[28.5,6.1,76,37.5,62.5], | |
[-17,-6.1,76,87.5,62.5], | |
[14.8,4,76,37.5,62.5], | |
[-26.6,0,76,87.5,62.5], | |
[1.2,-14.5,76,37.5,37.5], | |
[-12.8,-13.4,76,37.5,62.5], | |
[21.7,10.3,76,50,87.5], | |
[14.6,-8.6,77,62.5,62.5], | |
[-10,-14.3,77,87.5,62.5], | |
[-11.2,11.8,8,87.5,62.5], | |
[4.7,-7.3,8,62.5,37.5], | |
[-21.5,5.4,8,62.5,37.5], | |
[-23.8,4.5,8,37.5,12.5], | |
[16.5,56.9,8,50,87.5], | |
[-10.9,2.5,8,62.5,12.5], | |
[6.4,5.7,80,37.5,62.5], | |
[-36.7,-12.8,80,87.5,62.5], | |
[-2.9,-15.1,80,62.5,62.5], | |
[15.6,4.4,81,12.5,62.5], | |
[-7.6,-5.1,81,12.5,37.5], | |
[16.7,-0.6,81,12.5,62.5], | |
[41.1,-6,81,37.5,37.5], | |
[-13.9,6.7,81,87.5,62.5], | |
[13.9,5,81,12.5,37.5], | |
[-8.4,-5.9,81,87.5,37.5], | |
[6.8,8.3,81,12.5,37.5], | |
[-2.4,-6.3,81,87.5,37.5], | |
[-15.3,3,81,87.5,62.5], | |
[13.5,-1.5,81,12.5,37.5], | |
[-2.4,5.5,81,87.5,62.5], | |
[-15.1,2.8,82,87.5,62.5], | |
[-17.5,6.3,82,87.5,62.5], | |
[10.7,1.4,82,12.5,37.5], | |
[-5,9,82,87.5,37.5], | |
[-2.8,-15.3,82,87.5,37.5], | |
[-10.1,-3.2,82,12.5,37.5], | |
[-31,-7.4,82,87.5,62.5], | |
[-24.7,10.3,82,62.5,62.5], | |
[17,11.1,82,87.5,62.5], | |
[7.5,-8.9,84,12.5,37.5], | |
[40.3,-0.9,84,37.5,37.5], | |
[-9.7,8,84,87.5,62.5], | |
[9.7,6.8,84,87.5,62.5], | |
[20.6,7.3,85,37.5,37.5], | |
[21,0.2,85,12.5,37.5], | |
[-0.6,13.1,85,87.5,37.5], | |
[0.1,-9.7,85,12.5,37.5], | |
[-0.8,-13,85,87.5,37.5], | |
[-2.8,16.3,85,87.5,62.5], | |
[-3.6,-3.4,85,62.5,37.5], | |
[10,2.3,85,87.5,37.5], | |
[-4.9,18.5,85,62.5,37.5], | |
[-31.8,-7.7,85,12.5,37.5], | |
[10.1,16.9,86,87.5,62.5], | |
[-4.2,3.9,87,87.5,62.5], | |
[-14.5,4.1,88,87.5,62.5], | |
[-22.4,-1.3,89,87.5,37.5], | |
[15.4,2.6,89,87.5,37.5], | |
[8.7,-4.4,9,12.5,37.5], | |
[-25.3,12.2,9,37.5,37.5], | |
[11.4,-0.1,9,37.5,12.5], | |
[13.6,-2.8,91,62.5,37.5], | |
[-14.5,2.2,91,87.5,37.5], | |
[17.5,9.7,91,37.5,37.5], | |
[-10.9,6,91,62.5,37.5], | |
[-4.5,10.3,92,37.5,37.5], | |
[21.4,-18.1,92,62.5,37.5], | |
[13.9,9.5,92,50,87.5], | |
[18.5,12.4,92,87.5,62.5], | |
[-25.8,10.5,92,87.5,37.5], | |
[14,12.7,92,37.5,37.5], | |
[-18.1,5.6,93,62.5,62.5], | |
[11.6,28.6,93,12.5,62.5], | |
[-8.2,-0.6,93,37.5,37.5] | |
]; | |
svg.selectAll("line") | |
.data(dataset) | |
.enter().append("line") | |
.attr("x1", function(d) {return (x*d[3]);}) | |
.attr("y1", function(d) {return (y*d[4]) ;}) | |
.attr("x2", function(d) {return (x*d[3]);}) | |
.attr("y2", function(d) {return (y*d[4]) ;}) | |
.attr("opacity", 1) | |
.on("mouseover", function(){d3.select(this).style("stroke", "#FFD700");}) | |
.on("mouseout", function(){d3.select(this).style("stroke", function(d) {return color(d[2]) ;});}) | |
.transition() | |
.delay(function(d) { return (d[2])*200 }) | |
.attr("x2", function(d) {return (xScale(d[0])) + (x*d[3]);}) | |
.attr("y2", function(d) {return (y*d[4])-yScale((d[1])) ;}) | |
.style("stroke", function(d) {return color(d[2]) ;}) | |
.style("stroke-width", "2"); | |
mins = | |
[ | |
"1", | |
"2", | |
"3", | |
"4", | |
"5", | |
"6", | |
"7", | |
"8", | |
"9", | |
"10", | |
"11", | |
"12", | |
"13", | |
"14", | |
"15", | |
"16", | |
"17", | |
"18", | |
"19", | |
"20", | |
"21", | |
"22", | |
"23", | |
"24", | |
"25", | |
"26", | |
"GOAL", | |
"27", | |
"28", | |
"29", | |
"30", | |
"31", | |
"32", | |
"33", | |
"34", | |
"35", | |
"36", | |
"37", | |
"GOAL", | |
"38", | |
"39", | |
"GOAL", | |
"40", | |
"41", | |
"42", | |
"43", | |
"44", | |
"45", | |
"46", | |
"47", | |
"GOAL", | |
"48", | |
"49", | |
"50", | |
"51", | |
"52", | |
"53", | |
"54", | |
"55", | |
"56", | |
"57", | |
"58", | |
"59", | |
"60", | |
"61", | |
"62", | |
"63", | |
"GOAL", | |
"64", | |
"65", | |
"66", | |
"67", | |
"68", | |
"69", | |
"70", | |
"71", | |
"72", | |
"73", | |
"74", | |
"75", | |
"76", | |
"77", | |
"78", | |
"79", | |
"80", | |
"81", | |
"82", | |
"83", | |
"84", | |
"85", | |
"86", | |
"87", | |
"88", | |
"89", | |
"90", | |
"91", | |
"92", | |
"93", | |
"94" | |
] | |
; | |
// Add the minute label; the value is set on transition. | |
svg.selectAll("text") | |
.data(mins) | |
.enter().append("text") | |
.attr("class", "year label") | |
.attr("y", (x*6.25)) | |
.attr("x", 0) | |
.attr("fill","#2E3D4C") | |
.attr("font-size",(x*6.25)+ "px") | |
.transition() | |
.attr("fill","#FFFFFF") | |
.delay(function(d,i) { return i*(18800/94) }) | |
.text(function(d) {return (d) ;}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment