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

Color scheme switcher complete.

Browse Source
master
Ben Burlingham 9 years ago
parent d4630cde13
commit 3785c0a2b7
7 changed files with 142 additions and 47 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. 16
      css/schemes.scss
  2. 10
      css/style.css
  3. 9
      index.html
  4. 79
      js/bundle.js
  5. 27
      js/diagram.js
  6. 4
      js/index.js
  7. 44
      js/ui.js

16
css/schemes.scss
Unescape View File

@ -9,14 +9,28 @@ $schemeW: 32px;
width: 200px;
}
.scheme {
.scheme-item {
background-image: url('../res/scheme.svg');
background-repeat: no-repeat;
border: 4px solid #fff;
cursor: pointer;
display: inline-block;
height: 40px;
opacity: 0.2;
outline: 1px solid #d5d5d5;
width: 40px;
&:hover {
opacity: 0.6;
}
&.active {
opacity: 1;
.sort-icon {
visibility: visible;
}
}
}
.scheme1,

10
css/style.css
Unescape View File

@ -144,14 +144,22 @@ body {
top: 160px;
width: 200px; }
.scheme {
.scheme-item {
background-image: url(../res/scheme.svg);
background-repeat: no-repeat;
border: 4px solid #fff;
cursor: pointer;
display: inline-block;
height: 40px;
opacity: 0.2;
outline: 1px solid #d5d5d5;
width: 40px; }
.scheme-item:hover {
opacity: 0.6; }
.scheme-item.active {
opacity: 1; }
.scheme-item.active .sort-icon {
visibility: visible; }
.scheme1,
.scheme2,

9
index.html
Unescape View File

@ -43,16 +43,13 @@
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
No finals in 1954 or 1962?
change initState to `foo = foo || "default"`
color scheme pane
toggle sort icon
toggle round icon
better highlight clickable poster
image edit posters
fix SVG icons to be smaller and inline
better colors
events to indices not strings: 12356 or 1,2,3,5,6
remove dependencies from Diagram
tweet it!

79
js/bundle.js
Unescape View File

@ -138,7 +138,7 @@
var matrix = _matrices2.default.buildMatrix(main.json, state.eventKey);
_diagram2.default.clear();
_diagram2.default.build(main.json, state.eventKey, state.sort, _ui2.default.SORT_TYPES, matrix);
_diagram2.default.build(main.json, state.eventKey, state.sort, state.scheme, _ui2.default.SORT_TYPES, matrix);
_ui2.default.updateTourneyPane(state.eventKey);
_ui2.default.updateEventsPane(state.eventKey);
@ -192,7 +192,7 @@
}
if (state.scheme === undefined) {
state.scheme = null;
state.scheme = Math.ceil(Math.random() * 4);
}
if (state.rounds === undefined) {
@ -410,7 +410,7 @@
return team.ga;
},
build: function build(data, eventKey, sort, SORT_TYPES, matrix) {
build: function build(data, eventKey, sort, scheme, SORT_TYPES, matrix) {
var svg = d3.select("svg"),
width = svg.attr("width"),
height = svg.attr("height"),
@ -437,16 +437,33 @@
var ribbon = d3.ribbon().radius(innerRadius);
// const len = data.tourneys[eventKey].teams.length;
//
// const color = d3.scaleLinear().domain([0, len]).range(["#edf8b1", "#081d58"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb);
// const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
var colors = ["#f70000", "#fbad20", "#f5eb13", "#b8d433", "#6bc9c6", "#058bc5", "#34469d", "#7e4d9f", "#c63d96"];
// const color = i => colors[i % colors.length];
// const color = d3.scaleOrdinal(d3.schemeCategory20);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var len = data.tourneys[eventKey].teams.length;
var color = d3.scaleOrdinal(d3.schemeCategory20);
(function () {
switch (parseInt(scheme)) {
case 1:
color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb);
break;
case 2:
var colors = ["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"];
color = function color(i) {
return colors[i % colors.length];
};
break;
case 3:
color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb);
break;
case 4:
color = d3.scaleOrdinal(d3.schemeCategory10);
break;
}
})();
var g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")").datum(sortedChords);
@ -595,10 +612,10 @@
},
SCHEME: {
SCHEME1: 'scheme scheme1',
SCHEME2: 'scheme scheme2',
SCHEME3: 'scheme scheme3',
SCHEME4: 'scheme scheme4'
SCHEME1: 'scheme-item scheme1',
SCHEME2: 'scheme-item scheme2',
SCHEME3: 'scheme-item scheme3',
SCHEME4: 'scheme-item scheme4'
},
SORT: {
@ -655,8 +672,12 @@
clearActive: function clearActive(nodes) {
nodes.forEach(function (node) {
var classes = node.className.split(' ');
classes.splice(1, classes.indexOf('active'));
node.className = classes.join(' ');
var i = classes.indexOf('active');
if (i !== -1) {
classes.splice(i, 1);
node.className = classes.join(' ');
}
});
},
@ -719,15 +740,21 @@
var ribbons = document.querySelectorAll('.ribbon');
ribbons.forEach(function (ribbon) {
var name = allRounds[ribbon.getAttribute("data-round-id")];
console.warn(name);
var type = UI.getRoundType(name);
roundsToShow.indexOf(type) === -1 ? ribbon.style.display = 'none' : ribbon.style.display = 'inline';
});
},
updateSchemePane: function updateSchemePane() {
var schemePane = document.querySelector('.schemes');
updateSchemePane: function updateSchemePane(scheme) {
var schemeItems = document.querySelectorAll('.scheme-item');
UI.clearActive(schemeItems);
schemeItems.forEach(function (node) {
if (node.getAttribute(UI.DATA.SCHEME) === scheme) {
node.className += ' active';
}
});
},
updateSortPane: function updateSortPane(sort) {
@ -840,12 +867,26 @@
var scheme2 = document.createElement('div');
var scheme3 = document.createElement('div');
var scheme4 = document.createElement('div');
var scheme5 = document.createElement('div');
scheme1.className = UI.CLASSNAMES.SCHEME.SCHEME1;
scheme1.setAttribute(UI.DATA.SCHEME, 1);
scheme1.addEventListener('click', onClick);
scheme1.setAttribute(UI.DATA.ROOT, true);
scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2;
scheme2.setAttribute(UI.DATA.SCHEME, 2);
scheme2.addEventListener('click', onClick);
scheme2.setAttribute(UI.DATA.ROOT, true);
scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3;
scheme3.setAttribute(UI.DATA.SCHEME, 3);
scheme3.addEventListener('click', onClick);
scheme3.setAttribute(UI.DATA.ROOT, true);
scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4;
scheme4.setAttribute(UI.DATA.SCHEME, 4);
scheme4.addEventListener('click', onClick);
scheme4.setAttribute(UI.DATA.ROOT, true);
schemePane.appendChild(scheme1);
schemePane.appendChild(scheme2);

27
js/diagram.js
Unescape View File

@ -120,7 +120,7 @@ const Diagram = {
return team.ga;
},
build: (data, eventKey, sort, SORT_TYPES, matrix) => {
build: (data, eventKey, sort, scheme, SORT_TYPES, matrix) => {
const svg = d3.select("svg"),
width = (svg.attr("width")),
height = (svg.attr("height")),
@ -158,16 +158,29 @@ const Diagram = {
const ribbon = d3.ribbon()
.radius(innerRadius);
// const len = data.tourneys[eventKey].teams.length;
//
// const color = d3.scaleLinear().domain([0, len]).range(["#edf8b1", "#081d58"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb);
// const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
const colors = ["#f70000","#fbad20","#f5eb13","#b8d433","#6bc9c6","#058bc5","#34469d","#7e4d9f","#c63d96"];
// const color = i => colors[i % colors.length];
// const color = d3.scaleOrdinal(d3.schemeCategory20);
const color = d3.scaleOrdinal(d3.schemeCategory10);
const len = data.tourneys[eventKey].teams.length;
let color = d3.scaleOrdinal(d3.schemeCategory20);
switch (parseInt(scheme)) {
case 1:
color = d3.scaleLinear().domain([0, len]).range(["#aaa", "green"]).interpolate(d3.interpolateRgb);
break;
case 2:
const colors = ["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"];
color = i => colors[i % colors.length];
break;
case 3:
color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).interpolate(d3.interpolateRgb);
break;
case 4:
color = d3.scaleOrdinal(d3.schemeCategory10);
break;
}
const g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

4
js/index.js
Unescape View File

@ -77,7 +77,7 @@ const main = {
const matrix = Matrices.buildMatrix(main.json, state.eventKey);
Diagram.clear();
Diagram.build(main.json, state.eventKey, state.sort, UI.SORT_TYPES, matrix);
Diagram.build(main.json, state.eventKey, state.sort, state.scheme, UI.SORT_TYPES, matrix);
UI.updateTourneyPane(state.eventKey);
UI.updateEventsPane(state.eventKey);
@ -127,7 +127,7 @@ const main = {
}
if (state.scheme === undefined) {
state.scheme = null;
state.scheme = Math.ceil(Math.random() * 4);
}
if (state.rounds === undefined) {

44
js/ui.js
Unescape View File

@ -13,10 +13,10 @@ const UI = {
},
SCHEME: {
SCHEME1: 'scheme scheme1',
SCHEME2: 'scheme scheme2',
SCHEME3: 'scheme scheme3',
SCHEME4: 'scheme scheme4',
SCHEME1: 'scheme-item scheme1',
SCHEME2: 'scheme-item scheme2',
SCHEME3: 'scheme-item scheme3',
SCHEME4: 'scheme-item scheme4',
},
SORT: {
@ -73,8 +73,12 @@ const UI = {
clearActive: (nodes) => {
nodes.forEach(node => {
const classes = node.className.split(' ');
classes.splice(1, classes.indexOf('active'));
node.className = classes.join(' ');
const i = classes.indexOf('active');
if (i !== -1) {
classes.splice(i, 1);
node.className = classes.join(' ');
}
});
},
@ -137,7 +141,6 @@ const UI = {
const ribbons = document.querySelectorAll('.ribbon');
ribbons.forEach(ribbon => {
const name = allRounds[ribbon.getAttribute("data-round-id")];
console.warn(name)
const type = UI.getRoundType(name);
roundsToShow.indexOf(type) === -1
@ -146,10 +149,15 @@ const UI = {
});
},
updateSchemePane: () => {
const schemePane = document.querySelector('.schemes');
updateSchemePane: (scheme) => {
const schemeItems = document.querySelectorAll('.scheme-item');
UI.clearActive(schemeItems);
schemeItems.forEach(node => {
if (node.getAttribute(UI.DATA.SCHEME) === scheme) {
node.className += ' active';
}
});
},
updateSortPane: (sort) => {
@ -287,12 +295,26 @@ const UI = {
const scheme2 = document.createElement('div');
const scheme3 = document.createElement('div');
const scheme4 = document.createElement('div');
const scheme5 = document.createElement('div');
scheme1.className = UI.CLASSNAMES.SCHEME.SCHEME1;
scheme1.setAttribute(UI.DATA.SCHEME, 1);
scheme1.addEventListener('click', onClick);
scheme1.setAttribute(UI.DATA.ROOT, true);
scheme2.className = UI.CLASSNAMES.SCHEME.SCHEME2;
scheme2.setAttribute(UI.DATA.SCHEME, 2);
scheme2.addEventListener('click', onClick);
scheme2.setAttribute(UI.DATA.ROOT, true);
scheme3.className = UI.CLASSNAMES.SCHEME.SCHEME3;
scheme3.setAttribute(UI.DATA.SCHEME, 3);
scheme3.addEventListener('click', onClick);
scheme3.setAttribute(UI.DATA.ROOT, true);
scheme4.className = UI.CLASSNAMES.SCHEME.SCHEME4;
scheme4.setAttribute(UI.DATA.SCHEME, 4);
scheme4.addEventListener('click', onClick);
scheme4.setAttribute(UI.DATA.ROOT, true);
schemePane.appendChild(scheme1);
schemePane.appendChild(scheme2);

Write Preview
Loading…
Cancel
Save