Skip to content

Instantly share code, notes, and snippets.

@knwin

knwin/fifa_worldcup.csv

Last active October 6, 2015 08:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save knwin/ea1fffcda6c95375268c to your computer and use it in GitHub Desktop.
Save knwin/ea1fffcda6c95375268c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fifa_worldcup.csv
Edition Year Host_Country Winner Runner_up Average_attendance Teams Matches Goals_scored Average_goals
1930 World Cup Uruguay 1930 Uruguay Uruguay Argentina 32808 13 18 70 3.9
1934 World Cup Italy 1934 Italy Italy Czechoslovakia 21353 16 17 70 4.1
1938 World Cup France 1938 France Italy Hungary 20872 15 18 84 4.7
1950 World Cup Brazil 1950 Brazil Uruguay Brazil 47511 13 22 88 4
1954 World Cup Switzerland 1954 Switzerland Germany Hungary 29562 16 26 140 5.4
1958 World Cup Sweden 1958 Sweden Brazil Sweden 23423 16 35 126 3.6
1962 World Cup Chile 1962 Chile Brazil Czechoslovakia 27912 16 32 89 2.8
1966 World Cup England 1966 England England Germany 48848 16 32 89 2.8
1970 World Cup Mexico 1970 Mexico Brazil Italy 50124 16 32 95 3
1974 World Cup Germany 1974 Germany Germany Netherlands 49099 16 38 97 2.6
1978 World Cup Argentina 1978 Argentina Argentina Netherlands 40679 16 38 102 2.7
1982 World Cup Spain 1982 Spain Italy Germany 40572 24 52 146 2.8
1986 World Cup Mexico 1986 Mexico Argentina Germany 46039 24 52 132 2.5
1990 World Cup Italy 1990 Italy Germany Argentina 48389 24 52 115 2.2
1994 World Cup United States 1994 United States Brazil Italy 68991 24 52 141 2.7
1998 World Cup France 1998 France France Brazil 43517 32 64 171 2.7
2002 World Cup Korea & Japan 2002 Korea & Japan Brazil Germany 42269 32 64 161 2.5
2006 World Cup Germany 2006 Germany Italy France 52491 32 64 147 2.3
2010 World Cup South Africa 2010 South Africa Spain Netherlands 49670 32 64 145 2.3
2014 World Cup Brazil 2014 Brazil Germany Argentina 53592 32 64 171 2.7
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Line Chart</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
body {
background-color: white;
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 24px;
margin: 0;
}
p {
font-size: 14px;
margin: 10px 0 0 0;
}
svg {
background-color: white;
}
circle:hover {
fill: orange;
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
</head>
<body>
<h1>FIFA Worldcup</h1>
<p>World Cups' Goals, Matches and Teams from 1930 - 2014</p>
<script type="text/javascript">
var w = 700;
var h = 600;
var padding = [ 20, 10, 50, 100 ]; //Top, right, bottom, left
//Set up date formatting and years
var dateFormat = d3.time.format("%Y");
var xScale = d3.time.scale()
.range([ padding[3], w - padding[1] - padding[3] ]);
var yScale = d3.scale.linear()
.range([ padding[0], h - padding[2] ]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15)
.tickFormat(function(d) {
return dateFormat(d);
});
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
/* var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.Year));
})
.y(function(d) {
return yScale(d.Goals_scored);
});*/
var line = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.Year));
})
.y(function(d) {
return yScale(d.Goals_scored);
});
/*line.append("text")
.text(function(d) {
return d.Host_Country;
});*/
var line2 = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.Year));
})
.y(function(d) {
return yScale(d.Teams);
});
var line3 = d3.svg.line()
.x(function(d) {
return xScale(dateFormat.parse(d.Year));
})
.y(function(d) {
return yScale(d.Matches);
});
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
d3.csv("fifa_worldcup.csv", function(data) {
xScale.domain([
d3.min(data, function(d) {
return dateFormat.parse(d.Year);
}),
d3.max(data, function(d) {
return dateFormat.parse(d.Year);
})
]);
yScale.domain([
d3.max(data, function(d) {
return +d.Goals_scored;
}),
0
]);
//Line
//
// Note data is wrapped in another array, so all its
// values are bound to a single element (the line!)
//
svg.data([ data ])
.append("path")
.attr("class", "line Goals_scored")
.attr("d", line)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 2);
svg.data([ data ])
.append("path")
.attr("class", "line Teams")
.attr("d", line2)
.attr("fill", "none")
.attr("stroke", "orange")
.attr("stroke-width", 2);
svg.data([ data ])
.append("path")
.attr("class", "line Matches")
.attr("d", line3)
.attr("fill", "none")
.attr("stroke", "black")
.attr("stroke-width", 2);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + (h - padding[2] + 10) + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (padding[3] - 10) + ",0)")
.call(yAxis);
});
</script>
<p>Blue line indicates number of Winning Goals</p>
<p>Black line indicates number of Matches</p>
<p>Orange line indicates number of Teams</p>
<p>Source: https://en.wikipedia.org/wiki/FIFA_World_Cup</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment