{"id":23464836,"url":"https://github.com/fingerpich/rx-visualization","last_synced_at":"2025-04-14T10:33:20.298Z","repository":{"id":38809946,"uuid":"86256339","full_name":"fingerpich/rx-visualization","owner":"fingerpich","description":"Visualizes Reactive Streams with interactive diagrams to make it easy to learn Rxjs.","archived":false,"fork":false,"pushed_at":"2023-01-04T17:36:06.000Z","size":6639,"stargazers_count":64,"open_issues_count":29,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-27T23:41:52.684Z","etag":null,"topics":["learn-rxjs","reactivex","rx","rxjs","visualization"],"latest_commit_sha":null,"homepage":"https://fingerpich.github.io/rx-visualization/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fingerpich.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-03-26T18:46:08.000Z","updated_at":"2024-09-30T14:29:56.000Z","dependencies_parsed_at":"2022-09-18T11:10:26.159Z","dependency_job_id":null,"html_url":"https://github.com/fingerpich/rx-visualization","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerpich%2Frx-visualization","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerpich%2Frx-visualization/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerpich%2Frx-visualization/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fingerpich%2Frx-visualization/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fingerpich","download_url":"https://codeload.github.com/fingerpich/rx-visualization/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248862846,"owners_count":21173895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["learn-rxjs","reactivex","rx","rxjs","visualization"],"created_at":"2024-12-24T10:59:28.540Z","updated_at":"2025-04-14T10:33:20.278Z","avatar_url":"https://github.com/fingerpich.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Rx Visualization\n\nLearn to use Rx (RxJs, RxJava, RxSwift , ...) library with super intuitive interactive diagrams.\n\n[![Build Status][travis-image]][travis-url]\n[![dependencies-quality]( https://david-dm.org/fingerpich/rx-visualization.svg)](https://david-dm.org/fingerpich/rx-visualization)\n[![development-dependencies-quality](https://david-dm.org/fingerpich/rx-visualization/dev-status.svg)](https://david-dm.org/fingerpich/rx-visualization#info=devDependencies)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/3a50eeb043584886b60f961426032030)](https://www.codacy.com/app/zarei-bs/rx-studio?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=fingerpich/rx-studio\u0026amp;utm_campaign=Badge_Grade)\n\n## Visualizing Examples\n - [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)\n - [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}]})\n - [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}]})\n - [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}]})\n - [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}]})\n - [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}]})\n - [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}]})\n - [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}]})\n ![share operator](https://github.com/fingerpich/rx-visualization/blob/master/assets/share-operator.gif)\n - [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)\n - [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}]})\n![Hot vs cold observable](https://github.com/fingerpich/rx-visualization/blob/master/assets/hot-vs-cold-observables.gif)\n\n#### FAQ\n\nHow to create a new connection?\n\n\u003e Just hold the mouse on the corner of operator circles and drag it to the target node.\n\nWhat are shortcuts?\n\n\u003e press `shift` and type the operator's name to add it to the scene, use `enter` key to replay the animation.\n\n[travis-url]: https://travis-ci.org/fingerpich/rx-visualization\n[travis-image]: https://travis-ci.org/fingerpich/rx-visualization.png?branch=master\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingerpich%2Frx-visualization","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffingerpich%2Frx-visualization","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffingerpich%2Frx-visualization/lists"}