Use Marble Diagrams to Understand RxJS Operators

André Staltz
InstructorAndré Staltz
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 3 years ago

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. To show this we use Marble Diagrams to easily explain what is happening. Throughout this course we are going to see the so-called marble diagrams.

🚨 Since we are importing interval from RxJS, we don't need to preface our Observables with Rx.Observable. Observable.create is deprecated, use new Observable instead. You can no longer .{operator}, you need to .pipe({operator}) instead.

[00:00] As we're going to see in upcoming lessons, there are many operators available. 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.

[00:12] Instead of using sentences in English to explain how they work, a diagram often works best. Throughout this course, we're going to see the so-called marble diagrams. They're really handy and easy to draw. For instance, here's how they look like in ASCII form inside these comments.

[00:28] We're going to draw the marble diagram for one observable, this observable interval of one second. They always look like this. They start with these dashes to indicate time, where time starts from the left side and it progresses towards the right.

[00:45] If we have lowercase characters like these, they will represent values delivered to the If they are numbers, they are also values. We're going to consider them to represent values. If the character is a pipe character, that represents the completed notification. If it's the uppercase X, then that represents an error.

[01:13] That's everything that an observable can deliver -- values, completed, or error. Values would be in the range of zero and nine, those numbers, or A to Z as letters. Then, completed is the pipe and X is the error.

[01:36] Let's draw the observable marble diagram for interval. Let's consider one second to be four dashes. This is really arbitrary. We're just choosing an amount of dashes to mean one second. After one second, delivers the value zero, then delivers one, then delivers two, three, four, five. Then, we can also use ellipses here to indicate that this just continues indefinitely.

[02:03] There's a special case when we have synchronous values being delivered. For instance, if we use the observable of, then these values will be immediately delivered, so synchronously, when we subscribe to that observable.

[02:18] That is different to represent, because we use the parentheses to indicate that all of the values here in this parentheses group will be delivered synchronously. In case we had this special observable that after delivering one, two, three, four, it would deliver five after one second and six after another second, then we would represent that like this.

[02:44] Just to indicate that these happened synchronously, but five did not happen in that synchronous execution. It happened after a while. Just keep in mind that when we use parentheses, we mean that all of these are actually grouped inside one instantaneous moment.

[03:07] Marble diagrams are also handy for representing operators. We represent operators by using one marble diagram for an observable at the top for the source. Then, we use text here just to indicate what is the operator that we're using, and we indicate the result observable at the bottom here.

[03:31] Let's see how that would look like if we have interval of one second. If that is foo, as our source, let's even write here. Foo, we can do that, and bar is the result. Let's say we're multiplying by two. Then, after one second, we deliver zero on foo, two, three, etc. Zero multiplied by two is zero, two, four, six, and etc.

[04:10] Just keep in mind that at the top, we have the source observable. In the middle, we have the operator and its arguments. At the bottom, we have the result observable.

[04:20] This is how we will indicate most of our marble diagrams for operators in order to understand better how they work.

~ 36 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today