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

Adding core UI decorators.

Browse Source
master
Ben Burlingham 9 years ago
parent 521e83deff
commit fd166a85df
5 changed files with 78 additions and 26 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. 12
      css/style.css
  2. 12
      css/tourney.scss
  3. 52
      index.html
  4. 14
      js/bundle.js
  5. 14
      js/ui.js

12
css/style.css
Unescape View File

@ -73,13 +73,21 @@ body {
.tourney-country { .tourney-country {
color: #777; color: #777;
display: block;
font-size: 20px; font-size: 20px;
line-height: 40px; } line-height: 40px;
text-decoration: none; }
.tourney-country:hover {
color: #000; }
.tourney-year { .tourney-year {
color: #777; color: #777;
display: block;
font-size: 40px; font-size: 40px;
line-height: 40px; } line-height: 40px;
text-decoration: none; }
.tourney-year:hover {
color: #000; }
.diagram { .diagram {
font-size: 10px; font-size: 10px;
margin: 0 auto; margin: 0 auto;

12
css/tourney.scss
Unescape View File

@ -25,12 +25,24 @@
.tourney-country { .tourney-country {
color: #777; color: #777;
display: block;
font-size: 20px; font-size: 20px;
line-height: 40px; line-height: 40px;
text-decoration: none;
&:hover {
color: #000;
}
} }
.tourney-year { .tourney-year {
color: #777; color: #777;
display: block;
font-size: 40px; font-size: 40px;
line-height: 40px; line-height: 40px;
text-decoration: none;
&:hover {
color: #000;
}
} }

52
index.html
Unescape View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<script type="text/javascript" src='../core/js/ui.js'></script>
<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/bundle.js'></script> <script src='js/bundle.js'></script>
@ -10,6 +11,36 @@
</head> </head>
<body> <body>
<h1>World Cup Matches</h1>
<h2>Chord diagram for all World Cup matches from 1930 to 2014</h2>
<hr>
<h3>Project Goal</h3>
<blockquote>
Explore D3's chord diagrams using World Cup match data. Use Haskell to build JSON parsers.
<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>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>
</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>.
</p>
<p>
This visualization is created using D3 and Three.js libraries.
</p>
<hr>
<div class="visualization"> <div class="visualization">
<div class="tourney"></div> <div class="tourney"></div>
<div class="events"></div> <div class="events"></div>
@ -23,30 +54,15 @@
</div> </div>
<div class="notes"> <div class="notes">
<h5>Lessons learned</h5>
scaleOrdinal vs scaleLinear (only 2 colors!) vs interpolateCool vs d3.schemeColor20c<br>
ribbon source vs index (change fill them differently)
<a href="https://github.com/d3/d3-scale-chromatic">https://github.com/d3/d3-scale-chromatic</a>
https://bost.ocks.org/mike/uberdata/
http://bl.ocks.org/mbostock/1046712
https://bl.ocks.org/mbostock/4062006
http://projects.delimited.io/experiments/chord-transitions/demos/trade.html
https://github.com/jokecamp/sportdb-build-scripts
https://groups.google.com/forum/#!topic/opensport/593H1O7yIdE
https://github.com/openfootball/datafile/blob/master/worldcup.rb
https://openfootball.github.io/questions.html
<h5>TODO</h5> <h5>TODO</h5>
1974 two germanies? 1974 two germanies?
update ribbon hover update ribbon hover
// 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
No finals in 1954 or 1962? No finals in 1954 or 1962?
Big holes in 1950?
better highlight clickable poster fix buoy viz
image edit posters
tweet it! tweet it!
</div> </div>

14
js/bundle.js
Unescape View File

@ -690,13 +690,19 @@
}; };
var ek = tourneyList[eventKey] === undefined ? null : eventKey; var ek = tourneyList[eventKey] === undefined ? null : eventKey;
var href = 'https://en.wikipedia.org/wiki/' + ek + '_FIFA_World_Cup';
var tourneyPane = document.querySelector('.tourney'); var tourneyPane = document.querySelector('.tourney');
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.IMAGE).src = 'res/' + ek + '.jpg'; tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.IMAGE).src = 'res/' + ek + '.jpg';
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.LINK).href = 'https://en.wikipedia.org/wiki/' + ek + '_FIFA_World_Cup';
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.LINK).href = href;
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.COUNTRY).innerHTML = tourneyList[ek]; tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.COUNTRY).innerHTML = tourneyList[ek];
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.COUNTRY).href = href;
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.YEAR).innerHTML = ek; tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.YEAR).innerHTML = ek;
tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.YEAR).href = href;
}, },
updateEventsPane: function updateEventsPane(eventKey) { updateEventsPane: function updateEventsPane(eventKey) {
@ -756,8 +762,8 @@
buildTourneyPane: function buildTourneyPane() { buildTourneyPane: function buildTourneyPane() {
var link = document.createElement('a'); var link = document.createElement('a');
var img = document.createElement('img'); var img = document.createElement('img');
var country = document.createElement('div'); var country = document.createElement('a');
var year = document.createElement('year'); var year = document.createElement('a');
link.className = UI.CLASSNAMES.TOURNEY.LINK; link.className = UI.CLASSNAMES.TOURNEY.LINK;
link.target = '_blank'; link.target = '_blank';
@ -765,8 +771,10 @@
img.className = UI.CLASSNAMES.TOURNEY.IMAGE; img.className = UI.CLASSNAMES.TOURNEY.IMAGE;
country.className = UI.CLASSNAMES.TOURNEY.COUNTRY; country.className = UI.CLASSNAMES.TOURNEY.COUNTRY;
country.target = '_blank';
year.className = UI.CLASSNAMES.TOURNEY.YEAR; year.className = UI.CLASSNAMES.TOURNEY.YEAR;
year.target = '_blank';
var tourneyPane = document.querySelector('.tourney'); var tourneyPane = document.querySelector('.tourney');

14
js/ui.js
Unescape View File

@ -107,13 +107,19 @@ const UI = {
}; };
const ek = (tourneyList[eventKey] === undefined ? null : eventKey); const ek = (tourneyList[eventKey] === undefined ? null : eventKey);
const href = `https://en.wikipedia.org/wiki/${ek}_FIFA_World_Cup`;
const tourneyPane = document.querySelector('.tourney'); const tourneyPane = document.querySelector('.tourney');
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.IMAGE}`).src = `res/${ek}.jpg`; tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.IMAGE}`).src = `res/${ek}.jpg`;
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.LINK}`).href = `https://en.wikipedia.org/wiki/${ek}_FIFA_World_Cup`;
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.LINK}`).href = href;
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).innerHTML = tourneyList[ek]; tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).innerHTML = tourneyList[ek];
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.COUNTRY}`).href = href;
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).innerHTML = ek; tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).innerHTML = ek;
tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).href = href;
}, },
updateEventsPane: (eventKey) => { updateEventsPane: (eventKey) => {
@ -175,8 +181,8 @@ const UI = {
buildTourneyPane: () => { buildTourneyPane: () => {
const link = document.createElement('a'); const link = document.createElement('a');
const img = document.createElement('img'); const img = document.createElement('img');
const country = document.createElement('div'); const country = document.createElement('a');
const year = document.createElement('year'); const year = document.createElement('a');
link.className = UI.CLASSNAMES.TOURNEY.LINK; link.className = UI.CLASSNAMES.TOURNEY.LINK;
link.target = '_blank'; link.target = '_blank';
@ -184,8 +190,10 @@ const UI = {
img.className = UI.CLASSNAMES.TOURNEY.IMAGE; img.className = UI.CLASSNAMES.TOURNEY.IMAGE;
country.className = UI.CLASSNAMES.TOURNEY.COUNTRY; country.className = UI.CLASSNAMES.TOURNEY.COUNTRY;
country.target = '_blank';
year.className = UI.CLASSNAMES.TOURNEY.YEAR; year.className = UI.CLASSNAMES.TOURNEY.YEAR;
year.target = '_blank';
const tourneyPane = document.querySelector('.tourney'); const tourneyPane = document.querySelector('.tourney');

Write Preview
Loading…
Cancel
Save