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.
vizflow alternatives and similar libraries
Based on the "Data Visualization" category.
Alternatively, view vizflow alternatives based on common mentions on social networks and blogs.
-
echarts
Apache ECharts is a powerful, interactive charting and data visualization library for browser -
p5.js
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. http://twitter.com/p5xjs — -
BabylonJS
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. -
#<Sawyer::Resource:0x00007f1b609038f0>
Open-source JavaScript charting library behind Plotly and Dash -
paper.js
The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey -
GoJS, a JavaScript Library for HTML Diagrams
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages. -
mxGraph
DISCONTINUED. Diagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor. -
processing.js
DISCONTINUED. Processing.js makes your data visualizations work using web standards and without any plug-ins -
jquery.sparkline
A plugin for the jQuery javascript library to generate small sparkline charts directly in the browser
CodeRabbit: AI Code Reviews for Developers

* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of vizflow or a related project?
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 browserify src/vizflow.js -t babelify | uglifyjs -o vizflow.js --source-map
for running in a production environment.
Similarly, run browserify src/module/vizflow-helper-t babelify | uglifyjs -o vizflow-helper.js --source-map
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).
-->