Skip to main content

Rx Visualizer - Animated playground for Rx Observables https://rxviz.com

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

Random error

Higher order Observable

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

License

MIT

Note: Special thanks to Misha Moroshko

Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.
Labels:

Comments

Post a Comment

Popular posts from this blog

Declarative router component for React.

http://strml.viewdocs.io/react-router-component Project Overview Usage is as simple as just returning a configured router component from your component's render() method: <Locations> <Location path="/" handler={MainPage} /> <Location path="/users/:username" handler={UserPage} /> <Location path="/search/*" handler={SearchPage} /> <Location path={/\/product\/([0-9]*)/} handler={ProductPage} /> </Locations> Having routes defined as a part of your component hierarchy allows to dynamically reconfigure routing based on your application state. For example you can return a different set of allowed locations for anonymous and signed-in users. React router component can dispatch based on location.pathname or location.hash if browser doesn't support History API (see hash routing ). Props can be passed through the router by setting them directly on each , or to all possible routes via a childPro...
Post a Comment
Read more

react-number-editor

A react component to easily use number inputs. This one acts like those in After Effects or similar software. Click and drag to slide the value. Double-click to enter manually a new value. Use your Up/Down keys to increment/decrement the value. Hold shift key to step by bigger value. Hold control/command key to step by smaller value. Example var React = require('react'); var NumberEditor = require('react-number-editor'); React.render( <NumberEditor min={0} max={1} step={0.01} decimals={2} onValueChange={onValueChange} />, document.body ); Usage Here are the list of properties available for the component: min (number) the minimum value. Default no minimum max (number) the maximum value. Default no maximum step (number) the step to increment when sliding and with up/down arrows. Default 1. stepModifier (number) how much to multiply/divide with the modifier keys (shift and control/command). Default is 10. decimals (nu...
Post a Comment
Read more

react-overlays

Utilities for creating robust overlay components demos and docs at: https://react-bootstrap.github.io/react-overlays/ Install npm install --save react-overlays All of these utilities have been abstracted out of react-bootstrap in order to provide better access to the generic implementations of these commonly needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, css or otherwise. If you are looking for more complete overlays, modals, or tooltips--something you can use right out of the box--check out react-bootstrap, which is (or soon will be) built on using these components. note: we are still in the process of abstracting out these components so the API's will probably change until we are sure that all of the bootstrap components can cleanly be implemented on top of them. Pre 1.0.0 breaking changes happen on the minor bump while feature and patches accompany a patch bump. Note: Spec...
Post a Comment
Read more