parent
0819057c79
commit
aefdade7ea
5 changed files with 170 additions and 194 deletions
@ -0,0 +1,104 @@ |
|||||||
|
const Diagram = { |
||||||
|
build: (eventIndex, data, metaMatrix, chordMatrix) => { |
||||||
|
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); |
||||||
|
|
||||||
|
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}`;
|
||||||
|
// });
|
||||||
|
|
||||||
|
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? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
|
||||||
|
// console.info(metaMatrix[d.index])
|
||||||
|
const t = data.tourneys[eventIndex].teams[d.index]; |
||||||
|
const c = data.countries[data.teams[t]]; |
||||||
|
return data.countries[data.teams[t]].n; |
||||||
|
}); |
||||||
|
}, |
||||||
|
}; |
||||||
|
|
||||||
|
// const main = (data) => {
|
||||||
|
// const lookup = buildLookup(endpoints, data);
|
||||||
|
// const chordMatrix = buildChordMatrix(lookup.games, lookup.reducedTeams)
|
||||||
|
// const metaMatrix = buildMetaMatrix(lookup.games, lookup.reducedTeams)
|
||||||
|
// };
|
||||||
@ -0,0 +1,19 @@ |
|||||||
|
const fetch = (url) => new Promise((resolve, reject) => { |
||||||
|
const listener = ({ srcElement: req }) => { |
||||||
|
req.status === 200 ? resolve(req.responseText) : reject("busted"); |
||||||
|
}; |
||||||
|
|
||||||
|
const req = new XMLHttpRequest(); |
||||||
|
req.addEventListener('load', listener); |
||||||
|
req.open('GET', url); |
||||||
|
req.send(); |
||||||
|
}); |
||||||
|
|
||||||
|
const main = function(strData) { |
||||||
|
const json = JSON.parse(strData); |
||||||
|
const metaMatrix = Matrices.buildMetaMatrix(json, "1930"); |
||||||
|
const chordMatrix = Matrices.buildChordMatrix(json, "1930"); |
||||||
|
Diagram.build("1930", json, metaMatrix, chordMatrix); |
||||||
|
} |
||||||
|
|
||||||
|
fetch('worldcup.json').then(main); |
||||||
@ -0,0 +1,39 @@ |
|||||||
|
const Matrices = { |
||||||
|
// A x A array of nulls; null-null relationships are omitted in chord diagram.
|
||||||
|
createEmptyMatrix: (len) => { |
||||||
|
const empty = Array.apply(null, Array(len)); |
||||||
|
return empty.map(() => empty.map(() => null)); |
||||||
|
}, |
||||||
|
|
||||||
|
// Identical structure of chord matrix but with { game, team }.
|
||||||
|
buildMetaMatrix: (json, eventKey) => { |
||||||
|
const teams = json.tourneys[eventKey].teams; |
||||||
|
const matrix = Matrices.createEmptyMatrix(teams.length); |
||||||
|
|
||||||
|
json.tourneys[eventKey].games.forEach(g => { |
||||||
|
const i1 = teams.indexOf(g.t1); |
||||||
|
const i2 = teams.indexOf(g.t2); |
||||||
|
|
||||||
|
matrix[i1][i2] = { game: g, team: g.t1 }; |
||||||
|
matrix[i2][i1] = { game: g, team: g.t2 }; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return matrix; |
||||||
|
}, |
||||||
|
|
||||||
|
// Scalar data points (sum of goals scored).
|
||||||
|
buildChordMatrix: (json, eventKey) => { |
||||||
|
const teams = json.tourneys[eventKey].teams; |
||||||
|
const matrix = Matrices.createEmptyMatrix(teams.length); |
||||||
|
|
||||||
|
json.tourneys[eventKey].games.forEach(g => { |
||||||
|
const i1 = teams.indexOf(g.t1); |
||||||
|
const i2 = teams.indexOf(g.t2); |
||||||
|
|
||||||
|
matrix[i1][i2] = g.s1 + g.se1 + g.sp1; |
||||||
|
matrix[i2][i1] = g.s2 + g.se2 + g.sp2; |
||||||
|
}, []); |
||||||
|
|
||||||
|
return matrix; |
||||||
|
}, |
||||||
|
}; |
||||||
Loading…
Reference in new issue