d3-worldcup/js/diagram.js

const Diagram = {
    clear: () => d3.select('svg').selectAll("*").remove(),

    swap: (i, j) => {
        const fst = Object.assign({}, chords.groups[i]);
        const snd = Object.assign({}, chords.groups[j]);

        // Calculate and apply offsets for adjacent group arcs.
        deltaFst = snd.endAngle - fst.endAngle;
        deltaSnd = snd.startAngle - fst.startAngle

        chords.groups[i].startAngle += deltaFst;
        chords.groups[i].endAngle += deltaFst;

        chords.groups[j].startAngle -= deltaSnd;
        chords.groups[j].endAngle -= deltaSnd;

        // Apply offsets to relevant chords.
        chords.forEach((v,i) => {
            const sourceProps = {};
            const targetProps = {}

            // Adjust source and target arcs for first index.
            if (v.source.index === fst.index) {
                sourceProps.index = snd.index;
                sourceProps.startAngle = v.source.startAngle + deltaFst;
                sourceProps.endAngle = v.source.endAngle + deltaFst;
            }

            if (v.target.index === fst.index) {
                targetProps.index = snd.index;
                targetProps.startAngle = v.target.startAngle + deltaFst;
                targetProps.endAngle = v.target.endAngle + deltaFst;
            }

            if (v.source.subindex === fst.index) {
                sourceProps.subindex = snd.index;
            }

            if (v.target.subindex === fst.index) {
                targetProps.subindex = snd.index;
            }

            // Adjust source and target arcs for second index.
            if (v.source.index === snd.index) {
                sourceProps.index = fst.index;
                sourceProps.startAngle = v.source.startAngle - deltaSnd;
                sourceProps.endAngle = v.source.endAngle - deltaSnd;
            }

            if (v.target.index === snd.index) {
                targetProps.index = fst.index;
                targetProps.startAngle = v.target.startAngle - deltaSnd;
                targetProps.endAngle = v.target.endAngle - deltaSnd;
            }

            if (v.source.subindex === snd.index) {
                sourceProps.subindex = fst.index;
            }

            if (v.target.subindex === snd.index) {
                targetProps.subindex = fst.index;
            }

            Object.assign(v.source, sourceProps)
            Object.assign(v.target, targetProps)
        });

        return chords;

        // // json.tourneys[eventKey].teams.sort()
        //
        // sortKey = "goalsFor"
        //
        // switch (sortKey) {
        //     case 'goalsFor':
        //     // console.info(json.tourneys[eventKey].teams)/
        //     // return json.tourneys[eventKey].teams;
        //
        //         const teams = json.tourneys[eventKey].teams
        //             .slice()
        //             .sort((a, b) => {
        //                 const n1 = json.countries[json.teams[a]].n;
        //                 const n2 = json.countries[json.teams[b]].n;
        //
        //                 if (n1 < n2) {
        //                     return -1;
        //                 }
        //                 else if (n1 > n2) {
        //                     return 1;
        //                 }
        //
        //                 return 0;
        //             });
        //
        //         console.warn(teams.map(v => {
        //             return json.countries[json.teams[v]].n
        //         }))
        //
        //         // console.warn(teams.map(a => json.countries[json.teams[a]].n))
        //
        //         return teams;
        //         break;
        //
        //     case 'goalsAgainst':
        //         break;
        //
        //     case 'countryName':
        //         break;
        //
        //     case 'countryPopulation':
        //         break;
        // }
    },

    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 chord = d3.chord()
            .padAngle(0.05);

        const sortedChords = Diagram.sort(chord(chordMatrix));

        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) {
              // SORT BY GOALS SCORED
              // SORT BY ALPHABETICAL
              // SORT BY COUNTRY SIZE
              // 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];
                return data.countries[data.teams[t]].n + ' ' + d.index;
          });
    },
};