ben.burlingham
/
d3-worldcup
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor bugfixes and indentation.

Browse Source
master
Ben Burlingham 9 years ago
parent c3dddfd7df
commit a1c5490082
2 changed files with 41 additions and 62 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 29
      index.html
  2. 74
      js/diagram.js

29
index.html
Unescape View File

@ -2,31 +2,6 @@
<html>
<head>
<meta charset="utf-8">
<style>
* {
border-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
padding: 20px;
}
.notes {
font-size:14px;
}
.visualization {
height: 700px;
margin: 0 auto;
position: relative;
width: 1100px;
}
</style>
<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 src='js/matrices.js'></script>
@ -35,6 +10,7 @@ body {
<script src='js/sorter.js'></script>
<script src='js/main.js'></script>
<link rel="stylesheet" href="res/flags.min.css">
<link rel="stylesheet" href="res/reset.css">
<link rel="stylesheet" href="res/options.css">
<link rel="stylesheet" href="res/events.css">
<link rel="stylesheet" href="res/diagram.css">
@ -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?

74
js/diagram.js
Unescape View File

@ -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}`;
});
},
};

Write Preview
Loading…
Cancel
Save