You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
4.5 KiB
149 lines
4.5 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<script type="text/javascript" src='../core/js/ui.js'></script>
|
|
<script src="http://d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
|
|
<script src="http://d3js.org/d3-chord.v0.0.min.js"></script>
|
|
<script src='js/bundle.js'></script>
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<link rel="stylesheet" href="css/flags.min.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>World Cup Matches</h1>
|
|
<h2>Chord diagram for all World Cup matches from 1930 to 2014</h2>
|
|
<hr>
|
|
|
|
<h3>Project Goal</h3>
|
|
|
|
<blockquote>
|
|
Explore D3's chord diagrams using World Cup match data. Use Haskell to build JSON parsers.
|
|
<br><br>
|
|
The visualization should invite interaction to create and answer questions such as:
|
|
<ul>
|
|
<li>How many times has Iran competed in a World Cup?</li>
|
|
<li>Which teams played the in final in 1986?</li>
|
|
<li>Which team scored the most goals in any World Cup?</li>
|
|
<li>Why does the 1950 World Cup have 6 final games (and what is the Maracanazo)?</li>
|
|
</ul>
|
|
</blockquote>
|
|
|
|
<p>
|
|
Data source: <a href="http://openfootball.github.io/">OpenFootball</a>.
|
|
Transform and reduce scripts are built in Haskell, publically available in <a href="http://gogs.benburlingham.com/ben.burlingham/d3-worldcup">the source code</a>.
|
|
</p>
|
|
|
|
<p>
|
|
This visualization is created using D3.js. Note that null-null relationships are not displayed on chord diagrams. As a result, matches with a score of 0-0 are not shown.
|
|
</p>
|
|
|
|
<hr>
|
|
|
|
<div class="visualization">
|
|
<div class="tourney"></div>
|
|
<div class="events"></div>
|
|
<div class="sort"></div>
|
|
<div class="schemes"></div>
|
|
<div class="rounds"></div>
|
|
|
|
<div class="diagram">
|
|
<svg width="700" height="700"></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <div class="notes">
|
|
1930: OK
|
|
1934: Patched.
|
|
OK Italy Spain replay 1-0!
|
|
1938:
|
|
OK Switzerland Germany 1-1 replay 4-2
|
|
OK Cuba Romania 3-3 replay 3-2
|
|
OK Brazil Czech 1-1 replay 2-1
|
|
1950: OK
|
|
1954:
|
|
OK Germany Turkey 4-1 playoff 7-2
|
|
OK Switzerland Italy 2-1 playoff 4-1
|
|
OK Germany Hungary 3-8 final 3-2
|
|
1958:
|
|
Sweden Wales 0-0
|
|
Brazil England 0-0
|
|
OK Northern Ireland Czech 1-0 playoff 2-1
|
|
OK Wales Hungary 1-1 replay 2-1
|
|
OK Russia England 1-0 replay 2-2
|
|
1962:
|
|
Germany Italy 0-0
|
|
Brazil Czech Republic 0-0
|
|
Hungary Argentina 0-0
|
|
England Bulgaria 0-0
|
|
1966:
|
|
England Uruguay 0-0
|
|
Mexico Uruguay 0-0
|
|
Argentina Germany 0-0
|
|
1970:
|
|
Mexico Russia 0-0
|
|
Uruguay Italy 0-0
|
|
Israel Italy 0-0
|
|
1974:
|
|
Australia Chile 0-0
|
|
Brazil Yugoslavia 0-0
|
|
Scotland Brazil 0-0
|
|
Sweden Bulgaria 0-0
|
|
1978:
|
|
Germany Poland 0-0
|
|
Germany Tunisia 0-0
|
|
Brazil Spain 0-0
|
|
Netherlands Peru 0-0
|
|
Italy Germany 0-0
|
|
Argentina Brazil 0-0
|
|
1982:
|
|
Italy Poland 0-0
|
|
Peru Cameroon 0-0
|
|
Poland Cameroon 0-0
|
|
Serbia Northern Ireland 0-0
|
|
Russia Poland 0-0
|
|
Germany England 0-0
|
|
Spain England 0-0
|
|
1986:
|
|
Scotland Uruguay 0-0
|
|
Morocco Poland 0-0
|
|
1990:
|
|
Uruguay Spain 0-0
|
|
England Netherlands 0-0
|
|
Ireland Egypt 0-0
|
|
1994:
|
|
South Korea Bolivia 0-0
|
|
Ireland Norway 0-0
|
|
Brazil Sweden replay
|
|
1998:
|
|
Paraguay Bulgaria 0-0
|
|
Spain Paraguay 0-0
|
|
Netherlands Belgium 0-0
|
|
2002:
|
|
France Uruguay 0-0
|
|
Nigeria England 0-0
|
|
OK Brazil Turkey replay 1-0
|
|
2006:
|
|
Trinidad Tobago Sweden 0-0
|
|
Netherlands Argentina 0-0
|
|
Mexico Angola 0-0
|
|
Japan Croatia 0-0
|
|
France Switzerland 0-0
|
|
2010:
|
|
Uruguay France 0-0
|
|
England Algeria 0-0
|
|
Paraguay New Zealand 0-0
|
|
Ivory Coast Portugal 0-0
|
|
Portugal Brazil 0-0
|
|
Switzerland Honduras 0-0
|
|
2014:
|
|
Brazil Mexico 0-0
|
|
Japan Greece 0-0
|
|
Costa Rica England 0-0
|
|
Ecuador France 0-0
|
|
Iran-Nigeria 0-0
|
|
</div> -->
|
|
</body>
|
|
</html>
|
|
`
|
|
|