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
Unified 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; width: 200px;
} }
.scheme { .scheme-item {
background-image: url('../res/scheme.svg'); background-image: url('../res/scheme.svg');
background-repeat: no-repeat; background-repeat: no-repeat;
border: 4px solid #fff; border: 4px solid #fff;
cursor: pointer;
display: inline-block; display: inline-block;
height: 40px; height: 40px;
opacity: 0.2;
outline: 1px solid #d5d5d5; outline: 1px solid #d5d5d5;
width: 40px; width: 40px;
&:hover {
opacity: 0.6;
}
&.active {
opacity: 1;
.sort-icon {
visibility: visible;
}
}
} }
.scheme1, .scheme1,

10
css/style.css
Unescape View File

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

9
index.html
Unescape View File

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

79
js/bundle.js
Unescape View File

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

27
js/diagram.js
Unescape View File

@ -120,7 +120,7 @@ const Diagram = {
return team.ga; return team.ga;
}, },
build: (data, eventKey, sort, SORT_TYPES, matrix) => { build: (data, eventKey, sort, scheme, SORT_TYPES, matrix) => {
const svg = d3.select("svg"), const svg = d3.select("svg"),
width = (svg.attr("width")), width = (svg.attr("width")),
height = (svg.attr("height")), height = (svg.attr("height")),
@ -158,16 +158,29 @@ const Diagram = {
const ribbon = d3.ribbon() const ribbon = d3.ribbon()
.radius(innerRadius); .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(["#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(["#aaa", "green"]).interpolate(d3.interpolateRgb);
// const color = d3.scaleLinear().domain([0, len]).range(["red", "blue"]).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 len = data.tourneys[eventKey].teams.length;
const colors = ["#f70000","#fbad20","#f5eb13","#b8d433","#6bc9c6","#058bc5","#34469d","#7e4d9f","#c63d96"]; let color = d3.scaleOrdinal(d3.schemeCategory20);
// const color = i => colors[i % colors.length];
// const color = d3.scaleOrdinal(d3.schemeCategory20); switch (parseInt(scheme)) {
const color = d3.scaleOrdinal(d3.schemeCategory10); 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") const g = svg.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")") .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); const matrix = Matrices.buildMatrix(main.json, state.eventKey);
Diagram.clear(); 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.updateTourneyPane(state.eventKey);
UI.updateEventsPane(state.eventKey); UI.updateEventsPane(state.eventKey);
@ -127,7 +127,7 @@ const main = {
} }
if (state.scheme === undefined) { if (state.scheme === undefined) {
state.scheme = null; state.scheme = Math.ceil(Math.random() * 4);
} }
if (state.rounds === undefined) { if (state.rounds === undefined) {

44
js/ui.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save