commit
205a42e051
11 changed files with 545 additions and 0 deletions
@ -0,0 +1,2 @@ |
|||||||
|
npm_modules |
||||||
|
.DS_Store |
||||||
Binary file not shown.
@ -0,0 +1,6 @@ |
|||||||
|
.visualization { |
||||||
|
height: 700px; |
||||||
|
margin: 10px auto; |
||||||
|
position: relative; |
||||||
|
width: 1100px; |
||||||
|
} |
||||||
@ -0,0 +1,9 @@ |
|||||||
|
* { |
||||||
|
box-sizing: border-box; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
|
||||||
|
body { |
||||||
|
font-family: sans-serif; |
||||||
|
} |
||||||
@ -0,0 +1,148 @@ |
|||||||
|
<!DOCTYPE html> |
||||||
|
<html> |
||||||
|
<head> |
||||||
|
<meta charset="utf-8"> |
||||||
|
<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> |
||||||
|
` |
||||||
@ -0,0 +1,269 @@ |
|||||||
|
import Matrices from './matrices'; |
||||||
|
import Diagram from './diagram'; |
||||||
|
import UI from './ui'; |
||||||
|
import Hotfixes from './hotfixes'; |
||||||
|
|
||||||
|
require('../css/reset.scss'); |
||||||
|
require('../css/index.scss'); |
||||||
|
require('../css/events.scss'); |
||||||
|
require('../css/tourney.scss'); |
||||||
|
require('../css/diagram.scss'); |
||||||
|
require('../css/sort.scss'); |
||||||
|
require('../css/schemes.scss'); |
||||||
|
require('../css/rounds.scss'); |
||||||
|
|
||||||
|
const main = { |
||||||
|
changeEvent: (e) => { |
||||||
|
const target = UI.findRoot(e.target); |
||||||
|
main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) }); |
||||||
|
main.updateUI(); |
||||||
|
}, |
||||||
|
|
||||||
|
changeSort: (e) => { |
||||||
|
const target = UI.findRoot(e.target); |
||||||
|
main.setState({ sort: target.getAttribute(UI.DATA.SORT) }); |
||||||
|
main.updateUI(); |
||||||
|
}, |
||||||
|
|
||||||
|
changeScheme: (e) => { |
||||||
|
const target = UI.findRoot(e.target); |
||||||
|
main.setState({ scheme: target.getAttribute(UI.DATA.SCHEME) }); |
||||||
|
main.updateUI(); |
||||||
|
}, |
||||||
|
|
||||||
|
changeRound: (e) => { |
||||||
|
const target = UI.findRoot(e.target); |
||||||
|
const r = target.getAttribute(UI.DATA.ROUND) |
||||||
|
|
||||||
|
const state = main.getState(); |
||||||
|
const roundsToShow = state.rounds ? state.rounds.split(',') : []; |
||||||
|
const i = roundsToShow.indexOf(r); |
||||||
|
(i === -1) ? roundsToShow.push(r) : roundsToShow.splice(i, 1); |
||||||
|
|
||||||
|
main.setState({ rounds: roundsToShow }); |
||||||
|
main.updateUI(); |
||||||
|
}, |
||||||
|
|
||||||
|
// DEPRECATED? 161120
|
||||||
|
// getRounds: (eventKey) => {
|
||||||
|
// const rounds = {};
|
||||||
|
//
|
||||||
|
// main.json.tourneys[eventKey].games.forEach(game => {
|
||||||
|
// const name = UI.getRoundName(main.json.rounds[game.rId]);
|
||||||
|
// if (rounds[name] === undefined) {
|
||||||
|
// rounds[name] = [];
|
||||||
|
// }
|
||||||
|
//
|
||||||
|
// rounds[name].push({
|
||||||
|
// id: game.rId,
|
||||||
|
// name: name,
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
//
|
||||||
|
// return rounds;
|
||||||
|
// },
|
||||||
|
|
||||||
|
getDuplicates: (eventKey) => { |
||||||
|
const games = {}; |
||||||
|
|
||||||
|
main.json.tourneys[eventKey].games.forEach(game => { |
||||||
|
const teams = [game.t1, game.t2].sort(); |
||||||
|
const addr = `${teams[0]}-${teams[1]}`; |
||||||
|
|
||||||
|
if (games[addr] === undefined) { |
||||||
|
games[addr] = []; |
||||||
|
} |
||||||
|
|
||||||
|
games[addr].push(game); |
||||||
|
}); |
||||||
|
|
||||||
|
return Object.keys(games).reduce((acc, k) => { |
||||||
|
if (games[k].length > 1) { |
||||||
|
acc.push(games[k]); |
||||||
|
} |
||||||
|
|
||||||
|
return acc; |
||||||
|
}, []); |
||||||
|
}, |
||||||
|
|
||||||
|
generateUI: () => { |
||||||
|
const state = main.getState(); |
||||||
|
|
||||||
|
UI.buildTourneyPane(); |
||||||
|
UI.buildEventsPane(main.changeEvent); |
||||||
|
UI.buildSortPane(main.changeSort); |
||||||
|
UI.buildSchemePane(main.changeScheme); |
||||||
|
UI.buildRoundsPane(main.changeRound); |
||||||
|
}, |
||||||
|
|
||||||
|
updateUI: () => { |
||||||
|
const state = main.getState(); |
||||||
|
const eventKey = state.eventKey; |
||||||
|
|
||||||
|
const matrix = Matrices.buildMatrix(main.json, eventKey); |
||||||
|
|
||||||
|
const duplicates = main.getDuplicates(eventKey); |
||||||
|
|
||||||
|
const tmp = Diagram.buildChords({ |
||||||
|
data: main.json, |
||||||
|
sort: state.sort, |
||||||
|
eventKey, |
||||||
|
matrix, |
||||||
|
SORT_TYPES: UI.SORT_TYPES, |
||||||
|
}); |
||||||
|
|
||||||
|
const getScore = (game) => { |
||||||
|
let s1 = game.s1; |
||||||
|
let s2 = game.s2; |
||||||
|
|
||||||
|
if (game.sp1 !== null) { |
||||||
|
s1 = game.sp1; |
||||||
|
} else if (game.se1 !== null) { |
||||||
|
s1 = game.se1; |
||||||
|
} |
||||||
|
|
||||||
|
if (game.sp2 !== null) { |
||||||
|
s2 = game.sp2; |
||||||
|
} else if (game.se2 !== null) { |
||||||
|
s2 = game.se2; |
||||||
|
} |
||||||
|
|
||||||
|
return { s1, s2 } |
||||||
|
}; |
||||||
|
|
||||||
|
const chords = tmp.reduce((acc, d) => { |
||||||
|
const tSrc = main.json.tourneys[eventKey].teams[d.source.index].tId; |
||||||
|
const tTgt = main.json.tourneys[eventKey].teams[d.target.index].tId; |
||||||
|
|
||||||
|
d.game = main.json.tourneys[eventKey].games |
||||||
|
.find(g => { |
||||||
|
return (g.t1 === tSrc && g.t2 === tTgt) || |
||||||
|
(g.t1 === tTgt && g.t2 === tSrc) |
||||||
|
}); |
||||||
|
|
||||||
|
duplicates.forEach(games => { |
||||||
|
if (games[0] === d.game || games[1] === d.game) { |
||||||
|
const gameNew = (games[0] === d.game ? games[1] : games[0]); |
||||||
|
const sourceNew = Object.assign({}, d.source); |
||||||
|
const targetNew = Object.assign({}, d.target); |
||||||
|
|
||||||
|
const sourceAngle = d.source.endAngle - d.source.startAngle; |
||||||
|
const targetAngle = d.target.endAngle - d.target.startAngle; |
||||||
|
|
||||||
|
const { s1: s1g0, s2: s2g0 } = getScore(games[0]); |
||||||
|
const { s1: s1g1, s2: s2g1 } = getScore(games[1]); |
||||||
|
const totals = { src: 0, tgt: 0 }; |
||||||
|
const offset = { src: 0, tgt: 0 } |
||||||
|
|
||||||
|
totals.src += (games[0].t1 === tSrc ? s1g0 : s2g0); |
||||||
|
totals.tgt += (games[0].t1 === tTgt ? s1g0 : s2g0); |
||||||
|
|
||||||
|
totals.src += (games[1].t1 === tSrc ? s1g1 : s2g1); |
||||||
|
totals.tgt += (games[1].t1 === tTgt ? s1g1 : s2g1); |
||||||
|
|
||||||
|
offset.src = (games[0].t1 === tSrc ? s1g0 : s2g0); |
||||||
|
offset.tgt = (games[0].t1 === tTgt ? (totals.tgt - s1g0) : (totals.tgt - s2g0)); |
||||||
|
|
||||||
|
sourceNew.startAngle = d.source.startAngle + sourceAngle * (offset.src / totals.src); |
||||||
|
d.source.endAngle = d.source.startAngle + sourceAngle * (offset.src / totals.src); |
||||||
|
|
||||||
|
targetNew.endAngle = d.target.startAngle + targetAngle * (offset.tgt / totals.tgt); |
||||||
|
d.target.startAngle = d.target.startAngle + targetAngle * (offset.tgt / totals.tgt); |
||||||
|
|
||||||
|
acc.push({ source: sourceNew, target: targetNew, game: gameNew }); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
acc.push(d); |
||||||
|
|
||||||
|
return acc; |
||||||
|
}, []); |
||||||
|
|
||||||
|
chords.groups = tmp.groups; |
||||||
|
|
||||||
|
Diagram.clear(); |
||||||
|
|
||||||
|
const color = Diagram.buildColorScheme({ |
||||||
|
scheme: parseInt(state.scheme), |
||||||
|
len: main.json.tourneys[state.eventKey].teams.length, |
||||||
|
}); |
||||||
|
|
||||||
|
const container = Diagram.buildContainer(chords); |
||||||
|
Diagram.buildArcs({ container, color, eventKey, data: main.json }); |
||||||
|
Diagram.buildRibbons({ container, color, chords, eventKey, data: main.json }); |
||||||
|
|
||||||
|
UI.updateTourneyPane(state.eventKey); |
||||||
|
UI.updateEventsPane(state.eventKey); |
||||||
|
UI.updateSortPane(state.sort); |
||||||
|
UI.updateSchemePane(state.scheme); |
||||||
|
UI.updateRoundsPane(state.rounds.split(','), main.json.rounds); |
||||||
|
}, |
||||||
|
|
||||||
|
fetch: (url) => new Promise((resolve, reject) => { |
||||||
|
const listener = ({ target: req }) => { |
||||||
|
req.status === 200 ? resolve(req.responseText) : reject("busted"); |
||||||
|
}; |
||||||
|
|
||||||
|
const req = new XMLHttpRequest(); |
||||||
|
req.addEventListener('load', listener); |
||||||
|
req.open('GET', url); |
||||||
|
req.send(); |
||||||
|
}), |
||||||
|
|
||||||
|
initJSON: (strData) => { |
||||||
|
main.json = JSON.parse(strData); |
||||||
|
}, |
||||||
|
|
||||||
|
patchErrors: () => { |
||||||
|
main.json.tourneys['1934'] = Hotfixes.patch1934(main.json.tourneys['1934']); |
||||||
|
}, |
||||||
|
|
||||||
|
getState: () => { |
||||||
|
const params = window.location.href.split('?')[1]; |
||||||
|
|
||||||
|
if (!params) { |
||||||
|
return {}; |
||||||
|
} |
||||||
|
|
||||||
|
return params.split('&').reduce((acc, v) => { |
||||||
|
const tmp = v.split('='); |
||||||
|
acc[tmp[0]] = tmp[1]; |
||||||
|
return acc; |
||||||
|
}, {}); |
||||||
|
}, |
||||||
|
|
||||||
|
initState: () => { |
||||||
|
const state = main.getState(); |
||||||
|
|
||||||
|
state.eventKey = state.eventKey || "2014"; |
||||||
|
state.sort = state.sort || null; |
||||||
|
state.scheme = state.scheme || Math.ceil(Math.random() * 4); |
||||||
|
state.rounds = state.rounds || Object.values(UI.ROUND_TYPES); |
||||||
|
|
||||||
|
main.setState(state); |
||||||
|
}, |
||||||
|
|
||||||
|
setState: (next) => { |
||||||
|
const state = main.getState(); |
||||||
|
const url = window.location.href.split('?')[0]; |
||||||
|
|
||||||
|
state.eventKey = next.eventKey || state.eventKey; |
||||||
|
state.rounds = next.rounds || state.rounds; |
||||||
|
state.scheme = next.scheme || state.scheme; |
||||||
|
state.sort = next.sort || state.sort || null; |
||||||
|
|
||||||
|
const params = []; |
||||||
|
for (let key in state) { |
||||||
|
params.push(`${key}=${state[key]}`); |
||||||
|
} |
||||||
|
|
||||||
|
history.pushState(null, null, `${url}?${params.join('&')}`); |
||||||
|
}, |
||||||
|
} |
||||||
|
|
||||||
|
main.fetch('worldcup.json') |
||||||
|
.then(main.initJSON) |
||||||
|
.then(main.patchErrors) |
||||||
|
.then(main.initState) |
||||||
|
.then(main.generateUI) |
||||||
|
.then(main.updateUI); |
||||||
@ -0,0 +1,15 @@ |
|||||||
|
{ |
||||||
|
"name": "dust", |
||||||
|
"version": "1.0.0", |
||||||
|
"description": "Particle management using streams.", |
||||||
|
"main": "webpack.config.js", |
||||||
|
"scripts": { |
||||||
|
"test": "echo \"Error: no test specified\" && exit 1" |
||||||
|
}, |
||||||
|
"repository": { |
||||||
|
"type": "git", |
||||||
|
"url": "http://gogs.benburlingham.com/ben.burlingham/dust.git" |
||||||
|
}, |
||||||
|
"author": "Ben Burlingham", |
||||||
|
"license": "ISC" |
||||||
|
} |
||||||
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,38 @@ |
|||||||
|
var ExtractTextPlugin = require('extract-text-webpack-plugin'); |
||||||
|
|
||||||
|
module.exports = { |
||||||
|
entry: './js/index.js', |
||||||
|
|
||||||
|
module: { |
||||||
|
loaders: [ |
||||||
|
{ |
||||||
|
test: /\.js$/, |
||||||
|
exclude: __dirname + '/node_modules', |
||||||
|
loader: 'babel-loader', |
||||||
|
query: { |
||||||
|
presets: ['es2015'] |
||||||
|
} |
||||||
|
}, |
||||||
|
{ |
||||||
|
test: /\.(scss|css)$/, |
||||||
|
include: __dirname + '/css', |
||||||
|
loader: ExtractTextPlugin.extract('css!sass?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]'), |
||||||
|
}, |
||||||
|
{ |
||||||
|
test : /\.svg$/, |
||||||
|
loader : 'file-loader?name=../[path][name].[ext]' |
||||||
|
} |
||||||
|
] |
||||||
|
}, |
||||||
|
|
||||||
|
output: { |
||||||
|
path: __dirname, |
||||||
|
filename: './js/bundle.js' |
||||||
|
}, |
||||||
|
|
||||||
|
plugins: [ |
||||||
|
new ExtractTextPlugin('./css/style.css', { |
||||||
|
allChunks: true |
||||||
|
}) |
||||||
|
] |
||||||
|
}; |
||||||
Loading…
Reference in new issue