Awesome Open Source
Awesome Open Source

RxViz logo

Project Status

Looking for maintainers!

Unfortunately, I don't have the time to maintain this project anymore. If you are interested to help, please reach out to me on Twitter @moroshko.

Description

RxViz simply visualizes a given Observable. Your JavaScript code will be evaluated, and, if the last expression is an Observable, a nice animated visualization will appear.

You can also:

  • Control the speed of the animation by modifying the Time window input.
  • Copy the resulting SVG to include in your next Rx presentation.
  • Share the visualization with your friends.

Examples

Basic interval

rxviz-basic-interval

Random error

rxviz-random-error

Higher order Observable

rxviz-higher-order-observable

Pause and resume

rxviz-pause-and-resume

How does it work?

RxViz treats the evaluated Observable as a black box. We rely only on the fact that Observable emits values over time. RxViz doesn't rely on the internals of RxJS. This will allow us to visualize TC39 Observables in the future.

Technically, we subscribe to the given Observable, and, once a value is observed, we simply add it to the visualization. It's that simple!

How about higher order Observables?

No different. Since a higher order Observable is simply an Observable whose values are Observables themselves, we just repeat the process recursively.

When an Observable value is seen, we subscribe to it. At this point, we create a new "branch" in the visualization.

Thanks

Running locally

npm install
npm run dev

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
javascript (70,847
react (5,549
animation (1,073
visualization (841
svg (574
reactive (285
stream (242
rxjs (160
observable (62
visualizer (51
rx (50