D3 Examples - JS Bin // source https://jsbin.com/posewam

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <br />
  <br />
​
  <button>click me!</button>
  <div></div>
  <input type="text" id="input1">
  <input type="text" id="input2">
  <p>Combined Value: <span></span></p>
<script src="https://unpkg.com/@reactivex/rxjs@5.4.3/dist/global/rx.js"></script>
<script id="jsbin-javascript">
"use strict";
​
// var button = document.querySelector('button');
// // button.addEventListener('click', () =>{ console.log('Clicked!')});
// Rx.Observable.fromEvent(button, 'click')
//   .throttleTime(100)
//   .map((data) => data.clientX)
//   .subscribe((coordinate) => console.log(coordinate));
​
// var observer = {
//   next: function(value) {
//     console.log(value);
//   },
//   error: function(error) {
//     console.log(error);
//   },
//   complete: function() {
//     console.log('Completed!');
//   }
// };
​
// Rx.Observable.create(function(obs) {
// //   obs.next('value 1');
// //   setTimeout(function() {
// //     obs.error('error')
// //   },2000);
// //   obs.next('val2');
//   button.onclick = function(event) {
//     obs.next(event);
//   }
// })
//   .subscribe(observer);
​
// setTimeout(function() {
//   subscription.unsubscribe();
// },5000);
​
//OPERATORS
​
// var observable = Rx.Observable.interval(1000);
// var observer = {
//   next: function(value) {
//     console.log(value);
//   }
// };
​
// observable.map(function(value) {
//   return value*2;
// })
//   .throttleTime(2000)
//   .subscribe(observer);
​
// SUBJECTS
​
// var subject = new Rx.Subject();
​
// subject.subscribe({
//   next: function(value) {
//     console.log(value);
//   },
//   error: function(error) {
//     console.log(error);
//   },
//   complete: function() {
//     console.log('completed');
//   }
// });
​
// FILTER
​
// var observable = Rx.Observable.interval(1000);
​
// observable
//   .filter(function(value) {
//     return value % 2 == 0;
//   })
//   .subscribe({
//   next: function(value) {
//     console.log(value);
//   },
//   error: function(error) {
//     console.log(error);
//   }
// });
​
// debounceTime() how much to wait before emitting
// a new value
// debounceTime different from throttleTime because it emits only when no event takes place
// distinctUntilChanged filter out values that are equal to the last ones
​
// var input = document.querySelector('input');
// var observable =
//     Rx.Observable.fromEvent(input, 'input');
​
// observable
//   .map(event => event.target.value)
//   .debounceTime(500)
//   .distinctUntilChanged()
//   .subscribe({
//     next: function(value) {
//       console.log(value);
//     }
// });
​
// reduce() and scan()
// reduce works exactly like reduce from js
// scan prints on each step the reduce output
​
// pluck()
​
// event.target.value : take care
// before at distinctUntilChanged, we had to put the map function before
// because the event is different, only the value is the same
// pluck takes in string parameters that show which property of the object
// you want to pluck out
​
// var input = document.querySelector('input');
// var observable =
//     Rx.Observable.fromEvent(input, 'input');
​
// observable
//   .pluck('target', 'value')
//   .debounceTime(500)
//   .distinctUntilChanged()
//   .subscribe({
//     next: function(value) {
//       console.log(value);
//     }
// });
​
// mergeMap()
​
// var input1 = document.querySelector('#input1');
// var input2 = document.querySelector('#input2');
​
// var span = document.querySelector('span');
​
// var obs1 = Rx.Observable.fromEvent(input1, 'input');
​
// var obs2 = Rx.Observable.fromEvent(input2, 'input');
​
// obs1.mergeMap(
//   event1 => {
//     return obs2.map(
//       event2 => event1.target.value + ' ' +
//                 event2.target.value
//     )
//   }
// ).subscribe(
//     combinedValue => span.textContent = combinedValue
//   );
​
// switchMap()
​
// the problem is that you have to close observables at some time
// they will go on indefinite time
// example: bad!!
​
// var button = document.querySelector('button');
​
// var obs1 = Rx.Observable.fromEvent(button, 'click');
// var obs2 = Rx.Observable.interval(1000);
​
// obs1.subscribe(
//   (event) => obs2.subscribe(
//       (value) => console.log(value)
//   )
// );
​
// working code
​
// var button = document.querySelector('button');
​
// var obs1 = Rx.Observable.fromEvent(button, 'click');
// var obs2 = Rx.Observable.interval(1000);
​
// obs1.switchMap(
//   event => {
//     return obs2
//   }
// ).subscribe(
//   (value) => console.log(value)
// );
​
// BehaviorSubject
// takes in an argument
// used like a variable but which you want to change at some point
// and inform other parts of the application about that change
​
// var clickEmitted = new Rx.BehaviorSubject('Not Clicked!');
// var button = document.querySelector('button');
// var div = document.querySelector('div');
​
// button.addEventListener('click', () =>
//                        clickEmitted.next('Clicked!'));
​
// clickEmitted.subscribe(
//   (value) => div.textContent = value
// );
</script>
​
​
​
<script id="jsbin-source-javascript" type="text/javascript">// var button = document.querySelector('button');
// // button.addEventListener('click', () =>{ console.log('Clicked!')});
// Rx.Observable.fromEvent(button, 'click')
//   .throttleTime(100)
//   .map((data) => data.clientX)
//   .subscribe((coordinate) => console.log(coordinate));
​
// var observer = {
//   next: function(value) {
//     console.log(value);
//   },
//   error: function(error) {
//     console.log(error);
//   },
//   complete: function() {
//     console.log('Completed!');
//   }
// };
​
// Rx.Observable.create(function(obs) {
// //   obs.next('value 1');
// //   setTimeout(function() {
// //     obs.error('error')
// //   },2000);
// //   obs.next('val2');
//   button.onclick = function(event) {
//     obs.next(event);
//   }
// })
//   .subscribe(observer);
​
// setTimeout(function() {
//   subscription.unsubscribe();
// },5000);
​
​
​
​
//OPERATORS
​
// var observable = Rx.Observable.interval(1000);
// var observer = {
//   next: function(value) {
//     console.log(value);
//   }
// };
​
​
// observable.map(function(value) {
//   return value*2;
// })
//   .throttleTime(2000)
//   .subscribe(observer);
​
​
​
​
​
// SUBJECTS
​
// var subject = new Rx.Subject();
​
// subject.subscribe({
//   next: function(value) {
//     console.log(value);
//   },
//   error: function(error) {
//     console.log(error);
//   },
//   complete: function() {
//     console.log('completed');
//   }
// });
​
​
​
​
​
// FILTER
​
// var observable = Rx.Observable.interval(1000);
​
​
// observable
//   .filter(function(value) {
//     return value % 2 == 0;
//   })
//   .subscribe({
//   next: function(value) {
//     console.log(value);
//   }, 
//   error: function(error) {
//     console.log(error);
//   }
// });
​
​
// debounceTime() how much to wait before emitting
// a new value
// debounceTime different from throttleTime because it emits only when no event takes place
// distinctUntilChanged filter out values that are equal to the last ones
​
// var input = document.querySelector('input');
// var observable = 
//     Rx.Observable.fromEvent(input, 'input');
​
// observable
//   .map(event => event.target.value)
//   .debounceTime(500)
//   .distinctUntilChanged()
//   .subscribe({
//     next: function(value) {
//       console.log(value);
//     }
// });
​
​
​
​
// reduce() and scan()
// reduce works exactly like reduce from js
// scan prints on each step the reduce output
​
​
​
​
​
​
// pluck()
​
// event.target.value : take care 
// before at distinctUntilChanged, we had to put the map function before
// because the event is different, only the value is the same
// pluck takes in string parameters that show which property of the object
// you want to pluck out
​
​
​
// var input = document.querySelector('input');
// var observable = 
//     Rx.Observable.fromEvent(input, 'input');
​
// observable
//   .pluck('target', 'value')
//   .debounceTime(500)
//   .distinctUntilChanged()
//   .subscribe({
//     next: function(value) {
//       console.log(value);
//     }
// });
​
​
​
​
​
// mergeMap()
​
​
// var input1 = document.querySelector('#input1');
// var input2 = document.querySelector('#input2');
​
// var span = document.querySelector('span');
​
// var obs1 = Rx.Observable.fromEvent(input1, 'input');
​
// var obs2 = Rx.Observable.fromEvent(input2, 'input');
​
// obs1.mergeMap(
//   event1 => {
//     return obs2.map(
//       event2 => event1.target.value + ' ' + 
//                 event2.target.value
//     )
//   }
// ).subscribe(
//     combinedValue => span.textContent = combinedValue
//   );
​
​
​
​
// switchMap()
​
// the problem is that you have to close observables at some time
// they will go on indefinite time
// example: bad!!
​
// var button = document.querySelector('button');
​
// var obs1 = Rx.Observable.fromEvent(button, 'click');
// var obs2 = Rx.Observable.interval(1000);
​
// obs1.subscribe(
//   (event) => obs2.subscribe(
//       (value) => console.log(value)
//   )
// );
​
// working code
​
// var button = document.querySelector('button');
​
// var obs1 = Rx.Observable.fromEvent(button, 'click');
// var obs2 = Rx.Observable.interval(1000);
​
// obs1.switchMap(
//   event => {
//     return obs2
//   }
// ).subscribe(
//   (value) => console.log(value)
// );
​
​
​
// BehaviorSubject
// takes in an argument
// used like a variable but which you want to change at some point
// and inform other parts of the application about that change
​
​
​
// var clickEmitted = new Rx.BehaviorSubject('Not Clicked!');
// var button = document.querySelector('button');
// var div = document.querySelector('div');
​
// button.addEventListener('click', () =>
//                        clickEmitted.next('Clicked!'));
​
// clickEmitted.subscribe(
//   (value) => div.textContent = value
// );
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
</script></body>
</html>
    