The Marble Diagram—Our Secret Weapon

Now that we’ve learned about the advantages of using RxJS in Angular and how it makes dealing with some concepts smoother, let’s explore the marble diagram, which is very handy for understanding and visualizing the observable execution.

RxJS ships with more than 100 operators. Operators are one of the building blocks of RxJS. They are very useful for manipulating streams. All the reactive patterns discussed in this course are based on operators. And when it comes to explaining operators, it’s better to refer to a visual representation. And that’s why there are marble diagrams, thankfully!

What is a marble diagram?

A marble diagram is a visual representation of the operator’s execution. We’ll be using the marble diagram in all chapters to understand the behavior of RxJS operators. At first it might seem daunting, but it’s delightfully simple. First, we only have to understand the anatomy of the diagram, and then we can read and translate it. We’ll be able to understand any RxJS operator. So marble diagrams represent the execution of an operator.

Components of marble diagrams

Every marble diagram will include the following:

• Input observable: This represents one or many observables given as input to the operator.
• Operator: This represents the operator to be executed with its parameters.
• Output observable: This represents the observable produced after the operator’s execution.