vizflow

vizflow.js - a render-loop library written using EcmaScript.6 (ES6) with no other external dependencies. Vizflow is a light-weight library for adding transition effects and interactive visualizations to HTML5 documents with a simpler design compared to other popular interactive visualization libraries like D3js.

Instead of focusing on specific applications such as data visualization, it only provides an engine for running animations, transition effects, simulations, games, etc., depending on the application.

Vizflow uses the symbol $Z (read as "bling Z" or "dollar Z") for defining its namespace.

This is a work in progress. Keeping the library simple-to-use, small, and efficient in terms of performance are the main goals of this project. Feedback wanted.

Example

The file index.html included in this repository contains a demo showing an interactive stochastic dynamics simulation with three particles in a rectangular domain rendered as colored circles using either Canvas or SVG.

Clicking on a circle will randomly change its 2D (x, y) position and radius by sampling from appropriate uniform distributions for each of these variables.

Modify the index.html file to create your own interactive visualizations, simulations, and games with maximal flexibility and minimal overhead.

Load the index.html file locally to test the code in a development environment (requires a local web server such as live-server to be running).

The "examples" subdirectory contains other examples. The pH visualization/game example is described here and the Election Fighter example is described here.

The compiled examples can also be loaded without a local server by going to the index.html files within the subdirectories contained in examples.

Compile build.js using jspm bundle-sfx --minify src/vizflow for running in a production environment. This github preview page has a demo showing the compiled version using Canvas rending.

vizflow / vizflow

vizflow

Example

References