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.
236 lines
7.3 KiB
236 lines
7.3 KiB
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<style>
|
|
|
|
body {
|
|
font: 10px sans-serif;
|
|
}
|
|
|
|
.notes {
|
|
font-size:14px;
|
|
}
|
|
|
|
.group-tick line {
|
|
stroke: #ddd;
|
|
}
|
|
|
|
.ribbon {
|
|
fill-opacity: 0.4;
|
|
stroke-width: 1;
|
|
stroke-opacity: 0.1;
|
|
}
|
|
|
|
.ribbon:hover {
|
|
fill-opacity: 1;
|
|
stroke-opacity: 1;
|
|
}
|
|
|
|
</style>
|
|
<svg width="700" height="700"></svg>
|
|
<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>
|
|
|
|
const get = (url) => new Promise((resolve, reject) => {
|
|
const req = new XMLHttpRequest();
|
|
req.addEventListener('load', listener.bind(null, resolve, reject));
|
|
req.open('GET', url);
|
|
req.send();
|
|
});
|
|
|
|
const listener = (resolve, reject, { srcElement: req }) => {
|
|
req.status === 200 ? resolve(req.responseText) : reject("busted");
|
|
};
|
|
|
|
const buildLookup = (endpoints, result) => {
|
|
const lookup = {};
|
|
|
|
result.map((v, i) => {
|
|
const json = JSON.parse(v);
|
|
const address = endpoints[i].split('.').shift();
|
|
lookup[address] = json;
|
|
});
|
|
|
|
// Team list is ~220 items; assign indices to only teams in this tournament.
|
|
lookup.reducedTeams = lookup.games.reduce((acc, v) => {
|
|
if (acc[v.t1] === undefined) {
|
|
acc[v.t1] = Object.keys(acc).length;
|
|
}
|
|
|
|
return acc;
|
|
}, {});
|
|
|
|
return lookup;
|
|
};
|
|
|
|
const buildChordMatrix = (games, reducedTeams) => {
|
|
// Create A x A array of nulls; null-null relationships are omitted.
|
|
const empty = Array.apply(null, Array(Object.keys(reducedTeams).length));
|
|
const result = empty.map(() => empty.map(() => null));
|
|
|
|
games.forEach(v => {
|
|
// Use indexes from reduced lists to populate final matrix.
|
|
const t1 = reducedTeams[v.t1];
|
|
const t2 = reducedTeams[v.t2];
|
|
|
|
result[t1][t2] = v.s1 + v.s1e + v.s1p;
|
|
result[t2][t1] = v.s2 + v.s2e + v.s2p;
|
|
}, []);
|
|
|
|
return result;
|
|
};
|
|
|
|
const buildMetaMatrix = (games, reducedTeams) => {
|
|
// Identical structure of chord matrix but with { game, team }.
|
|
// (Was this a useful comment? I was considering deleting it. Ben 161017)
|
|
const empty = Array.apply(null, Array(Object.keys(reducedTeams).length));
|
|
const matrix = empty.map(() => empty.map(() => null));
|
|
|
|
games.forEach(g => {
|
|
const t1 = reducedTeams[g.t1];
|
|
const t2 = reducedTeams[g.t2];
|
|
|
|
matrix[t1][t2] = { game: g, team: g.t1 };
|
|
matrix[t2][t1] = { game: g, team: g.t2 };
|
|
}, []);
|
|
|
|
return matrix;
|
|
};
|
|
|
|
const teamNameFromIndex = (lookup, index) => {
|
|
for (let i in lookup.reducedTeams) {
|
|
if (lookup.reducedTeams[i] === index) {
|
|
return lookup.teams[i];
|
|
}
|
|
}
|
|
|
|
return "Unknown";
|
|
};
|
|
|
|
const endpoints = ['teams.json', 'rounds.json', 'games.json'];
|
|
|
|
const main = (data) => {
|
|
const lookup = buildLookup(endpoints, data);
|
|
const chordMatrix = buildChordMatrix(lookup.games, lookup.reducedTeams)
|
|
const metaMatrix = buildMetaMatrix(lookup.games, lookup.reducedTeams)
|
|
|
|
const svg = d3.select("svg"),
|
|
width = +svg.attr("width"),
|
|
height = +svg.attr("height"),
|
|
outerArcThickness = 5,
|
|
outerRadius = Math.min(width, height) * 0.5 - 100,
|
|
innerRadius = outerRadius - outerArcThickness;
|
|
|
|
const chord = d3.chord()
|
|
.padAngle(0.05);
|
|
|
|
const arc = d3.arc()
|
|
.innerRadius(innerRadius)
|
|
.outerRadius(outerRadius);
|
|
|
|
const ribbon = d3.ribbon()
|
|
.radius(innerRadius);
|
|
|
|
// const color = d3.scaleOrdinal(d3.schemeCategory20);
|
|
// const color = d3.scaleOrdinal(d3.schemeCategory10);
|
|
// const color = d3.scaleOrdinal(d3.interpolateCool);
|
|
// const color = d3.scaleSequential(d3.interpolateRainbow);
|
|
|
|
const color = d3.scaleLinear().domain([0,10]).range(["red", "blue"]).interpolate(d3.interpolateRgb)
|
|
|
|
// const colors = ["#f1eef6","#d4b9da","#c994c7","#df65b0","#e7298a","#ce1256","#91003f"];
|
|
// const colors = ["#ffffcc","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#0c2c84"];
|
|
// const colors = ["#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
|
|
// const colors = ["#1B9E77", "#D95F02", "#7570B3", "#E7298A", "#66A61E", "#E6AB02", "#A6761D", "#666666"];
|
|
// const color = i => colors[i % colors.length];
|
|
|
|
const g = svg.append("g")
|
|
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
|
|
.datum(chord(chordMatrix));
|
|
|
|
const group = g.append("g")
|
|
.attr("class", "groups")
|
|
.selectAll("g")
|
|
.data(function(chords) { return chords.groups; })
|
|
.enter().append("g");
|
|
|
|
group.append("path")
|
|
.style("fill", function(d) { return color(d.index); })
|
|
.style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
|
|
.attr("d", arc)
|
|
|
|
group.append("text")
|
|
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
|
|
.attr("dy", ".35em")
|
|
.attr("transform", function(d) {
|
|
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
|
|
+ "translate(" + (innerRadius + 26) + ")"
|
|
+ (d.angle > Math.PI ? "rotate(180)" : "");
|
|
})
|
|
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
|
|
.text(function(d) {
|
|
// SORT BY GOALS SCORED
|
|
// SORT BY ALPHABETICAL
|
|
// SORT BY COUNTRY SIZE
|
|
// SORT BY COUNTRY POPULATION
|
|
// COLOR BY CONTINENT
|
|
// STRANGE EXTENDED TIME CHILE-BRAZIL - FIX BY HAND?
|
|
return teamNameFromIndex(lookup, d.index);
|
|
});
|
|
|
|
g.append("g")
|
|
.attr("class", "ribbons")
|
|
.selectAll("path")
|
|
.data(function(chords) { return chords; })
|
|
.enter().append("path")
|
|
.attr("d", ribbon)
|
|
.style("fill", function(d) { return color(d.target.index); })
|
|
.style("stroke", function(d) { return d3.rgb(color(d.target.index)).darker(); })
|
|
.attr("class", "ribbon")
|
|
.append("title")
|
|
.text(function(d) {
|
|
const meta1 = metaMatrix[d.target.index][d.source.index];
|
|
const meta2 = metaMatrix[d.source.index][d.target.index];
|
|
|
|
const g = meta1.game;
|
|
|
|
const t1 = lookup.teams[g.t1];
|
|
const t2 = lookup.teams[g.t2];
|
|
|
|
const e1 = g.s1e ? `(+${g.s1e} in extended time)` : '';
|
|
const e2 = g.s2e ? `(+${g.s2e} in extended time)` : '';
|
|
|
|
const p1 = g.s1p ? `(+${g.s1p} in penalties)` : '';
|
|
const p2 = g.s2p ? `(+${g.s2p} in penalties)` : '';
|
|
|
|
return `${t1}: ${g.s1} ${e1} ${p1}\n${t2}: ${g.s2} ${e2} ${p2}`;
|
|
});
|
|
};
|
|
|
|
//===== Entry point
|
|
Promise.all(endpoints.map(get)).then(main);
|
|
|
|
</script>
|
|
|
|
<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>
|
|
|