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.
 
 
 
 
 

91 lines
2.4 KiB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
border-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 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/sorter.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">
<link rel="stylesheet" href="res/sort.css">
<link rel="stylesheet" href="res/rounds.css">
</head>
<body>
<div class="visualization">
<div class="events"></div>
<div class="sort"></div>
<div class="rounds"></div>
<div class="diagram">
<svg width="800" height="700"></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>
fix setState to not remove everything
1974 two germanies?
embiggen current event flag
move styling out of index.html
move fetch into main
add sort metric below team name
hide rounds
round persistence
better layout
better colors
webpack 2 / css modules?
add three.js sketchup clone to a list somewhere
separate three.js swell map below post or something
tweet it!
</div>
</body>
</html>
`