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; }); }, };