Visualizing Observables

We’re about to learn of 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. These diagrams visually represent asynchronous data streams, and we will find them in every resource for RxJS.

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

Note: The first parameter indicates the starting number and the second parameter corresponds to the total count.

The marble diagram for it will look like this: