diff --git a/css/style.css b/css/style.css index ecdd14b..661ad3e 100644 --- a/css/style.css +++ b/css/style.css @@ -73,13 +73,21 @@ body { .tourney-country { color: #777; + display: block; font-size: 20px; - line-height: 40px; } + line-height: 40px; + text-decoration: none; } + .tourney-country:hover { + color: #000; } .tourney-year { color: #777; + display: block; font-size: 40px; - line-height: 40px; } + line-height: 40px; + text-decoration: none; } + .tourney-year:hover { + color: #000; } .diagram { font-size: 10px; margin: 0 auto; diff --git a/css/tourney.scss b/css/tourney.scss index 54cc6e0..a2ad9ed 100644 --- a/css/tourney.scss +++ b/css/tourney.scss @@ -25,12 +25,24 @@ .tourney-country { color: #777; + display: block; font-size: 20px; line-height: 40px; + text-decoration: none; + + &:hover { + color: #000; + } } .tourney-year { color: #777; + display: block; font-size: 40px; line-height: 40px; + text-decoration: none; + + &:hover { + color: #000; + } } diff --git a/index.html b/index.html index d76efc3..178a9b6 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + @@ -10,6 +11,36 @@ + +

World Cup Matches

+

Chord diagram for all World Cup matches from 1930 to 2014

+
+ +

Project Goal

+ +
+ Explore D3's chord diagrams using World Cup match data. Use Haskell to build JSON parsers. +

+ Visualization should invite interaction to create and answer questions such as: + +
+ +

+ Data source: OpenFootball. There are a few errors. + Transform, and reduce scripts built in Haskell, publically available in the source code. +

+ +

+ This visualization is created using D3 and Three.js libraries. +

+ +
+
@@ -23,30 +54,15 @@
-
Lessons learned
- scaleOrdinal vs scaleLinear (only 2 colors!) vs interpolateCool vs d3.schemeColor20c
- ribbon source vs index (change fill them differently) - - https://github.com/d3/d3-scale-chromatic - - 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 -
TODO
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? + - better highlight clickable poster - image edit posters + fix buoy viz tweet it!
diff --git a/js/bundle.js b/js/bundle.js index 466986b..58a4287 100644 --- a/js/bundle.js +++ b/js/bundle.js @@ -690,13 +690,19 @@ }; var ek = tourneyList[eventKey] === undefined ? null : eventKey; + var href = 'https://en.wikipedia.org/wiki/' + ek + '_FIFA_World_Cup'; var tourneyPane = document.querySelector('.tourney'); 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).href = href; + tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.YEAR).innerHTML = ek; + tourneyPane.querySelector('.' + UI.CLASSNAMES.TOURNEY.YEAR).href = href; }, updateEventsPane: function updateEventsPane(eventKey) { @@ -756,8 +762,8 @@ buildTourneyPane: function buildTourneyPane() { var link = document.createElement('a'); var img = document.createElement('img'); - var country = document.createElement('div'); - var year = document.createElement('year'); + var country = document.createElement('a'); + var year = document.createElement('a'); link.className = UI.CLASSNAMES.TOURNEY.LINK; link.target = '_blank'; @@ -765,8 +771,10 @@ img.className = UI.CLASSNAMES.TOURNEY.IMAGE; country.className = UI.CLASSNAMES.TOURNEY.COUNTRY; + country.target = '_blank'; year.className = UI.CLASSNAMES.TOURNEY.YEAR; + year.target = '_blank'; var tourneyPane = document.querySelector('.tourney'); diff --git a/js/ui.js b/js/ui.js index 02cb1ea..535902f 100644 --- a/js/ui.js +++ b/js/ui.js @@ -107,13 +107,19 @@ const UI = { }; const ek = (tourneyList[eventKey] === undefined ? null : eventKey); + const href = `https://en.wikipedia.org/wiki/${ek}_FIFA_World_Cup`; const tourneyPane = document.querySelector('.tourney'); 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}`).href = href; + tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).innerHTML = ek; + tourneyPane.querySelector(`.${UI.CLASSNAMES.TOURNEY.YEAR}`).href = href; }, updateEventsPane: (eventKey) => { @@ -175,8 +181,8 @@ const UI = { buildTourneyPane: () => { const link = document.createElement('a'); const img = document.createElement('img'); - const country = document.createElement('div'); - const year = document.createElement('year'); + const country = document.createElement('a'); + const year = document.createElement('a'); link.className = UI.CLASSNAMES.TOURNEY.LINK; link.target = '_blank'; @@ -184,8 +190,10 @@ const UI = { img.className = UI.CLASSNAMES.TOURNEY.IMAGE; country.className = UI.CLASSNAMES.TOURNEY.COUNTRY; + country.target = '_blank'; year.className = UI.CLASSNAMES.TOURNEY.YEAR; + year.target = '_blank'; const tourneyPane = document.querySelector('.tourney');