Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/fingerpich/rx-visualization

Visualizes Reactive Streams with interactive diagrams to make it easy to learn Rxjs.
https://github.com/fingerpich/rx-visualization

learn-rxjs reactivex rx rxjs visualization

Last synced: 20 days ago
JSON representation

Visualizes Reactive Streams with interactive diagrams to make it easy to learn Rxjs.

Awesome Lists containing this project

README 

        
# Rx Visualization



Learn to use Rx (RxJs, RxJava, RxSwift , ...) library with super intuitive interactive diagrams.



[![Build Status][travis-image]][travis-url]

[![dependencies-quality]( https://david-dm.org/fingerpich/rx-visualization.svg)](https://david-dm.org/fingerpich/rx-visualization)

[![development-dependencies-quality](https://david-dm.org/fingerpich/rx-visualization/dev-status.svg)](https://david-dm.org/fingerpich/rx-visualization#info=devDependencies)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/3a50eeb043584886b60f961426032030)](https://www.codacy.com/app/zarei-bs/rx-studio?utm_source=github.com&utm_medium=referral&utm_content=fingerpich/rx-studio&utm_campaign=Badge_Grade)



## Visualizing Examples

 - [Visualizes use of Range and Last operator](https://fingerpich.github.io/rx-visualization/load/%7B%22nodes%22:%5B%7B%22id%22:2,%22x%22:348,%22y%22:233,%22node_type%22:%22Range%22,%22properties%22:%7B%22start%22:0,%22count%22:3%7D%7D,%7B%22id%22:3,%22x%22:606,%22y%22:234,%22node_type%22:%22Last%22,%22properties%22:%7B%22filter%22:0%7D%7D,%7B%22id%22:4,%22x%22:480,%22y%22:413,%22node_type%22:%22Subscribe%22,%22properties%22:%7B%7D%7D%5D,%22edges%22:%5B%7B%22source%22:2,%22target%22:3%7D,%7B%22source%22:3,%22target%22:4%7D%5D%7D)

 - [Visualizes Interval and First operator](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":649.5,"y":279,"node_type":"Subscribe","properties":{}},{"id":2,"x":389,"y":332,"node_type":"Interval","properties":{"interval":500}},{"id":3,"x":570,"y":483,"node_type":"First","properties":{"filter":0}}],"edges":[{"source":2,"target":3},{"source":3,"target":1}]})

 - [Visualizes Zip observables in Rx](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":269.5,"y":284,"node_type":"Subscribe","properties":{}},{"id":2,"x":625,"y":126,"node_type":"Range","properties":{"start":10,"count":9}},{"id":3,"x":628,"y":422,"node_type":"Interval","properties":{"interval":500}},{"id":5,"x":477,"y":284,"node_type":"Zip","properties":{"zipFunction":0}}],"edges":[{"source":2,"target":5},{"source":3,"target":5},{"source":5,"target":1}]})

 - [Visualizes use of Delay operator in Rx](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":430,"y":333,"node_type":"Subscribe","properties":{}},{"id":2,"x":329,"y":172,"node_type":"Delay","properties":{"delay":1000}},{"id":3,"x":517,"y":86,"node_type":"Range","properties":{"start":0,"count":3}},{"id":4,"x":667,"y":327,"node_type":"Subscribe","properties":{}}],"edges":[{"source":2,"target":1},{"source":3,"target":4},{"source":3,"target":2}]})

 - [Visualizes multiple observer for an observable](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":834,"y":366,"node_type":"Subscribe","properties":{}},{"id":2,"x":530,"y":103,"node_type":"Range","properties":{"start":0,"count":3}},{"id":3,"x":619,"y":383,"node_type":"Subscribe","properties":{}},{"id":4,"x":423,"y":378,"node_type":"Subscribe","properties":{}},{"id":5,"x":306,"y":162,"node_type":"Map","properties":{"mapFunc":0}},{"id":6,"x":197,"y":343,"node_type":"Subscribe","properties":{}},{"id":7,"x":752,"y":182,"node_type":"Last","properties":{"filter":0}}],"edges":[{"source":2,"target":4},{"source":2,"target":3},{"source":2,"target":5},{"source":5,"target":6},{"source":7,"target":1},{"source":2,"target":7}]})

 - [Visualizes Chaining some operators](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":579.5,"y":462,"node_type":"Subscribe","properties":{}},{"id":3,"x":579,"y":168,"node_type":"Filter","properties":{"filter":"3"}},{"id":4,"x":680,"y":311,"node_type":"First","properties":{"filter":0}},{"id":5,"x":399,"y":167,"node_type":"Map","properties":{"mapFunc":"1"}},{"id":7,"x":399,"y":471,"node_type":"Range","properties":{"start":1,"count":16}},{"id":8,"x":289,"y":312,"node_type":"Filter","properties":{"filter":"1"}}],"edges":[{"source":5,"target":3},{"source":3,"target":4},{"source":4,"target":1},{"source":7,"target":8},{"source":8,"target":5}]})

 - [Visualizes Repeat operator](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":318.60068766276044,"y":414.82672119140625,"node_type":"Subscribe","properties":{}},{"id":2,"x":326.7895202636719,"y":197.31097412109375,"node_type":"Repeat","properties":{"count":3}},{"id":3,"x":556.8680419921875,"y":405.0487365722656,"node_type":"Delay","properties":{"delay":1000}},{"id":4,"x":555.0951538085938,"y":187.97591400146484,"node_type":"Range","properties":{"start":0,"count":6}}],"edges":[{"source":3,"target":2},{"source":2,"target":1},{"source":4,"target":3}]})

 - [Visualizes a Hot Observable with Share operator](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":247.66666666666674,"y":212.27035522460938,"node_type":"Subscribe","properties":{}},{"id":3,"x":663.2308959960938,"y":215.76333618164062,"node_type":"Subscribe","properties":{}},{"id":5,"x":453,"y":446,"node_type":"Share","properties":{}},{"id":6,"x":454,"y":86,"node_type":"Timer","properties":{"delay":200,"interval":500}},{"id":7,"x":455,"y":270,"node_type":"Take","properties":{"itemCount":21}}],"edges":[{"source":5,"target":1},{"source":5,"target":3},{"source":6,"target":7},{"source":7,"target":5}]})

 ![share operator](https://github.com/fingerpich/rx-visualization/blob/master/assets/share-operator.gif)

 - [Visualizes Multiplication over time using Scan operator](https://fingerpich.github.io/rx-visualization/load/%7B"nodes":%5B%7B"id":1,"x":276.6666666666667,"y":180,"node_type":"Subscribe","properties":%7B%7D%7D,%7B"id":2,"x":399,"y":376,"node_type":"Scan","properties":%7B"accumulator":"1","seed":1%7D%7D,%7B"id":3,"x":636,"y":125,"node_type":"Interval","properties":%7B"interval":500%7D%7D,%7B"id":4,"x":548,"y":224,"node_type":"Skip","properties":%7B"itemCount":1%7D%7D%5D,"edges":%5B%7B"source":2,"target":1%7D,%7B"source":3,"target":4%7D,%7B"source":4,"target":2%7D%5D%7D)

 - [Visualizes hot vs cold observables](https://fingerpich.github.io/rx-visualization/load/{"nodes":[{"id":1,"x":134.66666666666669,"y":502,"node_type":"Subscribe","properties":{}},{"id":2,"x":320,"y":494,"node_type":"Subscribe","properties":{}},{"id":3,"x":231,"y":74,"node_type":"Timer","properties":{"delay":200,"interval":500}},{"id":4,"x":233,"y":219.450439453125,"node_type":"Take","properties":{"itemCount":2}},{"id":5,"x":231.7747802734375,"y":365.5900573730469,"node_type":"Share","properties":{}},{"id":6,"x":771,"y":460,"node_type":"Subscribe","properties":{}},{"id":7,"x":680.6756591796875,"y":115,"node_type":"Timer","properties":{"delay":200,"interval":500}},{"id":8,"x":685.1260986328125,"y":289.2252197265625,"node_type":"Take","properties":{"itemCount":2}},{"id":9,"x":582,"y":462,"node_type":"Subscribe","properties":{}}],"edges":[{"source":5,"target":2},{"source":5,"target":1},{"source":4,"target":5},{"source":3,"target":4},{"source":7,"target":8},{"source":8,"target":6},{"source":8,"target":9}]})

![Hot vs cold observable](https://github.com/fingerpich/rx-visualization/blob/master/assets/hot-vs-cold-observables.gif)



#### FAQ



How to create a new connection?



> Just hold the mouse on the corner of operator circles and drag it to the target node.



What are shortcuts?



> press `shift` and type the operator's name to add it to the scene, use `enter` key to replay the animation.



[travis-url]: https://travis-ci.org/fingerpich/rx-visualization

[travis-image]: https://travis-ci.org/fingerpich/rx-visualization.png?branch=master