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

Removed two-way dependencies. Finalized state.

Browse Source
master
Ben Burlingham 9 years ago
parent dbb50a7db4
commit 9fa006f42b
3 changed files with 115 additions and 34 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. 44
      js/diagram.js
  2. 66
      js/main.js
  3. 39
      js/ui.js

44
js/diagram.js
Unescape View File

@ -94,33 +94,33 @@ const Diagram = {
return chords; return chords;
}, },
swapGroups: (data, eventIndex, chords, i, j) => { swapGroups: (data, eventKey, chords, i, j) => {
Diagram.swapGroupArcs(chords, i, j); Diagram.swapGroupArcs(chords, i, j);
Matrices.swapIndices(data.tourneys[eventIndex].teams, i, j); Matrices.swapIndices(data.tourneys[eventKey].teams, i, j);
return chords; return chords;
}, },
getCountryName: (data, eventIndex, n) => { getCountryName: (data, eventKey, n) => {
const team = data.tourneys[eventIndex].teams[n]; const team = data.tourneys[eventKey].teams[n];
return data.countries[team.cId]; return data.countries[team.cId];
}, },
getPopulation: (data, eventIndex, n) => { getPopulation: (data, eventKey, n) => {
const team = data.tourneys[eventIndex].teams[n]; const team = data.tourneys[eventKey].teams[n];
return team.p; return team.p;
}, },
getGoalsFor: (data, eventIndex, n) => { getGoalsFor: (data, eventKey, n) => {
const team = data.tourneys[eventIndex].teams[n]; const team = data.tourneys[eventKey].teams[n];
return team.ga; return team.ga;
}, },
getGoalsAgainst: (data, eventIndex, n) => { getGoalsAgainst: (data, eventKey, n) => {
const team = data.tourneys[eventIndex].teams[n]; const team = data.tourneys[eventKey].teams[n];
return team.gf; return team.gf;
}, },
build: (data, eventIndex, matrix) => { build: (data, eventKey, matrix) => {
const svg = d3.select("svg"), const svg = d3.select("svg"),
width = +svg.attr("width"), width = +svg.attr("width"),
height = +svg.attr("height"), height = +svg.attr("height"),
@ -132,14 +132,14 @@ const Diagram = {
.padAngle(0.05) .padAngle(0.05)
.call(null, matrix); .call(null, matrix);
const sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1, // const sortedChords = Sorter.sort(chords, 0, chords.groups.length - 1,
// Diagram.getCountryName.bind(null, data, eventIndex), // // Diagram.getCountryName.bind(null, data, eventKey),
// Diagram.getGoalsFor.bind(null, data, eventIndex), // // Diagram.getGoalsFor.bind(null, data, eventKey),
Diagram.getGoalsAgainst.bind(null, data, eventIndex), // Diagram.getGoalsAgainst.bind(null, data, eventKey),
// Diagram.getPopulation.bind(null, data, eventIndex), // // Diagram.getPopulation.bind(null, data, eventKey),
Diagram.swapGroups.bind(null, data, eventIndex)); // Diagram.swapGroups.bind(null, data, eventKey));
// const sortedChords = chords; const sortedChords = chords; // SORTED: "null"
// let sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 10); // let sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 10);
// sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 8); // sortedChords = Diagram.swapGroups(data, "1930", chords, 2, 8);
// [ Romania, Belgium, Serbia, France, US, Mexico, Paraguay, Peru, Uruguay, Chile, Bolivia, Brazil, Argentina ] // [ Romania, Belgium, Serbia, France, US, Mexico, Paraguay, Peru, Uruguay, Chile, Bolivia, Brazil, Argentina ]
@ -192,13 +192,13 @@ const Diagram = {
.attr("class", "ribbon") .attr("class", "ribbon")
.append("title") .append("title")
.text(function(d) { .text(function(d) {
const t1 = data.tourneys[eventIndex].teams[d.source.index]; const t1 = data.tourneys[eventKey].teams[d.source.index];
const t2 = data.tourneys[eventIndex].teams[d.target.index]; const t2 = data.tourneys[eventKey].teams[d.target.index];
const c1 = data.countries[t1.cId]; const c1 = data.countries[t1.cId];
const c2 = data.countries[t2.cId]; const c2 = data.countries[t2.cId];
const game = data.tourneys[eventIndex].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);
}); });
@ -223,7 +223,7 @@ const Diagram = {
.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 // STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
const team = data.tourneys[eventIndex].teams[d.index]; const team = data.tourneys[eventKey].teams[d.index];
const country = data.countries[team.cId]; const country = data.countries[team.cId];
return data.countries[team.cId] + ' ' + team.p; return data.countries[team.cId] + ' ' + team.p;
}); });

