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

Event button listeners added.

Browse Source
master
Ben Burlingham 9 years ago
parent aefdade7ea
commit b568e39a6c
5 changed files with 81 additions and 105 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. 99
      index.html
  2. 6
      js/diagram.js
  3. 25
      js/main.js
  4. 55
      js/ui.js
  5. 1
      res/options.css

99
index.html
Unescape View File

@ -31,6 +31,7 @@ body {
<script src="http://d3js.org/d3-chord.v0.0.min.js"></script>
<script src='js/matrices.js'></script>
<script src='js/diagram.js'></script>
<script src='js/ui.js'></script>
<script src='js/main.js'></script>
<link rel="stylesheet" href="res/flags.min.css">
<link rel="stylesheet" href="res/options.css">
@ -40,103 +41,7 @@ body {
<body>
<div class="visualization">
<div class="events">
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-uy"></div></div>
<div class="event-year">1930</div>
<div class="event-location">Uruguay</div>
</div>
<div class="event-item active">
<div class="event-flag"><div class="flag-icon flag-icon-it"></div></div>
<div class="event-year">1934</div>
<div class="event-location">Italy</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-fr"></div></div>
<div class="event-year">1938</div>
<div class="event-location">France</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-ch"></div></div>
<div class="event-year">1954</div>
<div class="event-location">Switzerland</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-se"></div></div>
<div class="event-year">1958</div>
<div class="event-location">Sweden</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-cl"></div></div>
<div class="event-year">1962</div>
<div class="event-location">Chile</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-gb"></div></div>
<div class="event-year">1966</div>
<div class="event-location">England</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-mx"></div></div>
<div class="event-year">1970</div>
<div class="event-location">Mexico</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-de"></div></div>
<div class="event-year">1974</div>
<div class="event-location">West Germany</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-ar"></div></div>
<div class="event-year">1978</div>
<div class="event-location">Argentina</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-es"></div></div>
<div class="event-year">1982</div>
<div class="event-location">Spain</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-mx"></div></div>
<div class="event-year">1986</div>
<div class="event-location">Mexico</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-it"></div></div>
<div class="event-year">1990</div>
<div class="event-location">Italy</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-us"></div></div>
<div class="event-year">1994</div>
<div class="event-location">USA</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-fr"></div></div>
<div class="event-year">1998</div>
<div class="event-location">France</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-jp"></div></div>
<div class="event-year">2002</div>
<div class="event-location">Japan / South Korea</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-de"></div></div>
<div class="event-year">2006</div>
<div class="event-location">Germany</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-za"></div></div>
<div class="event-year">2010</div>
<div class="event-location">Johannesburg</div>
</div>
<div class="event-item">
<div class="event-flag"><div class="flag-icon flag-icon-br"></div></div>
<div class="event-year">2014</div>
<div class="event-location">Brazil</div>
</div>
</div>
<div class="events"></div>
<div class="options">
<div class="option-item inactive">

6
js/diagram.js
Unescape View File

@ -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])

25
js/main.js
Unescape View File

@ -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));

55
js/ui.js
Unescape View File

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

1
res/options.css
Unescape View File

@ -1,4 +1,5 @@
.options {
color: white;
left: 900px;
height: 100%;
min-width: 200px;

Write Preview
Loading…
Cancel
Save