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
Split 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 {
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;

12
css/tourney.scss
Unescape View File

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

52
index.html
Unescape View File

@ -2,6 +2,7 @@
<html>
<head>
<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-chord.v0.0.min.js"></script>
<script src='js/bundle.js'></script>
@ -10,6 +11,36 @@
</head>
<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="tourney"></div>
<div class="events"></div>
@ -23,30 +54,15 @@
</div>
<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>
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!
</div>

14
js/bundle.js
Unescape View File

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

14
js/ui.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save