Skip to content

Instantly share code, notes, and snippets.

@naxxateux

naxxateux/data.tsv

Last active August 29, 2015 13:56
Show Gist options
  • Save naxxateux/9060688 to your computer and use it in GitHub Desktop.
Save naxxateux/9060688 to your computer and use it in GitHub Desktop.
Download ZIP
Cristiano Ronaldo has scored in every minute of a game
Raw
data.tsv
minute goals penalties
0 0 0
1 1 0
2 2 0
3 7 0
4 4 0
5 2 0
6 4 1
7 1 1
8 3 0
9 4 0
10 6 0
11 2 1
12 3 0
13 6 1
14 6 0
15 1 0
16 2 1
17 1 0
18 3 0
19 4 0
20 2 1
21 6 0
22 4 1
23 10 3
24 7 1
25 4 0
26 8 1
27 5 0
28 5 1
29 3 1
30 4 0
31 1 0
32 4 1
33 2 2
34 3 1
35 4 2
36 3 0
37 3 0
38 4 0
39 5 0
40 1 0
41 4 0
42 3 0
43 1 0
44 7 1
45 12 2
46 2 1
47 3 0
48 3 0
49 6 0
50 5 2
51 6 1
52 3 0
53 1 1
54 5 0
55 4 2
56 3 0
57 4 1
58 8 0
59 4 0
60 6 2
61 3 0
62 4 0
63 4 0
64 2 0
65 5 0
66 2 0
67 3 2
68 10 2
69 6 1
70 8 1
71 4 0
72 3 2
73 7 0
74 6 0
75 6 0
76 5 0
77 6 0
78 1 0
79 6 0
80 5 2
81 4 2
82 8 2
83 2 1
84 6 2
85 3 1
86 3 0
87 7 0
88 6 1
89 7 1
90 22 6
Raw
index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<html>
<head>
<script src='http://d3js.org/d3.v3.min.js'></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Sanchez' rel='stylesheet' type='text/css'>
<style>
body {
background-color: #ffffff;
}
#header {
width: 800px;
margin: 0 auto;
font-family: Sanchez;
font-size: 42px;
}
#container {
width: 800px;
margin: 0 auto;
}
#article {
width: 500px;
padding: 20px 0 20px 0;
float: left;
font-family: Sanchez;
font-size: 16px;
}
#aside {
width: 250px;
padding: 20px 0 20px 50px;
float: right;
font-family: Sanchez;
font-size: 12px;
}
#legend {
padding: 20px 0 0 0;
}
#chart {
width: 800px;
margin: 0 auto;
clear: both;
background-color: #f3f3dc;
}
.bar {
opacity: .7;
}
.bar:hover {
opacity: 1;
}
.goal-bar {
fill: #7ec3d3;
}
.penalty-bar {
fill: #cd8677;
}
.axis {
font-family: Raleway;
font-size: 12px;
}
.axis line {
fill: none;
stroke: #e6e6e6;
shape-rendering: crispEdges;
}
.axis path {
display: none;
}
.tooltip {
font-family: Raleway;
font-size: 10px;
dominant-baseline: hanging;
text-anchor: middle;
}
</style>
<title>Ronaldo has now scored a goal in all 90 minutes of a match</title>
</head>
<body>
<div id='header'>Ronaldo has now scored a goal in all 90 minutes of a match</div>
<div id='container'>
<div id='article'>
Many soccer players don't score 90 goals in total during their careers, but according to various reports Cristiano Ronaldo has managed to score at least one goal in every minute of a 90 minute game so far in his career.
<p>He has scored just one goal in the 1st, 7th, 15th, 17th, 31st, 40th, 43rd, 53rd, and 78th minutes. He has scored a minimum of two goals in the other 81 minutes of a football match. There’s no doubt that Ronaldo has a flair for drama as he’s scored the most goals of his career in at the end of each half. He has 22 goals in the 90th minute and 12 goals in the 45th minutes of games. Ronaldo also has a habit of scoring goals in the 23rd and 68th minutes as he has 10 in each of those minutes.</p>
</div>
<div id='aside'>
<div id='intro'>
<i><b>How to read it?</b></i>
<p>Hover each bar to see the exact amount of goals in the tooltip above it.</p>
</div>
<div id='legend'></div>
</div>
</div>
<div id='chart'></div>
<script>
var margin = {
top: 50,
right: 50,
bottom: 50,
left: 50
},
width = 800 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var xAxisTickSize = 10;
var yAxisStep = 5,
xAxisStep = 5;
var barWidth = 5;
var tooltipVerticalIndent = 15;
var svg = d3.select('#chart').append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
d3.tsv('data.tsv', type, function(error, data) {
var x = d3.scale.ordinal()
.rangePoints([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
x.domain(data.map(function(d) {
return d.minute;
}));
y.domain([0, d3.max(data, function(d) {
return d.goals;
})]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom')
.tickValues(x.domain().filter(function(d, i) {
return !(i % xAxisStep) & i != 0;
}))
.innerTickSize(xAxisTickSize);
var yAxis = d3.svg.axis()
.scale(y)
.orient('left')
.tickValues(x.domain().filter(function(d, i) {
return !(i % yAxisStep) & i != 0 & i != 25;
}))
.tickSize(-width, 0, 0);
svg.append('g')
.attr('class', 'x axis')
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis);
svg.append('g')
.attr('class', 'y axis')
.call(yAxis)
.append('text')
.style('text-anchor', 'end')
.text('Goals');
var bars = svg.selectAll('.bar')
.data(data)
.enter().append('g')
.attr('class', 'bar')
.on('mouseover', function(d) {
var xPosition = x(d.minute) - barWidth / 2;
var yPosition = y(d.goals) - tooltipVerticalIndent;
svg.append('text')
.attr('class', 'tooltip')
.attr('x', xPosition)
.attr('y', yPosition)
.text(d.penalties === 0 ? d.goals : d.goals + ' (' + d.penalties + ')');
})
.on('mouseout', function() {
d3.select('.tooltip').remove();
});
bars.append('rect')
.attr('class', 'goal-bar')
.attr('x', function(d) {
return x(d.minute) - barWidth / 2;
})
.attr('width', barWidth)
.attr('y', function(d) {
return y(d.goals);
})
.attr('height', function(d) {
return height - y(d.goals);
});
bars.append('rect')
.attr('class', 'penalty-bar')
.attr('x', function(d) {
return x(d.minute) - barWidth / 2;
})
.attr('width', barWidth)
.attr('y', function(d) {
return y(d.penalties);
})
.attr('height', function(d) {
return height - y(d.penalties);
});
// Legend
var legend = d3.select('#legend').append('svg')
.attr('width', 250)
.attr('height', 150);
var bar = legend.append('g')
.attr('transform', 'translate(125, 0)');
bar.append('rect')
.attr('class', 'goal-bar')
.attr('width', barWidth)
.attr('height', 100);
bar.append('rect')
.attr('class', 'penalty-bar')
.attr('width', barWidth)
.attr('y', 75)
.attr('height', 25);
bar.append('line')
.attr('x1', barWidth / 2)
.attr('x2', barWidth / 2)
.attr('y1', 100)
.attr('y2', 100 + xAxisTickSize)
.attr('stroke-width', 1)
.attr('stroke', '#8c8c8c');
bar.append('text')
.attr('x', barWidth / 2)
.attr('y', 100 + xAxisTickSize + 5)
.attr('font-family', 'Raleway')
.attr('font-size', '10px')
.attr('dominant-baseline', 'hanging')
.attr('text-anchor', 'middle')
.text('Minute');
bar.append('line')
.attr('x1', barWidth / 2 - 10)
.attr('x2', barWidth / 2 - 10)
.attr('y2', 100)
.attr('stroke-width', 1)
.attr('stroke', '#8c8c8c');
bar.append('text')
.attr('x', barWidth / 2 - 15)
.attr('y', 50)
.attr('font-family', 'Raleway')
.attr('font-size', '10px')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'end')
.attr('fill', '#7ec3d3')
.text('All goals');
bar.append('line')
.attr('x1', barWidth / 2 + 10)
.attr('x2', barWidth / 2 + 10)
.attr('y1', 75)
.attr('y2', 100)
.attr('stroke-width', 1)
.attr('stroke', '#8c8c8c');
bar.append('text')
.attr('x', barWidth / 2 + 15)
.attr('y', 75 + 25 / 2)
.attr('font-family', 'Raleway')
.attr('font-size', '10px')
.attr('dominant-baseline', 'middle')
.attr('text-anchor', 'start')
.attr('fill', '#cd8677')
.text('Goals from penalties');
});
function type(d) {
d.minute = +d.minute;
d.goals = +d.goals;
d.penalties = +d.penalties;
return d;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment