Experimenting with tourney pane.

css/diagram.scss

@@ -1,11 +1,11 @@
 .diagram {
+    background: rgba(150, 100, 200, 0.1);
     font-size: 10px;
-    height: 700px;
-    left: 200px;
-    position: absolute;
+    margin: 0 auto;
+    position: relative;
     top: 0;
-    width: 800px;
-    z-index: 0;
+    width: 700px;
+    z-index: 10;
 }
 
 .group-tick line {

css/events.scss

@@ -1,25 +1,28 @@
 .events {
-    display: table;
-    height: 100%;
+    background: rgba(250, 200, 200, 0.1);
+    bottom: 0;
+    font-size: 0;
     left: 0;
     position: absolute;
-    top: 0;
     width: 200px;
 }
 
 .event-item {
-    /*background: #CBFFC0;*/
+    background: #777;
     border-color: #fff;
-    /*border-radius: 0 16px 16px 0;*/
+    border-radius: 0 16px 16px 0;
     border-style: solid;
     border-width: 1px 0;
     cursor: pointer;
+    display: inline-block;
     filter: grayscale(100%);
     height: 24px;
     margin-bottom: 4px;
     opacity: 0.2;
-    padding: 4px 4px 4px 44px;
+    padding: 4px;
     position: relative;
+    vertical-align: baseline;
+    width: 50px;
 }
 
 .event-item.active,
@@ -35,21 +38,21 @@
     opacity: 0.8;
 }
 
-.event-flag {
-    font-size: 0;
-    left: 4px;
-    position: absolute;
-    top: 4px;
-}
+// .event-flag {
+//     font-size: 0;
+//     left: 4px;
+//     position: absolute;
+//     top: 4px;
+// }
+//
+// .event-flag .flag-icon {
+//     font-size: 24px;
+// }
 
