Welcome to my showcase of RxJS operators and other functions (hereafter referred to as "operators" for convenience, though not strictly correct). Visualizations of RxJS operators are shown using the operators themselves.
You can click on an operator on the menu to the left to see the visualization for that operator. If you wish to see multiple operators at a time, you can click a checkbox next to an operator to display that operator at the same time as the other already-selected operators. The operators are displayed in order of your selection.
Operators are stored in the pathname (url) of your browser so you can select and share operators you'd like other people to see.
Note: deprecated operators are not included. If you can't find an operator here that you're using, it's probably deprecated.
See the RxJS API documentation for more specific information.
Don't know where to start? Try some of my favorites:
Most of the visualizations here work off of an interval emitting every second. The visualization will show the code that sets up the example Observables and then the marble diagram (visualization) in order of the Observable unless otherwise specified. For example:
// The output of this is the first marble diagram below input = timer(0, 1000).pipe(take(3)) // The output of this is the second marble diagram below output = this.input.pipe(mapNumberToChar)
Sometimes an Observable will emit multiple values at once or very close together. This is a bit tough to visualize, and it's something that can be improved. For now, the marble displays are blended like so:
It can be a bit tough to tell exactly what's going on with overlapping marble values, but at least this gives a clue. "Inspect Element" can help more for now.