66
js/main.js
Unescape View File

@ -10,22 +10,76 @@ const fetch = (url) => new Promise((resolve, reject) => {
}); });
const main = { const main = {
generateDiagram: (eventKey) => { changeEvent: (evt) => {
const matrix = Matrices.buildMatrix(main.json, eventKey); let target = evt.target;
Diagram.clear(); while (target !== document.body && target.getAttribute(UI.DATA.EVENT) === null) {
Diagram.build(main.json, eventKey, matrix); target = target.parentNode;
}
main.setState({ eventKey: target.getAttribute(UI.DATA.EVENT) });
main.updateUI();
},
changeRound: (evt) => {
main.setState({ round: evt.year });
main.updateUI();
},
changeSort: (evt) => {
main.setState({ sort: evt.year });
main.updateUI();
}, },
generateUI: () => { generateUI: () => {
UI.buildEventsPane(); UI.buildEventsPane(main.changeEvent);
// UI.buildSortPane(main.changeSort);
// UI.buildSortPane(main.changeRound);
},
updateUI: () => {
const state = main.getState();
UI.updateEventsPane(state.eventKey);
// UI.updateRounds(state);
// UI.updateSort(state);
const matrix = Matrices.buildMatrix(main.json, state.eventKey);
Diagram.clear();
Diagram.build(main.json, state.eventKey, matrix);
}, },
initJSON: (strData) => { initJSON: (strData) => {
main.json = JSON.parse(strData); main.json = JSON.parse(strData);
}, },
getState: () => {
const params = window.location.href.split('?')[1];
if (!params) {
return {};
}
return params.split('&').reduce((acc, v) => {
const tmp = v.split('=');
acc[tmp[0]] = tmp[1];
return acc;
}, {});
},
setState: (next) => {
const prev = main.getState();
const url = window.location.href.split('?')[0];
const eventKey = next.eventKey || prev.eventKey;
const round = next.round || prev.round || null;
const sort = next.sort || prev.sort || null;
history.pushState(null, null, `${url}?eventKey=${eventKey}&sort=${sort}&round=${round}`);
},
} }
fetch('worldcup.json') fetch('worldcup.json')
.then(main.initJSON) .then(main.initJSON)
.then(main.setState.call(null, { sort: null, eventKey: "1930" }))
.then(main.generateUI) .then(main.generateUI)
.then(main.generateDiagram.bind(null, 1930)); .then(main.updateUI);

39
js/ui.js
Unescape View File

@ -1,5 +1,31 @@
const UI = { const UI = {
buildEventsPane: () => { CLASSNAMES: {
ITEM: 'event-item',
YEAR: 'event-year',
FLAG: 'event-flag',
LOCATION: 'event-location',
},
DATA: {
EVENT: 'data-event-key',
ROUND: 'data-round-key',
SORT: 'data-sort-key',
},
updateEventsPane: (eventKey) => {
const events = document.querySelectorAll(`.${UI.CLASSNAMES.ITEM}`);
events.forEach(node => {
const classes = node.className.split(' ');
classes.splice(1, classes.indexOf('active'));
node.className = classes.join(' ');
});
const activeEventNode = document.querySelector(`[${UI.DATA.EVENT}="${eventKey}"`);
activeEventNode.className += ' active';
},
buildEventsPane: (onClick) => {
const eventsList = [ const eventsList = [
{ year: 1930, location: "Uruguay", icon: "uy" }, { year: 1930, location: "Uruguay", icon: "uy" },
{ year: 1934, location: "Italy", icon: "it" }, { year: 1934, location: "Italy", icon: "it" },
@ -35,12 +61,13 @@ const UI = {
const flag = document.createElement('div'); const flag = document.createElement('div');
const flagIcon = document.createElement('div'); const flagIcon = document.createElement('div');
item.className = "event-item"; item.className = UI.CLASSNAMES.ITEM;
year.className = "event-year"; year.className = UI.CLASSNAMES.YEAR;
location.className = "event-location"; location.className = UI.CLASSNAMES.LOCATION;
flag.className = "event-flag"; flag.className = UI.CLASSNAMES.FLAG;
item.addEventListener('click', main.generateDiagram.bind(null, evt.year)); item.addEventListener('click', onClick);
item.setAttribute('data-event-key', evt.year);
year.innerHTML = evt.year; year.innerHTML = evt.year;
location.innerHTML = evt.location; location.innerHTML = evt.location;

Write Preview
Loading…
Cancel
Save