diff --git a/js/diagram.js b/js/diagram.js
index 94c8472..f2b5285 100644
--- a/js/diagram.js
+++ b/js/diagram.js
@@ -1,5 +1,8 @@
const Diagram = {
- build: (eventIndex, data, metaMatrix, chordMatrix) => {
+ // clear: () => d3.select('svg').remove(),
+ clear: () => d3.select('svg').selectAll("*").remove(),
+
+ build: (data, eventIndex, metaMatrix, chordMatrix) => {
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
@@ -86,7 +89,6 @@ const Diagram = {
// 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? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
// console.info(metaMatrix[d.index])
diff --git a/js/main.js b/js/main.js
index b33e913..3fccd94 100644
--- a/js/main.js
+++ b/js/main.js
@@ -9,11 +9,24 @@ const fetch = (url) => new Promise((resolve, reject) => {
req.send();
});
-const main = function(strData) {
- const json = JSON.parse(strData);
- const metaMatrix = Matrices.buildMetaMatrix(json, "1930");
- const chordMatrix = Matrices.buildChordMatrix(json, "1930");
- Diagram.build("1930", json, metaMatrix, chordMatrix);
+const main = {
+ generateDiagram: (eventKey) => {
+ const metaMatrix = Matrices.buildMetaMatrix(main.json, eventKey);
+ const chordMatrix = Matrices.buildChordMatrix(main.json, eventKey);
+ Diagram.clear();
+ Diagram.build(main.json, eventKey, metaMatrix, chordMatrix);
+ },
+
+ generateUI: () => {
+ UI.buildEventsPane();
+ },
+
+ initJSON: (strData) => {
+ main.json = JSON.parse(strData);
+ },
}
-fetch('worldcup.json').then(main);
+fetch('worldcup.json')
+ .then(main.initJSON)
+ .then(main.generateUI)
+ .then(main.generateDiagram.bind(null, 1930));
diff --git a/js/ui.js b/js/ui.js
index 88fb315..70d3d61 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -1,2 +1,57 @@
const UI = {
+ buildEventsPane: () => {
+ const eventsList = [
+ { year: 1930, location: "Uruguay", icon: "uy" },
+ { year: 1934, location: "Italy", icon: "it" },
+ { year: 1938, location: "France", icon: "fr" },
+ { year: 1954, location: "Switzerland", icon: "ch" },
+ { year: 1958, location: "Sweden", icon: "se" },
+ { year: 1962, location: "Chile", icon: "cl" },
+ { year: 1966, location: "England", icon: "gb" },
+ { year: 1970, location: "Mexico", icon: "mx" },
+ { year: 1974, location: "West Germany", icon: "de" },
+ { year: 1978, location: "Argentina", icon: "ar" },
+ { year: 1982, location: "Spain", icon: "es" },
+ { year: 1986, location: "Mexico", icon: "mx" },
+ { year: 1990, location: "Italy", icon: "it" },
+ { year: 1994, location: "USA", icon: "us" },
+ { year: 1998, location: "France", icon: "fr" },
+ { year: 2002, location: "Japan / South Korea", icon: "jp" },
+ { year: 2006, location: "Germany", icon: "de" },
+ { year: 2010, location: "Johannesburg", icon: "za" },
+ { year: 2014, location: "Brazil", icon: "br" },
+ ];
+
+ const eventsDiv = document.querySelector('.events');
+
+ while (eventsDiv.hasChildNodes()) {
+ eventsDiv.firstChild.remove();
+ }
+
+ eventsList.forEach((evt) => {
+ const item = document.createElement('div');
+ const year = document.createElement('div');
+ const location = document.createElement('div');
+ const flag = document.createElement('div');
+ const flagIcon = document.createElement('div');
+
+ item.className = "event-item";
+ year.className = "event-year";
+ location.className = "event-location";
+ flag.className = "event-flag";
+
+ item.addEventListener('click', main.generateDiagram.bind(null, evt.year));
+
+ year.innerHTML = evt.year;
+ location.innerHTML = evt.location;
+ flagIcon.className = `flag-icon flag-icon-${evt.icon}`;
+
+ flag.appendChild(flagIcon);
+ item.appendChild(flag);
+ item.appendChild(year);
+ item.appendChild(location);
+
+ eventsDiv.appendChild(item);
+ });
+ },
};
diff --git a/res/options.css b/res/options.css
index 2a3c24e..2d83c48 100644
--- a/res/options.css
+++ b/res/options.css
@@ -1,4 +1,5 @@
.options {
+ color: white;
left: 900px;
height: 100%;
min-width: 200px;