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.
204 lines
7.6 KiB
204 lines
7.6 KiB
const goalsFor = {};
|
|
const goalsAgainst = {};
|
|
|
|
const Diagram = {
|
|
clear: () => d3.select('svg').selectAll("*").remove(),
|
|
|
|
swapGroupArcs: (chords, i, j) => {
|
|
if (i < 0 || j < 0 || i === j) {
|
|
return chords;
|
|
}
|
|
|
|
// Determine which arc is closer to 0, so earlier arc always swaps with later.
|
|
const f = (chords.groups[i].endAngle < chords.groups[j].endAngle ? i : j);
|
|
const s = (chords.groups[i].endAngle < chords.groups[j].endAngle ? j : i);
|
|
|
|
const fst = Object.assign({}, chords.groups[f]);
|
|
const snd = Object.assign({}, chords.groups[s]);
|
|
|
|
const fstAngle = fst.endAngle - fst.startAngle;
|
|
const sndAngle = snd.endAngle - snd.startAngle;
|
|
const offsetAngle = sndAngle - fstAngle;
|
|
|
|
// Bring first forward.
|
|
chords.groups[f].startAngle = snd.endAngle - fstAngle;
|
|
chords.groups[f].endAngle = snd.endAngle;
|
|
chords.groups[f].index = snd.index;
|
|
|
|
// Bring second back.
|
|
chords.groups[s].startAngle = fst.startAngle;
|
|
chords.groups[s].endAngle = fst.startAngle + sndAngle;
|
|
chords.groups[s].index = fst.index;
|
|
|
|
// Bump other groups forward.
|
|
for (let ii = f + 1; ii < s; ii++) {
|
|
chords.groups[ii].startAngle += offsetAngle;
|
|
chords.groups[ii].endAngle += offsetAngle;
|
|
}
|
|
|
|
// Swap array positions.
|
|
const tmp = chords.groups[f]
|
|
chords.groups[f] = chords.groups[s];
|
|
chords.groups[s] = tmp;
|
|
|
|
return chords;
|
|
},
|
|
|
|
swapGroups: (data, eventIndex, chords, i, j) => {
|
|
Diagram.swapGroupArcs(chords, i, j);
|
|
Matrices.swapIndices(data.tourneys[eventIndex].teams, i, j);
|
|
return chords;
|
|
},
|
|
|
|
getCountryName: (data, eventIndex, n) => {
|
|
const countryId = data.teams[data.tourneys[eventIndex].teams[n]];
|
|
return data.countries[countryId].n;
|
|
},
|
|
|
|
getPopulation: (data, eventIndex, n) => {
|
|
const teamId = data.tourneys[eventIndex].teams[n];
|
|
return data.countries[data.teams[teamId]].p;
|
|
},
|
|
|
|
getGoalsFor: (data, eventIndex, n) => {
|
|
const teamId = data.tourneys[eventIndex].teams[n];
|
|
|
|
if (goalsFor[teamId] === undefined) {
|
|
goalsFor[teamId] = data.tourneys[eventIndex].games.reduce((acc, v) => {
|
|
|
|
if (v.t1 === teamId) {
|
|
return acc + v.s1 + v.se1 + v.sp1;
|
|
}
|
|
|
|
if (v.t2 === teamId) {
|
|
return acc + v.s2 + v.se2 + v.sp2;
|
|
}
|
|
|
|
return acc;
|
|
}, 0);
|
|
}
|
|
|
|
return goalsFor[teamId];
|
|
},
|
|
|
|
getGoalsAgainst: (data, eventIndex, n) => {
|
|
const teamId = data.tourneys[eventIndex].teams[n];
|
|
|
|
if (goalsAgainst[teamId] === undefined) {
|
|
goalsAgainst[teamId] = data.tourneys[eventIndex].games.reduce((acc, v) => {
|
|
|
|
if (v.t2 === teamId) {
|
|
return acc + v.s1 + v.se1 + v.sp1;
|
|
}
|
|
|
|
if (v.t1 === teamId) {
|
|
return acc + v.s2 + v.se2 + v.sp2;
|
|
}
|
|
|
|
return acc;
|
|
}, 0);
|
|
}
|
|
|
|
return goalsAgainst[teamId];
|
|
},
|
|
|
|
build: (data, eventIndex, metaMatrix, chordMatrix) => {
|
|
const svg = d3.select("svg"),
|
|
width = +svg.attr("width"),
|
|
height = +svg.attr("height"),
|
|
outerArcThickness = 5,
|
|
outerRadius = Math.min(width, height) * 0.5 - 125,
|
|
innerRadius = outerRadius - outerArcThickness;
|
|
|
|
const chords = d3.chord()
|
|
.padAngle(0.05)
|
|
.call(null, chordMatrix);
|
|
|
|
const sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
|
|
// Diagram.getCountryName.bind(null, data, eventIndex),
|
|
// Diagram.getGoalsFor.bind(null, data, eventIndex),
|
|
// Diagram.getGoalsAgainst.bind(null, data, eventIndex),
|
|
Diagram.getPopulation.bind(null, data, eventIndex),
|
|
Diagram.swapGroups.bind(null, data, eventIndex));
|
|
|
|
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(sortedChords);
|
|
|
|
const group = g.append("g")
|
|
.attr("class", "groups")
|
|
.selectAll("g")
|
|
.data(chords => chords.groups)
|
|
.enter().append("g");
|
|
|
|
group.append("path")
|
|
.style("fill", d => color(d.index))
|
|
.style("stroke", d => 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) {
|
|
// STRANGE EXTENDED TIME CHILE-BRAZIL - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
|
|
|
|
const teamId = data.tourneys[eventIndex].teams[d.index];
|
|
const country = data.countries[data.teams[teamId]];
|
|
return data.countries[data.teams[teamId]].n + ' ' + country.p;
|
|
});
|
|
},
|
|
};
|
|
|