Refining chord matrices.

index.html

@@ -14,13 +14,19 @@ body {
   stroke: #ddd;
 }
 
-.groups,
+.ribbon {
-.ribbons {
+  fill-opacity: 0.4;
-  fill-opacity: 0.8;
+  stroke-width: 1;
+  stroke-opacity: 0.1;
+}
+
+.ribbon:hover {
+    fill-opacity: 1;
+    stroke-opacity: 1;
 }
 
 </style>
-<svg width="1000" height="1000"></svg>
+<svg width="700" height="700"></svg>
 <script src="http://d3js.org/d3.v4.0.0-alpha.50.min.js"></script>
 <script src="http://d3js.org/d3-chord.v0.0.min.js"></script>
 <script>
@@ -36,7 +42,7 @@ const listener = (resolve, reject, { srcElement: req }) => {
     req.status === 200 ? resolve(req.responseText) : reject("busted");
 };
 
-const parseAndSet = (endpoints, result) => {
+const buildLookup = (endpoints, result) => {
     const lookup = {};
 
     result.map((v, i) => {
@@ -45,66 +51,79 @@ const parseAndSet = (endpoints, result) => {
         lookup[address] = json;
     });
 
-    return lookup;
+    // Team list is ~220 items; assign indices to only teams in this tournament.
-};
+    lookup.reducedTeams = lookup.games.reduce((acc, v) => {
+        if (acc[v.t1] === undefined) {
+            acc[v.t1] = Object.keys(acc).length;
+        }
 
-const buildMatrix = (games) => {
+        return acc;
-    const max = games.reduce((acc, v) => Math.max(acc, v.t1, v.t2), 1) + 1;
+    }, {});
 
-    const empty = Array.apply(null, Array(max));
+    return lookup;
+};
 
-    const result = empty.map(
+const buildChordMatrix = (games, reducedTeams) => {
-        () => empty.map(() => null)
+    // Create A x A array of nulls; null-null relationships are omitted.
-    );
+    const empty = Array.apply(null, Array(Object.keys(reducedTeams).length));
+    const result = empty.map(() => empty.map(() => null));
 
     games.forEach(v => {
-        if (v.rId < 77) {
+        // Use indexes from reduced lists to populate final matrix.
-            return;
+        const t1 = reducedTeams[v.t1];
-        }
+        const t2 = reducedTeams[v.t2];
 
-        result[v.t1][v.t2] = v.s1 + v.s1e + v.s1p;
+        result[t1][t2] = v.s1 + v.s1e + v.s1p;
-        result[v.t2][v.t1] = v.s2 + v.s2e + v.s2p;
+        result[t2][t1] = v.s2 + v.s2e + v.s2p;
     }, []);
 
     return result;
 };
 
-const buildMeta = (data) => {
+const buildMetaMatrix = (games, reducedTeams) => {
-    // console.warn(data)
+    // Identical structure of chord matrix but with { game, team }.
-    return data;
+    // (Was this a useful comment? I was considering deleting it. Ben 161017)
+    const empty = Array.apply(null, Array(Object.keys(reducedTeams).length));
+    const matrix = empty.map(() => empty.map(() => null));
+
+    games.forEach(g => {
+        const t1 = reducedTeams[g.t1];
+        const t2 = reducedTeams[g.t2];
+
+        matrix[t1][t2] = { game: g, team: g.t1 };
+        matrix[t2][t1] = { game: g, team: g.t2 };
+    }, []);
+
+    return matrix;
 };
 
-const endpoints = ['teams.json', 'rounds.json', 'games.json'];
+const teamNameFromIndex = (lookup, index) => {
+    for (let i in lookup.reducedTeams) {
+        if (lookup.reducedTeams[i] === index) {
+            return lookup.teams[i];
+        }
+    }
 
-const buildMain = (data) => {
+    return "Unknown";
-    const lookup = parseAndSet(endpoints, data);
-    const meta = buildMeta(lookup);
-    const matrix = buildMatrix(lookup.games)
-    foo(matrix)
 };
 
-Promise.all(endpoints.map(get)).then(buildMain);
+const endpoints = ['teams.json', 'rounds.json', 'games.json'];
 
-function foo(matrix2) {
+const main = (data) => {
-    const matrix = [
+    const lookup = buildLookup(endpoints, data);
-        [ null, 0, 2, 3, 0, 1],
+    const chordMatrix = buildChordMatrix(lookup.games, lookup.reducedTeams)
-        [ 1, null, 2, null, 1, 3 ],
+    const metaMatrix = buildMetaMatrix(lookup.games, lookup.reducedTeams)
-        [ 2, 3, null, 5, 0, 2 ],
-        [ 0, null, 1, null, 2, 3 ],
-        [ 2, 4, 2, 5, null, 5 ],
-        [ 4, 3, 9, 3, 6, null ],
-    ];
 
     const svg = d3.select("svg"),
         width = +svg.attr("width"),
         height = +svg.attr("height"),
         outerArcThickness = 5,
-        outerRadius = Math.min(width, height) * 0.5 - 40,
+        outerRadius = Math.min(width, height) * 0.5 - 100,
         innerRadius = outerRadius - outerArcThickness;
 
     const chord = d3.chord()
-        .padAngle(0.25)
+        .padAngle(0.05);
-        .sortSubgroups(d3.descending);
+
     const arc = d3.arc()
         .innerRadius(innerRadius)
         .outerRadius(outerRadius);
@@ -112,13 +131,22 @@ function foo(matrix2) {
     const ribbon = d3.ribbon()
         .radius(innerRadius);
 
-    const color = d3.scaleOrdinal(d3.schemeCategory10);
+    // const color = d3.scaleOrdinal(d3.schemeCategory20);
-    // d3.scaleOrdinal()
+    // const color = d3.scaleOrdinal(d3.schemeCategory10);
-    //     .range(["#f0f9e8", "#bae4bc", "#7bccc4", "#2b8cbe"]);
+    // 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(matrix));
+        .datum(chord(chordMatrix));
 
     const group = g.append("g")
         .attr("class", "groups")
@@ -128,26 +156,27 @@ function foo(matrix2) {
 
     group.append("path")
         .style("fill", function(d) { return color(d.index); })
-        // .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
+        .style("stroke", function(d) { return d3.rgb(color(d.index)).darker(); })
-        .attr("d", arc);
+        .attr("d", arc)
-
+
-    const groupTick = group.selectAll(".group-tick")
+    group.append("text")
-        .data(function(d) { return groupTicks(d, 1); })
+      .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
-      .enter().append("g")
+      .attr("dy", ".35em")
-        .attr("class", "group-tick")
+      .attr("transform", function(d) {
-        .attr("transform", function(d) { return "rotate(" + (d.angle * 180 / Math.PI - 90) + ") translate(" + outerRadius + ",0)"; });
+        return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")"
-
+            + "translate(" + (innerRadius + 26) + ")"
-    groupTick.append("line")
+            + (d.angle > Math.PI ? "rotate(180)" : "");
-        .attr("x2", 6);
+      })
-
+      .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
-    groupTick
+      .text(function(d) {
-      .filter(function(d) { return d.value % 3 === 0; })
+          // SORT BY GOALS SCORED
-      .append("text")
+          // SORT BY ALPHABETICAL
-        .attr("x", 8)
+          // SORT BY COUNTRY SIZE
-        .attr("dy", ".35em")
+          // SORT BY COUNTRY POPULATION
-        .attr("transform", function(d) { return d.angle > Math.PI ? "rotate(180) translate(-16)" : null; })
+          // COLOR BY CONTINENT
-        .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
+          // STRANGE EXTENDED TIME CHILE-BRAZIL - FIX BY HAND?
-        .text(function(d) { return d.value; });
+          return teamNameFromIndex(lookup, d.index);
+      });
 
     g.append("g")
         .attr("class", "ribbons")
@@ -156,16 +185,30 @@ function foo(matrix2) {
       .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(); });
+        .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];
 
-    // Returns an array of tick angles and values for a given group and step.
+            const g = meta1.game;
-    function groupTicks(d, step) {
+
-      const k = (d.endAngle - d.startAngle) / d.value;
+            const t1 = lookup.teams[g.t1];
-      return d3.range(0, d.value, step).map(function(value) {
+            const t2 = lookup.teams[g.t2];
-        return {value: value, angle: value * k + d.startAngle};
+
-      });
+            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}`;
+        });
+};
+
+//===== Entry point
+Promise.all(endpoints.map(get)).then(main);
 
 </script>
 
@@ -179,7 +222,8 @@ function foo(matrix2) {
     https://bost.ocks.org/mike/uberdata/
     http://bl.ocks.org/mbostock/1046712
     https://bl.ocks.org/mbostock/4062006
-    
+    http://projects.delimited.io/experiments/chord-transitions/demos/trade.html
+
     https://github.com/jokecamp/sportdb-build-scripts
     https://groups.google.com/forum/#!topic/opensport/593H1O7yIdE
     https://github.com/openfootball/datafile/blob/master/worldcup.rb

teams.hs

@@ -8,6 +8,23 @@ import           Data.ByteString.Lazy.Char8 as BL8
 import           Data.HashMap.Strict        as HM
 import           Prelude                    as P
 
+-- "id":7,
+-- "key":"gam",
+-- "title":"Gambia",
+-- "title2":null,
+-- "code":"GAM",
+-- "synonyms":null,
+-- "country_id":43,
+-- "city_id":null,
+-- "club":"f",
+-- "since":null,
+-- "address":null,
+-- "web":null,
+-- "assoc_id":null,
+-- "national":"f",
+-- "created_at":"2016-10-16 20:00:51.702726",
+-- "updated_at":"2016-10-16 20:00:51.702726"
+
 data Team = Team { _id :: Value, country :: Value } deriving (Show)
 
 instance ToJSON Team where