[RxJS] Marble diagrams in ASCII form

There are many operators available, and in order to understand them we need to have a simple way of communicating how they transform a source Observable into a result Observable over time. Throughout this course we are going to see the so-called marble diagrams.

 

var foo = Rx.Observable.interval(1000);

/*

foo: ---0---1---2---3--...
        multiplyBy(2)
bar: ---0---2---4---6--...

*/

function multiplyBy(multiplier) {
  var source = this;
  var result = Rx.Observable.create(function subscribe(observer) {
    source.subscribe(
      function (x) { observer.next(x * multiplier); },
      function (err) { observer.error(err); },
      function () { observer.complete(); }
    );
  });
  return result;
}

Rx.Observable.prototype.multiplyBy = multiplyBy;

var bar = foo.multiplyBy(2);

bar.subscribe(
  function (x) { console.log('next ' + x); },
  function (err) { console.log('error ' + err); },
  function () { console.log('done'); },
);