So far, we have shown how to create a stream and use some very basic operators on it to change what values get emitted. We also introduced how to inspect your stream without changing it by using the do() operator. Not all operators are as easy to understand as the map(), filter(), and do() operators. There are different tactics you can use to try to understand what each operator does so you know when to use them. Using the do() operator is one way, but there is a graphical approach you can take. This approach is known as a marble diagram. It consists of an arrow that represents time passing from left to right. There are circles, or marbles, on this arrow that represent emitted values. The marbles have a value in them, but the distance between the marbles might also describe what is happening over time. A marble diagram usually consists of at least two arrows with marbles on them, as well as an operator. The idea is to represent what happens to a stream when an operator is applied. The second arrow usually represents the resulting stream.
Here's an example of a marble diagram:
Most operators in RxJS are depicted by a marble diagram on the site RxMarbles: http://rxmarbles.com/. This is a truly great resource to quickly gain an understanding of what operators do. However, to truly understand RxJS you need to code; there is no getting around it. There are different ways of doing that of course. You can easily set up your own project and install RxJS from NPM, refer to it through a CDN link, or you can use a page such as JS Bin (www.jsbin.com), which gives you the ability to easily add RxJS as a library and allows you to start coding straight away. It looks something like this:
JS Bin makes it easy to start, but wouldn't it be great if we could combine marble diagrams and JS Bin, and get a graphical representation of what you code, when you code? You can get just that with RxFiddle: http://rxfiddle.net/. You can enter your code, click Run, and you are shown a marble diagram of what you just coded, which will look like this:
