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.
 
 
 
 
 

70 lines
2.1 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>
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>. There are a few errors.
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 and Three.js libraries.
</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">
<h5>TODO</h5>
update ribbon hover
// STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
No finals in 1954 or 1962?
1954 - teams already played eachother (uh oh)
fix buoy viz
tweet it!
</div>
</body>
</html>
`