{"id":13658674,"url":"https://github.com/moroshko/rxviz","last_synced_at":"2025-05-15T10:07:24.825Z","repository":{"id":41583724,"uuid":"93603610","full_name":"moroshko/rxviz","owner":"moroshko","description":"Rx Visualizer - Animated playground for Rx Observables","archived":false,"fork":false,"pushed_at":"2024-09-06T02:53:24.000Z","size":397,"stargazers_count":1587,"open_issues_count":30,"forks_count":94,"subscribers_count":25,"default_branch":"master","last_synced_at":"2025-05-12T01:06:15.070Z","etag":null,"topics":["animation","observable","react","reactive","rx","rxjs","stream","svg","visualization","visualizer"],"latest_commit_sha":null,"homepage":"https://rx-viz.vercel.app","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/moroshko.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-06-07T07:05:33.000Z","updated_at":"2025-04-15T06:30:10.000Z","dependencies_parsed_at":"2024-10-15T00:21:00.002Z","dependency_job_id":"1c50acef-f424-45d6-8197-04166d127e15","html_url":"https://github.com/moroshko/rxviz","commit_stats":{"total_commits":62,"total_committers":5,"mean_commits":12.4,"dds":"0.12903225806451613","last_synced_commit":"5985d15d8092f2cbef9ea8b5cf7f9d17f69a9fa7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Frxviz","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Frxviz/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Frxviz/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/moroshko%2Frxviz/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/moroshko","download_url":"https://codeload.github.com/moroshko/rxviz/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254319720,"owners_count":22051073,"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":["animation","observable","react","reactive","rx","rxjs","stream","svg","visualization","visualizer"],"created_at":"2024-08-02T05:01:01.594Z","updated_at":"2025-05-15T10:07:19.811Z","avatar_url":"https://github.com/moroshko.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# \u003ca href='https://rx-viz.vercel.app'\u003e\u003cimg src='https://user-images.githubusercontent.com/259753/26937967-b6bd7262-4c27-11e7-97f3-29878d7ec468.png' height='60' alt='RxViz logo'\u003e\u003c/a\u003e\n\n- [Project Status](#project-status)\n- [Description](#description)\n- [Examples](#examples)\n  - [Basic Interval](#basic-interval)\n  - [Random error](#random-error)\n  - [Higher order Observable](#higher-order-observable)\n  - [Pause and resume](#pause-and-resume)\n- [How does it work?](#how-does-it-work)\n  - [How about higher order Observables?](#how-about-higher-order-observables)\n- [Thanks](#thanks)\n- [Running locally](#running-locally)\n\n## Project Status\n\nLooking for maintainers!\n\nUnfortunately, 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](https://twitter.com/moroshko).\n\n## Description\n\nRxViz 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.\n\nYou can also:\n\n- Control the speed of the animation by modifying the **Time window** input.\n- Copy the resulting SVG to include in your next Rx presentation.\n- Share the visualization with your friends.\n\n## Examples\n\n### Basic interval\n\n[![rxviz-basic-interval](https://user-images.githubusercontent.com/259753/26908333-f27e17f8-4bae-11e7-87b8-3851778e9cf6.gif)](https://rx-viz.vercel.app/examples/basic-interval)\n\n### Random error\n\n[![rxviz-random-error](https://user-images.githubusercontent.com/259753/27258497-e7eeb36a-53b0-11e7-8399-8e3cea31f7e6.gif)](https://rx-viz.vercel.app/examples/random-error)\n\n### Higher order Observable\n\n[![rxviz-higher-order-observable](https://user-images.githubusercontent.com/259753/26908347-fefb6fa8-4bae-11e7-8d06-0658e3cf1e17.gif)](https://rx-viz.vercel.app/examples/higher-order-observable)\n\n### Pause and resume\n\n[![rxviz-pause-and-resume](https://user-images.githubusercontent.com/259753/26908310-bb0f8540-4bae-11e7-9bb7-9520ec567fdf.gif)](https://rx-viz.vercel.app/examples/pause-and-resume)\n\n## How does it work?\n\nRxViz 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](https://github.com/tc39/proposal-observable) in the future.\n\nTechnically, we subscribe to the given Observable, and, once a value is observed, we simply add it to the visualization. It's that simple!\n\n### How about higher order Observables?\n\nNo different. Since a higher order Observable is simply an Observable whose values are Observables themselves, we just repeat the process recursively.\n\nWhen an Observable value is seen, we subscribe to it. At this point, we create a new \"branch\" in the visualization.\n\n## Thanks\n\n- [Vedran Arnautović](https://twitter.com/vedranio) for designing [rx-viz.vercel.app](https://rx-viz.vercel.app)\n- [Yuki Izumi](https://github.com/kivikakk) for always being helpful with random technical questions\n- [zeit.co](https://zeit.co) for outstanding developer experience with [next.js](https://github.com/zeit/next.js) and [domains](https://zeit.co/domains)\n- [André Staltz](https://twitter.com/andrestaltz) for creating [rxmarbles.com](http://rxmarbles.com) and [awesome RxJS courses on egghead.io](https://egghead.io/courses#technology-rx)\n- [Canny](https://canny.io) for collecting [your feedback](https://rx-viz.vercel.app/feedback)\n\n## Running locally\n\n```bash\nnpm install\nnpm run dev\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoroshko%2Frxviz","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmoroshko%2Frxviz","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmoroshko%2Frxviz/lists"}