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
Unified 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> <html>
<head> <head>
<meta charset="utf-8"> <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.v4.0.0-alpha.50.min.js"></script>
<script src="http://d3js.org/d3-chord.v0.0.min.js"></script> <script src="http://d3js.org/d3-chord.v0.0.min.js"></script>
<script src='js/matrices.js'></script> <script src='js/matrices.js'></script>
@ -35,6 +10,7 @@ body {
<script src='js/sorter.js'></script> <script src='js/sorter.js'></script>
<script src='js/main.js'></script> <script src='js/main.js'></script>
<link rel="stylesheet" href="res/flags.min.css"> <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/options.css">
<link rel="stylesheet" href="res/events.css"> <link rel="stylesheet" href="res/events.css">
<link rel="stylesheet" href="res/diagram.css"> <link rel="stylesheet" href="res/diagram.css">
@ -74,8 +50,9 @@ body {
fix setState to not remove everything fix setState to not remove everything
1974 two germanies? 1974 two germanies?
embiggen current event flag embiggen current event flag
move styling out of index.html
add sort metric below team name 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 layout
better colors better colors
webpack 2 / css modules? webpack 2 / css modules?

74
js/diagram.js
Unescape View File

@ -136,27 +136,21 @@ const Diagram = {
switch (sort) { switch (sort) {
case SORT_TYPES.COUNTRY: case SORT_TYPES.COUNTRY:
sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1, sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
Diagram.getCountryName.bind(null, data, eventKey), Diagram.getCountryName.bind(null, data, eventKey),
Diagram.swapGroups.bind(null, data, eventKey)); Diagram.swapGroups.bind(null, data, eventKey));
break; break;
case SORT_TYPES.GOALS: case SORT_TYPES.GOALS:
sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1, sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
Diagram.getGoalsFor.bind(null, data, eventKey), Diagram.getGoalsFor.bind(null, data, eventKey),
Diagram.swapGroups.bind(null, data, eventKey)); Diagram.swapGroups.bind(null, data, eventKey));
break; break;
case SORT_TYPES.POPULATION: case SORT_TYPES.POPULATION:
sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1, sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
Diagram.getPopulation.bind(null, data, eventKey), Diagram.getPopulation.bind(null, data, eventKey),
Diagram.swapGroups.bind(null, data, eventKey)); Diagram.swapGroups.bind(null, data, eventKey));
break; 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() const arc = d3.arc()
.innerRadius(innerRadius) .innerRadius(innerRadius)
.outerRadius(outerRadius); .outerRadius(outerRadius);
@ -182,9 +176,9 @@ const Diagram = {
const group = g.append("g") const group = g.append("g")
.attr("class", "groups") .attr("class", "groups")
.selectAll("g") .selectAll("g")
.data(chords => chords.groups) .data(chords => chords.groups)
.enter().append("g"); .enter().append("g");
group.append("path") group.append("path")
.style("fill", d => color(d.index)) .style("fill", d => color(d.index))
@ -193,9 +187,9 @@ const Diagram = {
g.append("g") g.append("g")
.attr("class", "ribbons") .attr("class", "ribbons")
.selectAll("path") .selectAll("path")
.data(function(chords) { return chords; }) .data(function(chords) { return chords; })
.enter().append("path") .enter().append("path")
.attr("d", ribbon) .attr("d", ribbon)
.attr("data-round-id", (d) => { .attr("data-round-id", (d) => {
const t1 = data.tourneys[eventKey].teams[d.source.index]; const t1 = data.tourneys[eventKey].teams[d.source.index];
@ -219,33 +213,41 @@ const Diagram = {
const c2 = data.countries[t2.cId]; const c2 = data.countries[t2.cId];
const game = data.tourneys[eventKey].games.find(v => { 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 e1 = game.se1 ? `(+${game.se1} in extended time)` : '';
const e2 = game.se2 ? `(+${game.se2} in extended time)` : ''; const e2 = game.se2 ? `(+${game.se2} in extended time)` : '';
const p1 = game.sp1 ? `(+${game.sp1} in penalties)` : ''; const p1 = game.sp1 ? `(+${game.sp1} in penalties)` : '';
const p2 = game.sp2 ? `(+${game.sp2} 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") group.append("text")
.each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; }) .each(function(d) { d.angle = (d.startAngle + d.endAngle) / 2; })
.attr("dy", ".35em") .attr("dy", ".35em")
.attr("transform", function(d) { .attr("transform", function(d) {
return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")" return "rotate(" + (d.angle * 180 / Math.PI - 91) + ")"
+ "translate(" + (innerRadius + 26) + ")" + "translate(" + (innerRadius + 26) + ")"
+ (d.angle > Math.PI ? "rotate(180)" : ""); + (d.angle > Math.PI ? "rotate(180)" : "");
}) })
.style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; }) .style("text-anchor", function(d) { return d.angle > Math.PI ? "end" : null; })
.text(function(d) { .text(function(d) {
// STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
const team = data.tourneys[eventKey].teams[d.index]; const team = data.tourneys[eventKey].teams[d.index];
const country = data.countries[team.cId]; let metric = '';
return data.countries[team.cId] + ' ' + team.p;
}); 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