diff --git a/.gitignore b/.gitignore
index fd4f2b0..6a155bf 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
node_modules
.DS_Store
+.npm-debug.log
diff --git a/css/index.scss b/css/index.scss
index 2965967..8f165ce 100644
--- a/css/index.scss
+++ b/css/index.scss
@@ -1,6 +1,19 @@
-.visualization {
- height: 700px;
+.particles {
+ background: #fafafa;
+ border: 5px solid #fafafa;
+ border-radius: 3px;
+ height: 400px;
margin: 10px auto;
position: relative;
- width: 1100px;
+ width: 90%;
+}
+
+.particle {
+ $side: 20px;
+
+ background: url('../res/seahorse.svg');
+ background-size: $side $side;
+ height: $side;
+ position: absolute;
+ width: $side;
}
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..dba6fc6
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,22 @@
+.particles {
+ background: #fafafa;
+ border: 5px solid #fafafa;
+ border-radius: 3px;
+ height: 400px;
+ margin: 10px auto;
+ position: relative;
+ width: 90%; }
+
+.particle {
+ background: url(../res/seahorse.svg);
+ background-size: 20px 20px;
+ height: 20px;
+ position: absolute;
+ width: 20px; }
+* {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0; }
+
+body {
+ font-family: sans-serif; }
diff --git a/index.html b/index.html
index 1ef7099..777f270 100644
--- a/index.html
+++ b/index.html
@@ -1,148 +1,14 @@
-
+
-Dust
- 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.
-
- How many times has Iran competed in a World Cup?
- Which teams played the in final in 1986?
- Which team scored the most goals in any World Cup?
- Why does the 1950 World Cup have 6 final games (and what is the Maracanazo)?
-
-
-
-
- Data source: OpenFootball .
- Transform and reduce scripts are built in Haskell, publically available in the source code .
-
-
-
- This visualization is created using D3.js. Note that null-null relationships are not displayed on chord diagrams. As a result, matches with a score of 0-0 are not shown.
-
-
-
-
+
-`
diff --git a/js/animation1.js b/js/animation1.js
new file mode 100644
index 0000000..0a1f185
--- /dev/null
+++ b/js/animation1.js
@@ -0,0 +1,32 @@
+import Rx, { Observable } from 'rxjs';
+
+const Animation1 = {
+ // const particleDivs = [];
+ //
+ // const instanceCount = Rx.Observable.range(0, 3);
+ //
+ // const createDivs = instanceCount.subscribe((i) => {
+ // console.warn("creating divs")
+ // const container = document.querySelector('.particles');
+ // const div = document.createElement('div');
+ // div.className = 'particle';
+ // div.style.top = `${i * 75}px`;
+ // div.style.left = 0;
+ //
+ // container.appendChild(div);
+ // particleDivs.push(div);
+ // });
+ //
+ // Rx.Observable
+ // .interval(1000 / 32)
+ // .do(frameIndex => {
+ // instanceCount.subscribe(i => {
+ // particleDivs[i].style.left = `${frameIndex * 10}px`;
+ // });
+ // // particleDivs.do(div => { div.style.left = `${n * 75}px`; }).subscribe();
+ // })
+ // .take(16)
+ // .subscribe(console.info)
+};
+
+export default Animation1;
diff --git a/js/bundle.js b/js/bundle.js
index 164469e..1a2fe35 100644
--- a/js/bundle.js
+++ b/js/bundle.js
@@ -63,26 +63,16 @@
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
-/******/ return __webpack_require__(__webpack_require__.s = 0);
+/******/ return __webpack_require__(__webpack_require__.s = 70);
/******/ })
/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports, __webpack_require__) {
+/******/ ({
-"use strict";
+/***/ 70:
+/***/ (function(module, exports) {
-
-// require('../css/reset.scss');
-// require('../css/index.scss');
-// require('../css/events.scss');
-// require('../css/tourney.scss');
-// require('../css/diagram.scss');
-// require('../css/sort.scss');
-// require('../css/schemes.scss');
-// require('../css/rounds.scss');
-
-console.warn('Hello world');
+throw new Error("Module build failed: Error: ENOENT: no such file or directory, open '/Users/tonklin/Development/bb/dust/js/index.js'");
/***/ })
-/******/ ]);
\ No newline at end of file
+
+/******/ });
\ No newline at end of file
diff --git a/js/index.js b/js/index.js
index b232521..d884c6c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,10 +1,16 @@
-// require('../css/reset.scss');
-// require('../css/index.scss');
-// require('../css/events.scss');
-// require('../css/tourney.scss');
-// require('../css/diagram.scss');
-// require('../css/sort.scss');
-// require('../css/schemes.scss');
-// require('../css/rounds.scss');
+import Animation1 from './animation1';
-console.warn('Hello world');
+require('../css/index.scss');
+require('../css/reset.scss');
+
+
+// TODO
+// PR: https://github.com/ReactiveX/rxjs/blob/master/doc/decision-tree-widget/tree.yml#L122 "...time past since the last..."
+//
+// INTERMEDIATE TOPICS
+// === I have one existing Observable and
+// I want to group the values based on another Observable for opening a group, and an Observable for closing a group...
+// I want to start a new Observable for each value...
+// I want to wrap its messages with metadata...
+// I want to share a subscription between multiple subscribers...
+// I want to change the scheduler...
diff --git a/package.json b/package.json
index 3cbea77..4a13cad 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
"main": "webpack.config.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
- "dev": "webpack"
+ "dev": "webpack --watch"
},
"repository": {
"type": "git",
@@ -17,8 +17,14 @@
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-preset-es2015": "^6.24.0",
+ "css-loader": "^0.27.3",
"extract-text-webpack-plugin": "^2.1.0",
- "rx-lite": "^4.0.8",
- "webpack": "^2.3.2"
+ "file-loader": "^0.10.1",
+ "node-sass": "^4.5.1",
+ "rxjs": "^5.2.0",
+ "sass-loader": "^6.0.3",
+ "style-loader": "^0.16.0",
+ "webpack": "^2.3.2",
+ "webpack-notifier": "^1.5.0"
}
}
diff --git a/res/bird.svg b/res/bird.svg
new file mode 100644
index 0000000..0a38145
--- /dev/null
+++ b/res/bird.svg
@@ -0,0 +1,11 @@
+
+
+
+ Layer 1
+
+
+
+
+
+
\ No newline at end of file
diff --git a/res/dog.svg b/res/dog.svg
new file mode 100644
index 0000000..044c3c9
--- /dev/null
+++ b/res/dog.svg
@@ -0,0 +1,55 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/res/seagull.svg b/res/seagull.svg
new file mode 100644
index 0000000..3281b05
--- /dev/null
+++ b/res/seagull.svg
@@ -0,0 +1,428 @@
+
+
+
+
+
+
+
+
+
+
+
+]>
+
+
+
+
+
+
+
+
+
+
+
+
+ This work is licensed under the Adobe General Terms of Use http://www.adobe.com/legal/general-terms.html.
+
+
+
+
+ Adobe Systems Incorporated
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/res/seahorse.svg b/res/seahorse.svg
new file mode 100644
index 0000000..90f15bd
--- /dev/null
+++ b/res/seahorse.svg
@@ -0,0 +1,6 @@
+
+
+
+
+
\ No newline at end of file
diff --git a/res/sort.svg b/res/sort.svg
deleted file mode 100644
index 741bbbc..0000000
--- a/res/sort.svg
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
-image/svg+xml