-.event-flag .flag-icon {
-    font-size: 24px;
-}
-
-.event-location {
-    font-size: 10px;
-    line-height: 10px;
-}
+// .event-location {
+//     font-size: 10px;
+//     line-height: 10px;
+// }
 
 .event-year {
     font-size: 13px;

css/index.scss

@@ -0,0 +1,7 @@
+.visualization {
+    height: 700px;
+    margin: 20px auto;
+    position: relative;
+    text-align: center;
+    width: 1100px;
+}

css/options.scss

@@ -1,43 +0,0 @@
-.options {
-    color: white;
-    left: 900px;
-    height: 100%;
-    min-width: 200px;
-    position: absolute;
-    text-align: right;
-    top: 0;
-    width: 200px;
-}
-
-.option-divider {
-    margin: 19px 0 19px 25%;
-    width: 75%;
-}
-
-.option-item {
-    background: teal;
-    border-radius: 16px 0 0 16px;
-    cursor: pointer;
-    height: 24px;
-    line-height: 24px;
-    margin-bottom: 4px;
-    padding: 4px 16px 4px 4px;
-}
-
-.option-item:hover {
-    opacity: 0.7;
-}
-
-.option-item.inactive {
-    opacity: 0.2;
-}
-
-.option-text {
-    display: inline-block;
-    font-size: 12px;
-}
-
-.option-toggle {
-    display: inline-block;
-    margin-left: 25px;
-}

css/reset.scss

@@ -1,17 +1,9 @@
 * {
-    border-sizing: border-box;
+    box-sizing: border-box;
     margin: 0;
     padding: 0;
 }
 
 body {
   font-family: sans-serif;
-  padding: 20px;
-}
-
-.visualization {
-    height: 700px;
-    margin: 0 auto;
-    position: relative;
-    width: 1100px;
 }

css/rounds.scss

@@ -1,4 +1,5 @@
 .rounds {
+    background: rgba(240, 120, 10, 0.1);
     bottom: 0;
     color: #000;
     position: absolute;

css/sort.scss

@@ -1,5 +1,5 @@
 .sort {
-
+    background: rgba(10, 120, 240, 0.1);
     position: absolute;
     right: 0;
     text-align: right;

css/style.css

@@ -1,74 +1,40 @@
 * {
-  border-sizing: border-box;
+  box-sizing: border-box;
   margin: 0;
   padding: 0; }
 
 body {
-  font-family: sans-serif;
-  padding: 20px; }
-
+  font-family: sans-serif; }
 .visualization {
   height: 700px;
-  margin: 0 auto;
+  margin: 20px auto;
   position: relative;
+  text-align: center;
   width: 1100px; }
-.options {
-  color: white;
-  left: 900px;
-  height: 100%;
-  min-width: 200px;
-  position: absolute;
-  text-align: right;
-  top: 0;
-  width: 200px; }
-
-.option-divider {
-  margin: 19px 0 19px 25%;
-  width: 75%; }
-
-.option-item {
-  background: teal;
-  border-radius: 16px 0 0 16px;
-  cursor: pointer;
-  height: 24px;
-  line-height: 24px;
-  margin-bottom: 4px;
-  padding: 4px 16px 4px 4px; }
-
-.option-item:hover {
-  opacity: 0.7; }
-
-.option-item.inactive {
-  opacity: 0.2; }
-
-.option-text {
-  display: inline-block;
-  font-size: 12px; }
-
-.option-toggle {
-  display: inline-block;
-  margin-left: 25px; }
 .events {
-  display: table;
-  height: 100%;
+  background: rgba(250, 200, 200, 0.1);
+  bottom: 0;
+  font-size: 0;
   left: 0;
   position: absolute;
-  top: 0;
   width: 200px; }
 
 .event-item {
-  /*background: #CBFFC0;*/
+  background: #777;
   border-color: #fff;
-  /*border-radius: 0 16px 16px 0;*/
+  border-radius: 0 16px 16px 0;
   border-style: solid;
   border-width: 1px 0;
   cursor: pointer;
+  display: inline-block;
   filter: grayscale(100%);
   height: 24px;
   margin-bottom: 4px;
   opacity: 0.2;
-  padding: 4px 4px 4px 44px;
-  position: relative; }
+  padding: 4px;
+  position: relative;
+  vertical-align: baseline;
+  width: 50px; }
 
 .event-item.active,
 .event-item.active:hover {
@@ -81,30 +47,34 @@ body {
   filter: grayscale(0%);
   opacity: 0.8; }
 
-.event-flag {
-  font-size: 0;
-  left: 4px;
+.event-year {
+  font-size: 13px;
+  line-height: 14px; }
+.tourney {
+  background: rgba(10, 240, 120, 0.1);
+  left: 0;
   position: absolute;
-  top: 4px; }
+  top: 0; }
 
-.event-flag .flag-icon {
-  font-size: 24px; }
+.tourney-flag {
+  border: 1px solid #ddd;
+  font-size: 150px; }
 
-.event-location {
-  font-size: 10px;
-  line-height: 10px; }
+.tourney-country {
+  font-size: 20px;
+  font-style: italic; }
 
-.event-year {
-  font-size: 13px;
-  line-height: 14px; }
+.tourney-year {
+  font-size: 40px;
+  font-style: italic; }
 .diagram {
+  background: rgba(150, 100, 200, 0.1);
   font-size: 10px;
-  height: 700px;
-  left: 200px;
-  position: absolute;
+  margin: 0 auto;
+  position: relative;
   top: 0;
-  width: 800px;
-  z-index: 0; }
+  width: 700px;
+  z-index: 10; }
 
 .group-tick line {
   stroke: #ddd; }
@@ -118,6 +88,7 @@ body {
   fill-opacity: 1;
   stroke-opacity: 1; }
 .sort {
+  background: rgba(10, 120, 240, 0.1);
   position: absolute;
   right: 0;
   text-align: right;
@@ -138,6 +109,7 @@ body {
 .sort-item.active {
   background: red; }
 .rounds {
+  background: rgba(240, 120, 10, 0.1);
   bottom: 0;
   color: #000;
   position: absolute;

css/tourney.scss

@@ -0,0 +1,21 @@
+.tourney {
+    background: rgba(10, 240, 120, 0.1);
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+.tourney-flag {
+    border: 1px solid #ddd;
+    font-size: 150px;
+}
+
+.tourney-country {
+    font-size: 20px;
+    font-style: italic;
+}
+
+.tourney-year {
+    font-size: 40px;
+    font-style: italic;
+}

index.html

@@ -11,12 +11,18 @@
 
 <body>
     <div class="visualization">
+        <div class="tourney">
+            <!-- <div class="tourney-flag flag-icon flag-icon-jp"></div> -->
+            <img src="res/2002.jpg" alt="" style="width: 200px;" />
+            <div class="tourney-country">Japan / South Korea</div>
+            <div class="tourney-year">2002</div>
+        </div>
         <div class="events"></div>
         <div class="sort"></div>
         <div class="rounds"></div>
 
         <div class="diagram">
-            <svg width="800" height="700"></svg>
+            <svg width="700" height="700"></svg>
         </div>
     </div>
 
@@ -44,7 +50,6 @@
 
         better layout: embiggen current event flag
         better colors
-        webpack 2 / css modules?
         remove dependencies from Diagram
 
         tweet it!

js/bundle.js

@@ -65,8 +65,9 @@
 	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 	__webpack_require__(5);
-	__webpack_require__(6);
+	__webpack_require__(12);
 	__webpack_require__(7);
+	__webpack_require__(13);
 	__webpack_require__(8);
 	__webpack_require__(9);
 	__webpack_require__(10);
@@ -172,7 +173,7 @@
 	        var state = main.getState();
 
 	        if (state.eventKey === undefined) {
-	            state.eventKey = "1930";
+	            state.eventKey = "2014";
 	        }
 
 	        if (state.sort === undefined) {
@@ -395,10 +396,10 @@
 
 	    build: function build(data, eventKey, sort, SORT_TYPES, matrix) {
 	        var svg = d3.select("svg"),
-	            width = +svg.attr("width"),
-	            height = +svg.attr("height"),
+	            width = svg.attr("width"),
+	            height = svg.attr("height"),
 	            outerArcThickness = 5,
-	            outerRadius = Math.min(width, height) * 0.5 - 125,
+	            outerRadius = Math.min(width, height) * 0.5 - 130,
 	            innerRadius = outerRadius - outerArcThickness;
 
 	        var chords = d3.chord().padAngle(0.05).call(null, matrix);
@@ -493,9 +494,9 @@
 	                case SORT_TYPES.GOALS:
 	                    metric = '(' + team.gf + ')';
 	                    break;
-	                case SORT_TYPES.POPULATION:
-	                    metric = '(' + Number(team.p).toLocaleString() + ')';
-	                    break;
+	                // case SORT_TYPES.POPULATION:
+	                //     metric = `(${Number(team.p).toLocaleString()})`;
+	                //     break;
 	            }
 
 	            return data.countries[team.cId] + ' ' + metric;
@@ -684,8 +685,6 @@
 	            var item = document.createElement('div');
 	            var year = document.createElement('div');
 	            var location = document.createElement('div');
-	            var flag = document.createElement('div');
-	            var flagIcon = document.createElement('div');
 
 	            item.className = UI.CLASSNAMES.EVENT.ITEM;
 	            item.addEventListener('click', onClick);
@@ -698,13 +697,8 @@
 	            location.className = UI.CLASSNAMES.EVENT.LOCATION;
 	            location.innerHTML = evt.location;
 
-	            flag.className = UI.CLASSNAMES.EVENT.FLAG;
-	            flagIcon.className = 'flag-icon flag-icon-' + evt.icon;
-
-	            flag.appendChild(flagIcon);
-	            item.appendChild(flag);
 	            item.appendChild(year);
-	            item.appendChild(location);
+	            // item.appendChild(location);
 
 	            eventsDiv.appendChild(item);
 	        });
@@ -812,31 +806,39 @@
 	// removed by extract-text-webpack-plugin
 
 /***/ },
-/* 6 */
+/* 6 */,
+/* 7 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
 
 /***/ },
-/* 7 */
+/* 8 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
 
 /***/ },
-/* 8 */
+/* 9 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
 
 /***/ },
-/* 9 */
+/* 10 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin
 
 /***/ },
