d3-worldcup/js/diagram.js

import Sorter from './sorter';
import Matrices from './matrices';

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

        chords.forEach(v => {
            if (v.source.index === f) {
                v.source.startAngle += (snd.endAngle - fst.endAngle);
                v.source.endAngle += (snd.endAngle - fst.endAngle);
            }

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

            if (v.source.index === s) {
                v.source.startAngle -= (snd.startAngle - fst.startAngle);
                v.source.endAngle -= (snd.startAngle - fst.startAngle);
            }

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

            if (v.source.index > f && v.source.index < s) {
                v.source.startAngle += offsetAngle;
                v.source.endAngle += offsetAngle;
            }

            if (v.target.index > f && v.target.index < s) {
                v.target.startAngle += offsetAngle;
                v.target.endAngle += offsetAngle;
            }

            if ((v.source.index === f || v.source.index === s) && (v.target.index === f || v.target.index === s)) {
                const tmp = v.source.index;
                v.source.index = v.target.index;
                v.target.index = tmp;
            }
            else if (v.source.index === f) {
                v.source.index = s;
            }
            else if (v.target.index === f) {
                v.target.index = s;
            }
            else if (v.source.index === s) {
                v.source.index = f;
            }
            else if (v.target.index === s) {
                v.target.index = f;
            }
        });

        // Swap array positions.
        const tmp = chords.groups[f]
        chords.groups[f] = chords.groups[s];
        chords.groups[s] = tmp;

        return chords;
    },

    swapGroups: (data, eventKey, chords, i, j) => {
        Diagram.swapGroupArcs(chords, i, j);
        Matrices.swapIndices(data.tourneys[eventKey].teams, i, j);
        return chords;
    },

    getCountryName: (data, eventKey, n) => {
        const team = data.tourneys[eventKey].teams[n];
        return data.countries[team.cId];
    },

    getPopulation: (data, eventKey, n) => {
        const team = data.tourneys[eventKey].teams[n];
        return team.p;
    },

    getGoalsFor: (data, eventKey, n) => {
        const team = data.tourneys[eventKey].teams[n];
        return team.gf;
    },

    getGoalsAgainst: (data, eventKey, n) => {
        const team = data.tourneys[eventKey].teams[n];
        return team.ga;
    },

    buildChords: ({ matrix, data, eventKey, sort, SORT_TYPES }) => {
        const chords = d3.chord()
            .padAngle(0.05)
            .call(null, matrix);

        switch (sort) {
            case SORT_TYPES.COUNTRY:
                return Sorter.sort(chords, 0, chords.groups.length - 1,
                    Diagram.getCountryName.bind(null, data, eventKey),
                    Diagram.swapGroups.bind(null, data, eventKey));
            case SORT_TYPES.GOALS:
                return Sorter.sort(chords, 0, chords.groups.length - 1,
                    Diagram.getGoalsFor.bind(null, data, eventKey),
                    Diagram.swapGroups.bind(null, data, eventKey));
            case SORT_TYPES.POPULATION:
                return Sorter.sort(chords, 0, chords.groups.length - 1,
                    Diagram.getPopulation.bind(null, data, eventKey),
                    Diagram.swapGroups.bind(null, data, eventKey));
        }



        return chords;
    },

    buildDimensions: () => {
        const svgW = d3.select("svg").attr("width");
        const svgH = (d3.select("svg").attr("height"));
        const arcT = 5;
        const outerR = Math.min(svgW, svgH) * 0.5 - 130;
        const innerR = outerR - arcT;

        return { svgW, svgH, arcT, outerR, innerR};
    },

    buildColorScheme: ({ scheme, len }) => {
        if (scheme === 1) {
            return d3.scaleLinear()
                .domain([0, len])
                .range(["#fff", "green"])
                .interpolate(d3.interpolateRgb);
        } else if (scheme === 2) {
            const colors = [
                "#ffffd9",
                "#edf8b1",
                "#c7e9b4",
                "#7fcdbb",
                "#41b6c4",
                "#1d91c0",
                "#225ea8",
                "#253494",
                "#081d58"
            ];

            return (i => colors[i % colors.length]);
        } else if (scheme === 3) {
            return d3.scaleLinear()
                .domain([0, len])
                .range(["red", "blue"])
                .interpolate(d3.interpolateRgb);
        } else if (scheme === 4) {
            return d3.scaleOrdinal(d3.schemeCategory10);
        }

        return d3.scaleOrdinal(d3.schemeCategory20);
    },

    buildRibbons: ({ container, color, chords, data, eventKey }) => {
        const dimensions = Diagram.buildDimensions();
        const ribbon =  d3.ribbon().radius(dimensions.innerR);

        container.append("g")
            .attr("class", "ribbons")
            .selectAll("path")
            .data(chords => chords)
            .enter().append("path")
                .attr("d", ribbon)
                .attr('data-round-id', d => d.game.rId)
                .style('fill', d => color(d.target.index))
                .style('stroke', d => d3.rgb(color(d.target.index)).darker())
                .classed("ribbon", true)
                .append("title")
                .text(function(d) {
                    const t1 = data.tourneys[eventKey].teams[d.source.index];
                    const t2 = data.tourneys[eventKey].teams[d.target.index];

                    const c1 = data.countries[t1.cId];
                    const c2 = data.countries[t2.cId];

                    let s1 = d.game.t1 === t1.tId ? d.game.s1 : d.game.s2;
                    let s2 = d.game.t2 === t2.tId ? d.game.s2 : d.game.s1;

                    if (d.game.sp1 !== null && d.game.sp2 !== null) {
                        s1 = d.game.t1 === t1.tId ? d.game.sp1 : d.game.sp2;
                        s2 = d.game.t2 === t2.tId ? d.game.sp2 : d.game.sp1;

                        s1 += " (Penalties)";
                        s2 += " (Penalties)";
                    }
                    else if (d.game.se1 !== null && d.game.se2 !== null) {
                        s1 = d.game.t1 === t1.tId ? d.game.se1 : d.game.se2;
                        s2 = d.game.t2 === t2.tId ? d.game.se2 : d.game.se1;

                        s1 += " (Extended time)";
                        s2 += " (Extended time)";
                    }

                    return `${c1}: ${s1}\n${c2}: ${s2}\n${data.rounds[d.game.rId]}`;
                });
    },

    buildArcs: ({ container, color, eventKey, data }) => {
        const dimensions = Diagram.buildDimensions();
        const arc = d3.arc().innerRadius(dimensions.innerR).outerRadius(dimensions.outerR)

        const group = container.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);

        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 - 91) + ")"
                + "translate(" + (dimensions.innerR + 26) + ")"
                + (d.angle > Math.PI ? "rotate(180)" : "");
            })
            .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
            .text(function(d) {
                const team = data.tourneys[eventKey].teams[d.index];
                let metric = '';

                // switch (sort) {
                //     case SORT_TYPES.GOALS:
                //         metric = `(${team.gf})`;
                //         break;
                //     // case SORT_TYPES.POPULATION:
                //     //     metric = `(${Number(team.p).toLocaleString()})`;
                //     //     break;
                // }

                return `${data.countries[team.cId]} ${metric}`;
            });
    },

    buildContainer: (chords) => {
        const svg = d3.select("svg");
        const dimensions = Diagram.buildDimensions();

        return svg.append("g")
            .attr("transform", `translate(${ dimensions.svgW / 2 },${ dimensions.svgH / 2 })`)
            .datum(chords);


    },
};

export default Diagram;