diff --git a/index.html b/index.html
index 88e3117..4fc5c9e 100644
--- a/index.html
+++ b/index.html
@@ -2,31 +2,6 @@
-
@@ -35,6 +10,7 @@ body {
+
@@ -74,8 +50,9 @@ body {
fix setState to not remove everything
1974 two germanies?
embiggen current event flag
- move styling out of index.html
add sort metric below team name
+ update ribbon hover
+ // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
better layout
better colors
webpack 2 / css modules?
diff --git a/js/diagram.js b/js/diagram.js
index e3b134a..60a5173 100644
--- a/js/diagram.js
+++ b/js/diagram.js
@@ -136,27 +136,21 @@ const Diagram = {
switch (sort) {
case SORT_TYPES.COUNTRY:
sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
- Diagram.getCountryName.bind(null, data, eventKey),
- Diagram.swapGroups.bind(null, data, eventKey));
+ Diagram.getCountryName.bind(null, data, eventKey),
+ Diagram.swapGroups.bind(null, data, eventKey));
break;
case SORT_TYPES.GOALS:
sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
- Diagram.getGoalsFor.bind(null, data, eventKey),
- Diagram.swapGroups.bind(null, data, eventKey));
+ Diagram.getGoalsFor.bind(null, data, eventKey),
+ Diagram.swapGroups.bind(null, data, eventKey));
break;
case SORT_TYPES.POPULATION:
sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
- Diagram.getPopulation.bind(null, data, eventKey),
- Diagram.swapGroups.bind(null, data, eventKey));
+ Diagram.getPopulation.bind(null, data, eventKey),
+ Diagram.swapGroups.bind(null, data, eventKey));
break;
}
- // let sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 10);
- // sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 8);
- // [ Romania, Belgium, Serbia, France, US, Mexico, Paraguay, Peru, Uruguay, Chile, Bolivia, Brazil, Argentina ]
- // PROBLEMS: 2-8, 2-10, 2-11
-
-
const arc = d3.arc()
.innerRadius(innerRadius)
.outerRadius(outerRadius);
@@ -182,9 +176,9 @@ const Diagram = {
const group = g.append("g")
.attr("class", "groups")
- .selectAll("g")
+ .selectAll("g")
.data(chords => chords.groups)
- .enter().append("g");
+ .enter().append("g");
group.append("path")
.style("fill", d => color(d.index))
@@ -193,9 +187,9 @@ const Diagram = {
g.append("g")
.attr("class", "ribbons")
- .selectAll("path")
+ .selectAll("path")
.data(function(chords) { return chords; })
- .enter().append("path")
+ .enter().append("path")
.attr("d", ribbon)
.attr("data-round-id", (d) => {
const t1 = data.tourneys[eventKey].teams[d.source.index];
@@ -219,33 +213,41 @@ const Diagram = {
const c2 = data.countries[t2.cId];
const game = data.tourneys[eventKey].games.find(v => {
- return (v.t1 === t1.tId || v.t1 === t2.tId) && (v.t2 === t1.tId || v.t2 === t2.tId);
- });
+ return (v.t1 === t1.tId || v.t1 === t2.tId) && (v.t2 === t1.tId || v.t2 === t2.tId);
+ });
- const e1 = game.se1 ? `(+${game.se1} in extended time)` : '';
- const e2 = game.se2 ? `(+${game.se2} in extended time)` : '';
+ const e1 = game.se1 ? `(+${game.se1} in extended time)` : '';
+ const e2 = game.se2 ? `(+${game.se2} in extended time)` : '';
- const p1 = game.sp1 ? `(+${game.sp1} in penalties)` : '';
- const p2 = game.sp2 ? `(+${game.sp2} in penalties)` : '';
+ const p1 = game.sp1 ? `(+${game.sp1} in penalties)` : '';
+ const p2 = game.sp2 ? `(+${game.sp2} in penalties)` : '';
- return `${c1}: ${game.s1} ${e1} ${p1}\n${c2}: ${game.s2} ${e2} ${p2}`;
- });
+ return `${c1}: ${game.s1} ${e1} ${p1}\n${c2}: ${game.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) + ")"
+ .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(" + (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 (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
-
+ })
+ .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
+ .text(function(d) {
const team = data.tourneys[eventKey].teams[d.index];
- const country = data.countries[team.cId];
- return data.countries[team.cId] + ' ' + team.p;
- });
+ 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}`;
+ });
},
};