rxviz - Rx Visualizer - Animated playground for Rx Observables

  •        250

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. 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.

https://rxviz.com
https://github.com/moroshko/rxviz

Dependencies:

codemirror : ^5.26.0
color : ^1.0.3
copy-to-clipboard : ^3.0.6
d3-path : ^1.0.5
d3-scale : ^1.0.6
express : ^4.15.3
isomorphic-unfetch : ^1.0.0
lodash.clonedeep : ^4.5.0
lodash.get : ^4.4.2
lodash.isequal : ^4.5.0
lodash.isfunction : ^3.0.8
lodash.isplainobject : ^4.0.6
lodash.isundefined : ^3.0.1
lodash.omit : ^4.5.0
lodash.set : ^4.3.2
next : 3.0.0-beta9
prop-types : ^15.5.10
react : ^15.6.1
react-dom : ^15.6.1
react-ga : ^2.2.0
react-measure : ^2.0.2
react-numeric-input : moroshko/react-numeric-input
rxjs : ^6.2.1
tinyqueue : ^1.2.2

Tags
Implementation
License
Platform

   




Related Projects

rx-react - ReactJS bindings for RxJS

  •    Javascript

The StateStreamMixin allows to bind a component state to an RxJS Observable stream. The way to achieve the binding is to provide a getStateStream method on your component that returns an RxJS Observable, the StateStream mixin will automatically merge the state of your component with the values published by the returned observable. The subscription will be automaticly cleaned on component unmount. The LifecycleMixin allows you to consume React components lifecycle events as RxJS Observable. The LifecycleMixin will inject a property lifecycle to the component, that property contains an observable for each lifecycle events.

thisless-react - Reactive React application flow with React, RxJS and Redux

  •    

Reactive React application flow, with React, RxJS and Redux. Fully Reactive: With RxJS and React Reactive Class, components are made reactive and observable.

fluorine - [UNMAINTAINED] Reactive state and side effect management for React using a single stream of actions

  •    Javascript

Flexible state and side effect manager using RxJS for React. Fluorine provides you with easy, reactive state and side effect management, accumulating stores from streams of actions and side effects.

cycle-react - Rx functional interface to Facebook's React

  •    Javascript

An RxJS functional interface to Facebook's React. Cycle-React allows users to write React applications in functional style and represents their UIs as Observables. In addition, Cycle-React is immutable and optimizes the component updates internally by default.

RxDB - A realtime Database for the Web

  •    Javascript

RxDB is a realtime Database for the Web. It is reactive data-handling based on RxJS. It helps App to work even without internet. It supports Mango-Query, Encryption, Import/Export of database and lot more.


rx-flux - The Flux architecture with RxJS

  •    Javascript

The Flux architecture allows you to think your application as an unidirectional flow of data, this module aims to facilitate the use of RxJS Observable as basis for defining the relations between the different entities composing your application. This package is still highly experimental, see #10. Until it's finalized and published, use git url to install it with npm.

react-simple-maps - An svg map component built with and for React

  •    Javascript

An svg map component built with and for React. It allows the creation of pure react svg maps. React-simple-maps aims to make working with svg maps in react easier. It handles tasks such as panning, zooming and simple rendering optimization, and takes advantage of parts of d3-geo and topojson-client instead of relying on the entire d3 library.

rxvision - visualizer debugger for reactive streams

  •    HTML

Maintenance status: low. I'm not currently using this or RxJS, but I'm happy to review & merge pull requests if you want to make improvements. Completion status: Prototype. I got something working that worked well for demos, but wasn't really sufficient for large app-sized use cases. It also hasn't been updated to the latest versions of RxJS.

RxPY - Reactive Extensions for Python

  •    Python

Reactive Extensions for Python (RxPY) is a set of libraries for composing asynchronous and event-based programs using observable sequences and LINQ-style query operators in Python. Using Rx, developers represent asynchronous data streams with Observables, query asynchronous data streams using operators, and parameterize concurrency in data/event streams using Schedulers.Using Rx, you can represent multiple asynchronous data streams (that come from diverse sources, e.g., stock quote, Tweets, computer events, web service requests, etc.), and subscribe to the event stream using the Observer object. The Observable notifies the subscribed Observer instance whenever an event occurs.You can put various transformations in-between the source Observable and the consuming Observer as well.

redux-observable - RxJS middleware for action side effects in Redux using "Epics"

  •    Javascript

RxJS 5-based middleware for Redux. Compose and cancel async actions to create side effects and more.This has peer dependencies of rxjs@5.x.x and redux, which will have to be installed as well.

MobX - Simple, scalable state management.

  •    Javascript

MobX is a battle tested, simple and scalable state management library transparently applying functional reactive programming (TFRP). The Mobx design principle is very simple: Anything that can be derived from the application state, should be derived. Automatically. This includes the UI, data serialization, server communication, etc.

react-lifecycle-visualizer - Real-time visualizer for React lifecycle methods

  •    Javascript

An npm package (react-lifecycle-visualizer) for tracing & visualizing lifecycle methods of arbitrary React components. To trace a component, apply the higher-order component traceLifecycle to it, and all its lifecycle-method calls will show up in a replayable log component. Additionally, traced components may include a <this.props.LifecyclePanel/> element in their rendering to show a panel with lifecycle methods, which are highlighted when the corresponding log entry is selected.

svg-react-loader - Webpack SVG to React Component Loader

  •    Javascript

A webpack loader allowing for inline usage of a SVG as a React component, or for composing individual SVGs into larger ones. The latest version has been refactored to allow for receiving an SVG/XML string or an JSON object-tree representing an SVG. This allows for other loaders before svg-react to alter/update/remove nodes before reaching svg-react.

redux-rx - RxJS utilities for Redux.

  •    Javascript

selectState() should return a sequence of props that can be passed to the child. This provides a great integration point for sideways data-loading. Pretty simple, right? Notice how there are no event handlers to clean up, no componentWillReceiveProps(), no setState. Everything is just a sequence.

react-sparklines - Beautiful and expressive Sparklines React component

  •    Javascript

width, height - dimensions of the generated sparkline in the SVG viewbox. This will be automatically scaled (i.e. responsive) inside the parent container by default. svgWidth, svgHeight - If you want absolute dimensions instead of a responsive component set these attributes.

focal - Program user interfaces the FRP way.

  •    TypeScript

Type safe, expressive and composable state management for React applications. You can play with this example online on CodeSandbox.

react-native-svg-charts - 📈 One library to rule all charts for React Native 📊

  •    Javascript

A much improved decorator system has been introduced, allowing for greater flexibility and less complexity. See releases for more information. In order to not bloat this README to much we've moved some examples over to react-native-svg-charts-examples. There we will try to showcase the really cool things you can do with this library. This README will try to keep things as simple as possible so that everybody can get up and running as fast as possible.

marble - Marble

  •    TypeScript

Functional reactive HTTP middleware framework built on top of Node.js platform, TypeScript and RxJS library. If you don't have any experience with functional reactive programming, we strongly recommend to gain some basic overview first with ReactiveX intro or with The introduction to Reactive Programming you've been missing written by @andrestaltz.

Recharts - Redefined chart library built with React and D3

  •    Javascript

Recharts is a Redefined chart library built with React and D3. It can be easily deployed with React components. It has SVG support, lightweight depending only on some D3 submodules. All the components of Recharts are clearly separated.






We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.