-/* 10 */
+/* 11 */,
+/* 12 */
+/***/ function(module, exports) {
+
+	// removed by extract-text-webpack-plugin
+
+/***/ },
+/* 13 */
 /***/ function(module, exports) {
 
 	// removed by extract-text-webpack-plugin

js/diagram.js

@@ -122,10 +122,10 @@ const Diagram = {
 
     build: (data, eventKey, sort, SORT_TYPES, matrix) => {
         const svg = d3.select("svg"),
-            width = +svg.attr("width"),
-            height = +svg.attr("height"),
+            width = (svg.attr("width")),
+            height = (svg.attr("height")),
             outerArcThickness = 5,
-            outerRadius = Math.min(width, height) * 0.5 - 125,
+            outerRadius = Math.min(width, height) * 0.5 - 130,
             innerRadius = outerRadius - outerArcThickness;
 
         const chords = d3.chord()
@@ -242,9 +242,9 @@ const Diagram = {
                     case SORT_TYPES.GOALS:
                         metric = `(${team.gf})`;
                         break;
-                    case SORT_TYPES.POPULATION:
-                        metric = `(${Number(team.p).toLocaleString()})`;
-                        break;
+                    // case SORT_TYPES.POPULATION:
+                    //     metric = `(${Number(team.p).toLocaleString()})`;
+                    //     break;
                 }
 
                 return `${data.countries[team.cId]} ${metric}`;

js/index.js

@@ -4,8 +4,9 @@ import UI from './ui';
 import Sorter from './sorter'
 
 require('../css/reset.scss');
-require('../css/options.scss');
+require('../css/index.scss');
 require('../css/events.scss');
+require('../css/tourney.scss');
 require('../css/diagram.scss');
 require('../css/sort.scss');
 require('../css/rounds.scss');
@@ -107,7 +108,7 @@ const main = {
         const state = main.getState();
 
         if (state.eventKey === undefined) {
-            state.eventKey = "1930";
+            state.eventKey = "2014";
         }
 
         if (state.sort === undefined) {

js/ui.js

@@ -140,8 +140,6 @@ const UI = {
             const item = document.createElement('div');
             const year = document.createElement('div');
             const location = document.createElement('div');
-            const flag = document.createElement('div');
-            const flagIcon = document.createElement('div');
 
             item.className = UI.CLASSNAMES.EVENT.ITEM;
             item.addEventListener('click', onClick);
@@ -154,13 +152,8 @@ const UI = {
             location.className = UI.CLASSNAMES.EVENT.LOCATION;
             location.innerHTML = evt.location;
 
-            flag.className = UI.CLASSNAMES.EVENT.FLAG;
-            flagIcon.className = `flag-icon flag-icon-${evt.icon}`;
-
-            flag.appendChild(flagIcon);
-            item.appendChild(flag);
             item.appendChild(year);
-            item.appendChild(location);
+            // item.appendChild(location);
 
             eventsDiv.appendChild(item);
         });