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.
146 lines
4.3 KiB
146 lines
4.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
|
|
* {
|
|
border-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
font: 10px sans-serif;
|
|
padding: 20px;
|
|
}
|
|
|
|
.notes {
|
|
font-size:14px;
|
|
}
|
|
|
|
.visualization {
|
|
height: 700px;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
width: 1100px;
|
|
}
|
|
|
|
</style>
|
|
<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/matrices.js'></script>
|
|
<script src='js/diagram.js'></script>
|
|
<script src='js/ui.js'></script>
|
|
<script src='js/main.js'></script>
|
|
<link rel="stylesheet" href="res/flags.min.css">
|
|
<link rel="stylesheet" href="res/options.css">
|
|
<link rel="stylesheet" href="res/events.css">
|
|
<link rel="stylesheet" href="res/diagram.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="visualization">
|
|
<div class="events"></div>
|
|
|
|
<div class="options">
|
|
<div class="option-item inactive">
|
|
<div class="option-text">Round Robin</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<div class="option-text">Round of 16</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<div class="option-text">Quarterfinals</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<div class="option-text">Semifinals</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<div class="option-text">Third Place</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
|
|
<div class="option-item">
|
|
<div class="option-text">Final</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
|
|
<hr class="option-divider">
|
|
|
|
<div class="option-item">
|
|
<div class="option-text">Africa</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
<div class="option-item">
|
|
<div class="option-text">Asia</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
<div class="option-item">
|
|
<div class="option-text">Australia</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
<div class="option-item">
|
|
<div class="option-text">Europe</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
<div class="option-item">
|
|
<div class="option-text">North America</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
<div class="option-item">
|
|
<div class="option-text">South America</div>
|
|
<div class="option-toggle">Hide</div>
|
|
</div>
|
|
|
|
<hr class="option-divider">
|
|
|
|
<div class="option-item">
|
|
<div class="option-text">Sort By Country Name</div>
|
|
</div>
|
|
<div class="option-item">
|
|
<div class="option-text">Sort By Goals Scored</div>
|
|
</div>
|
|
<div class="option-item">
|
|
<div class="option-text">Sort By Country Population</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="diagram">
|
|
<svg width="600" height="600"></svg>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="notes">
|
|
<h5>Lessons learned</h5>
|
|
scaleOrdinal vs scaleLinear (only 2 colors!) vs interpolateCool vs d3.schemeColor20c<br>
|
|
ribbon source vs index (change fill them differently)
|
|
|
|
<a href="https://github.com/d3/d3-scale-chromatic">https://github.com/d3/d3-scale-chromatic</a>
|
|
|
|
https://bost.ocks.org/mike/uberdata/
|
|
http://bl.ocks.org/mbostock/1046712
|
|
https://bl.ocks.org/mbostock/4062006
|
|
http://projects.delimited.io/experiments/chord-transitions/demos/trade.html
|
|
|
|
https://github.com/jokecamp/sportdb-build-scripts
|
|
https://groups.google.com/forum/#!topic/opensport/593H1O7yIdE
|
|
https://github.com/openfootball/datafile/blob/master/worldcup.rb
|
|
https://openfootball.github.io/questions.html
|
|
|
|
<h5>TODO</h5>
|
|
add team name to each arc
|
|
build dataset
|
|
tweet it!
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`
|
|
|