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

Updates to tourney pane.

Browse Source
master
Ben Burlingham 9 years ago
parent fd166a85df
commit 57510aebec
6 changed files with 12 additions and 56 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. 14
      css/style.css
  2. 17
      css/tourney.scss
  3. 9
      index.html
  4. 14
      js/bundle.js
  5. 2
      js/diagram.js
  6. 12
      js/ui.js

14
css/style.css
Unescape View File

@ -56,20 +56,8 @@ body {
position: absolute;
top: 0; }
.tourney-link {
border: 1px solid #d5d5d5;
display: block;
font-size: 0;
margin-bottom: 20px;
padding: 2px 0;
text-align: center;
width: 200px; }
.tourney-link:hover {
background: #777; }
.tourney-image {
height: 260px;
width: 195px; }
width: 200px; }
.tourney-country {
color: #777;

17
css/tourney.scss
Unescape View File

@ -4,23 +4,8 @@
top: 0;
}
.tourney-link {
border: 1px solid #d5d5d5;
display: block;
font-size: 0;
margin-bottom: 20px;
padding: 2px 0;
text-align: center;
width: 200px;
&:hover {
background: #777;
}
}
.tourney-image {
height: 260px;
width: 195px;
width: 200px;
}
.tourney-country {

9
index.html
Unescape View File

@ -23,16 +23,16 @@
<br><br>
Visualization should invite interaction to create and answer questions such as:
<ul>
<li>How many World Cups has Iran competed in?</li>
<li>How many times has Iran competed in a World Cup?</li>
<li>Which teams played the in final in 1986?</li>
<li>Which team scored the most goals in any World Cup?</li>
<li>Are there any teams that have been in every world cup?</li>
<li>Why does the 1950 World Cup have 6 final games (and what is the Maracanazo)?</li>
</ul>
</blockquote>
<p>
Data source: <a href="http://openfootball.github.io/">OpenFootball</a>. There are a few errors.
Transform, and reduce scripts built in Haskell, publically available in <a href="http://gogs.benburlingham.com/ben.burlingham/d3-worldcup">the source code</a>.
Transform and reduce scripts are built in Haskell, publically available in <a href="http://gogs.benburlingham.com/ben.burlingham/d3-worldcup">the source code</a>.
</p>
<p>
@ -55,11 +55,10 @@
<div class="notes">
<h5>TODO</h5>
1974 two germanies?
update ribbon hover
// STRANGE EXTENDED TIME CHILE-BRAZIL (when? not 1930) - FIX BY HAND? IS BECAUE se1 IS SCORE __GOING INTO__ EXTENDED TIME
No finals in 1954 or 1962?
Big holes in 1950?
1954 - teams already played eachother (uh oh)
fix buoy viz

14
js/bundle.js
Unescape View File

@ -493,7 +493,7 @@
var p1 = game.sp1 ? '(+' + game.sp1 + ' in penalties)' : '';
var 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 + '\n' + data.rounds[game.rId];
});
group.append("text").each(function (d) {
@ -584,7 +584,6 @@
var UI = {
CLASSNAMES: {
TOURNEY: {
LINK: 'tourney-link',
IMAGE: 'tourney-image',
COUNTRY: 'tourney-country',
YEAR: 'tourney-year'
@ -696,8 +695,6 @@
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.IMAGE).src = 'res/' + ek + '.jpg';
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.LINK).href = href;
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.COUNTRY).innerHTML = tourneyList[ek];
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.COUNTRY).href = href;
@ -760,14 +757,10 @@
},
buildTourneyPane: function buildTourneyPane() {
var link = document.createElement('a');
var img = document.createElement('img');
var country = document.createElement('a');
var year = document.createElement('a');
link.className = UI.CLASSNAMES.TOURNEY.LINK;
link.target = '_blank';
img.className = UI.CLASSNAMES.TOURNEY.IMAGE;
country.className = UI.CLASSNAMES.TOURNEY.COUNTRY;
@ -778,9 +771,7 @@
var tourneyPane = document.querySelector('.tourney');
link.appendChild(img);
tourneyPane.appendChild(link);
tourneyPane.appendChild(img);
tourneyPane.appendChild(year);
tourneyPane.appendChild(country);
},
@ -953,6 +944,7 @@
return UI.ROUND_TYPES.SEMIFINAL;
case 'Final':
case 'Finals':
case 'Final Round':
return UI.ROUND_TYPES.FINAL;
}

2
js/diagram.js
Unescape View File

@ -229,7 +229,7 @@ const Diagram = {
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}\n${data.rounds[game.rId]}`;
});
group.append("text")

12
js/ui.js
Unescape View File

@ -1,7 +1,6 @@
const UI = {
CLASSNAMES: {
TOURNEY: {
LINK: 'tourney-link',
IMAGE: 'tourney-image',
COUNTRY: 'tourney-country',
YEAR: 'tourney-year',
@ -113,8 +112,6 @@ const UI = {
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.IMAGE}`).src = `res/${ek}.jpg`;
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.LINK}`).href = href;
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).innerHTML = tourneyList[ek];
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).href = href;
@ -179,14 +176,10 @@ const UI = {
},
buildTourneyPane: () => {
const link = document.createElement('a');
const img = document.createElement('img');
const country = document.createElement('a');
const year = document.createElement('a');
link.className = UI.CLASSNAMES.TOURNEY.LINK;
link.target = '_blank';
img.className = UI.CLASSNAMES.TOURNEY.IMAGE;
country.className = UI.CLASSNAMES.TOURNEY.COUNTRY;
@ -197,9 +190,7 @@ const UI = {
const tourneyPane = document.querySelector('.tourney');
link.appendChild(img);
tourneyPane.appendChild(link);
tourneyPane.appendChild(img);
tourneyPane.appendChild(year);
tourneyPane.appendChild(country);
},
@ -405,6 +396,7 @@ const UI = {
return UI.ROUND_TYPES.SEMIFINAL;
case 'Final':
case 'Finals':
case 'Final Round':
return UI.ROUND_TYPES.FINAL;
}

Write Preview
Loading…
Cancel
Save