+
Lessons learned
+ scaleOrdinal vs scaleLinear (only 2 colors!) vs interpolateCool vs d3.schemeColor20c
+ ribbon source vs index (change fill them differently)
+
+
https://github.com/d3/d3-scale-chromatic
+
+ 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
+ https://openfootball.github.io/questions.html
- return "Unknown";
-};
-
-const endpoints = ['teams.json', 'rounds.json', 'games.json'];
-
-const main = (data) => {
- const lookup = buildLookup(endpoints, data);
- const chordMatrix = buildChordMatrix(lookup.games, lookup.reducedTeams)
- const metaMatrix = buildMetaMatrix(lookup.games, lookup.reducedTeams)
-
- const svg = d3.select("svg"),
- width = +svg.attr("width"),
- height = +svg.attr("height"),
- outerArcThickness = 5,
- outerRadius = Math.min(width, height) * 0.5 - 100,
- innerRadius = outerRadius - outerArcThickness;
-
- const chord = d3.chord()
- .padAngle(0.05);
-
- 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(chord(chordMatrix));
-
- const group = g.append("g")
- .attr("class", "groups")
- .selectAll("g")
- .data(function(chords) { return chords.groups; })
- .enter().append("g");
-
- group.append("path")
- .style("fill", function(d) { return color(d.index); })
- .style("stroke", function(d) { return 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 - 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
- // SORT BY COUNTRY POPULATION
- // COLOR BY CONTINENT
- // STRANGE EXTENDED TIME CHILE-BRAZIL - FIX BY HAND?
- return teamNameFromIndex(lookup, d.index);
- });
-
- 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}`;
- });
-};
-
-//===== Entry point
-Promise.all(endpoints.map(get)).then(main);
-
-
-
-
-
Lessons learned
- scaleOrdinal vs scaleLinear (only 2 colors!) vs interpolateCool vs d3.schemeColor20c
- ribbon source vs index (change fill them differently)
-
-
https://github.com/d3/d3-scale-chromatic
-
- 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
- https://openfootball.github.io/questions.html
-
-
TODO
- add team name to each arc
- build dataset
- tweet it!
-
+
TODO
+ add team name to each arc
+ build dataset
+ tweet it!
+