-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathspikes.html
85 lines (70 loc) · 2.59 KB
/
spikes.html
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!doctype html>
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta charset="utf-8">
<title>ESPN Cricinfo - Match Centre</title>
<link rel="stylesheet" href="./css/styles.css">
</head>
<style type="text/css" media="screen">
html{
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
body{
background: #f1f1f1;
}
.espn-gfx{
float:left;
clear:both;
padding-bottom:10px;
}
</style>
<body>
<div id="espn-spikes" class="espn-gfx"></div>
<div id="espn-spikes2" class="espn-gfx"></div>
<script src="./bower_components/d3/d3.js"></script>
<script src="./bower_components/d3.chart/d3.chart.js"></script>
<script src="./js/espn.gfx.random.js"></script>
<script src="./js/espn.gfx.spikes.js"></script>
<script>
var wagon = [["48","111","2"],["100","50","1"],["232","323","1"],["237","321","1"],["355","142","6"],["124","34","1"],["223","200","1"],["309","140","1"],["218","226","1"],["130","320","1"],["285","320","4"],["35","266","4"],["343","116","4"],["126","136","1"],["44","120","2"],["311","132","1"],["230","287","1"],["140","56","1"],["281","262","2"],["352","221","4"],["295","145","1"],["46","192","1"],["257","208","1"],["266","266","1"],["307","126","1"],["96","293","2"],["91","277","1"],["286","77","1"],["244","139","1"],["28","96","4"],["116","205","1"],["107","196","1"]];
function getSpikes(wagon,dimension,strokeWidth){
// @constant - x,y coords are relative to this constant
var DIAMETER = 350,
arr = [],
cur;
dimension = dimension || 225; // Circle Diameter
strokeWidth = strokeWidth || 3; // Stroke Width for the Ground (Circle)
dimension = dimension - (strokeWidth*2);
for (var i = 0, len = wagon.length; i < len; i++) {
cur = wagon[i];
arr.push({
x: (Number(cur[0]) * dimension)/DIAMETER,
y: (Number(cur[1]) * dimension)/DIAMETER,
runs: Number(cur[2])
});
}
return arr;
}
var interval = 4000;
setInterval(function(){
spikes.draw(espn.gfx.random.spikes());
},interval);
var spikes = d3.select("#espn-spikes")
.chart("spikes",{
diameter : 225,
textPadding : 15,
colors : ["#7ace5c","#f88f22","#7ace5c"]
});
spikes.draw(espn.gfx.random.spikes());
var spikes2 = d3.select("#espn-spikes2")
.chart("spikes",{
diameter : 225,
textPadding : 15,
colors : ["#7ace5c","#f88f22","#7ace5c"],
onMouseover : function(el,d,box){ console.log(el,d,box); },
onMouseout : function(el,d,box){ console.log('out'); }
});
spikes2.draw(getSpikes(wagon));
</script>
</body>