Reactive Programming with RxJS

Visualizing Observables

You’re about to learn some of the operators that we’ll use most frequently in our RxJS programs. Talking about what operators do to a sequence can feel abstract. To help developers understand operators in an easy way, we’ll use a standard visual representation for sequences, called marble diagrams. They visually represent asynchronous data streams, and you will find them in every resource for RxJS.

Let’s take the range operator, which returns an Observable that emits integers within a specified range: Rx.Observable.range(1, 3);

The marble diagram for it looks like this:

The long arrow represents the Observable, and ...