Popularity
1.9
Growing
Activity
4.9
-
329
10
14

Description

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.

Code Quality Rank: L2
Programming language: JavaScript
Tags: Data Visualization    

vizflow alternatives and similar libraries

Based on the "Data Visualization" category

Do you think we are missing an alternative of vizflow or a related project?

Add another 'Data Visualization' Library

README

Vizflow

vizflow.js - a render-loop library written using EcmaScript.6 (ES6) with no other external dependencies.

Vizflow is a relatively small 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.

Following the DRY and KISS guidelines, keeping the library simple-to-use, small, and efficient in terms of performance, especially on mobile devices, are the main goals of this project.

Examples

The file index.html included in this repository contains a demo, used for our homepage. 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 the source code to the examples presented on the homepage.

Three Circles

The "three circles" examples showing an interactive stochastic dynamics simulation with three particles in a rectangular domain rendered as colored circles, using both Canvas and 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.

pH Visualization/Game

The pH visualization is a learning game idea that is described here.

Election Fighter

Election Fighter is a game described here.

Prime Fruit

Prime Fruit is an idea for an educational game teaching the player about prime numbers and prime factorizations, and is described here.

Ball

This is a very basic example of sprite based animation showing a ball bounding inside a Canvas. It needs to be expanded to be used for performance testing by running with different numbers of balls and analyzing framerate degradation.

Deployment

Compile vizflow.js using jspm bundle-sfx --minify src/vizflow vizflow.js for running in a production environment. Similarly, run jspm bundle-sfx --minify src/module/vizflow-helper vizflow-helper.js to build the production-ready versions of the helper modules.

References

<!---

For example, when using d3 we might want to visualize one dataset representing intervals as lines and another representing points as circles, and then have them both fade-in.

Using d3, this would normally lead to code snippets like:

d3.selectAll('.blue_circle')
  .data(myData1)
  .enter()
  .append('circle')
  .attr('class', 'blue_circle')
  .style('opacity', 0)
  .attr('cx', function (d) { d.x })
  .attr('cy', function (d) { d.y })
  .attr('r', function (d) { d.r })
  .transition()
  .duration(1000)
  .ease('linear')
  .style('opacity', 1);

d3.selectAll('.red_circle')
  .data(myData2)
  .enter()
  .append('class', 'red_circle')
  .append('path')
  .style('opacity', 0)
  .attr('d', function (d) { d3.svg.line(d) })
  .transition()
  .duration(1000)
  .ease('linear')
  .style('opacity', 1);

which works, but has some repeated code arising from both the chaining syntax for defining transitions and also the presence of slight variations in the processing (e.g. lines vs. circles).

-->