vizflow demo

README.md

vizflow demo - three circles

vizflow.js is an application-agnostic interactive visualization engine written using EcmaScript.6 (ES6) with no other external dependencies.

It provides a lightweight interactive visualization engine with smaller footprints than other visualization libraries like D3js.

This vizflow demo contained in index.html shows an interactive stochastic dynamics simulation with 3 frictionless, non-interacting particles in a rectangular domain with inelastic boundaries.

Also viewable as block for remote demoing.

The particles are rendered as colored circles.

Clicking on any of the circles will randomly change their 2D position by sampling from a uniform distribution.

build.js

"format register";!function(e){function t(e){for(var t=[],r=0,n=e.length;n>r;r++)-1==d.call(t,e[r])&&t.push(e[r]);return t}function r(e,r,n,i){if("string"!=typeof e)throw"System.register provided no module name";var u;u="boolean"==typeof n?{declarative:!1,deps:r,execute:i,executingRequire:n}:{declarative:!0,deps:r,declare:n},u.name=e,l[e]||(l[e]=u),u.deps=t(u.deps),u.normalizedDeps=u.deps}function n(e,t){if(t[e.groupIndex]=t[e.groupIndex]||[],-1==d.call(t[e.groupIndex],e)){t[e.groupIndex].push(e);for(var r=0,i=e.normalizedDeps.length;i>r;r++){var u=e.normalizedDeps[r],o=l[u];if(o&&!o.evaluated){var s=e.groupIndex+(o.declarative!=e.declarative);if(void 0===o.groupIndex||o.groupIndex<s){if(void 0!==o.groupIndex&&(t[o.groupIndex].splice(d.call(t[o.groupIndex],o),1),0==t[o.groupIndex].length))throw new TypeError("Mixed dependency cycle detected");o.groupIndex=s}n(o,t)}}}}function i(e){var t=l[e];t.groupIndex=0;var r=[];n(t,r);for(var i=!!t.declarative==r.length%2,u=r.length-1;u>=0;u--){for(var s=r[u],c=0;c<s.length;c++){var f=s[c];i?o(f):a(f)}i=!i}}function u(e){return p[e]||(p[e]={name:e,dependencies:[],exports:{},importers:[]})}function o(t){if(!t.module){var r=t.module=u(t.name),n=t.module.exports,i=t.declare.call(e,function(e,t){r.locked=!0,n[e]=t;for(var i=0,u=r.importers.length;u>i;i++){var o=r.importers[i];if(!o.locked){var s=d.call(o.dependencies,r);o.setters[s](n)}}return r.locked=!1,t});if(r.setters=i.setters,r.execute=i.execute,!r.setters||!r.execute)throw new TypeError("Invalid System.register form for "+t.name);for(var s=0,a=t.normalizedDeps.length;a>s;s++){var c,m=t.normalizedDeps[s],v=l[m],g=p[m];g?c=g.exports:v&&!v.declarative?c={"default":v.module.exports,__useDefault:!0}:v?(o(v),g=v.module,c=g.exports):c=f(m),g&&g.importers?(g.importers.push(r),r.dependencies.push(g)):r.dependencies.push(null),r.setters[s]&&r.setters[s](c)}}}function s(e){var t,r=l[e];if(r)r.declarative?c(e,[]):r.evaluated||a(r),t=r.module.exports;else if(t=f(e),!t)throw new Error("Unable to load dependency "+e+".");return(!r||r.declarative)&&t&&t.__useDefault?t["default"]:t}function a(t){if(!t.module){var r={},n=t.module={exports:r,id:t.name};if(!t.executingRequire)for(var i=0,u=t.normalizedDeps.length;u>i;i++){var o=t.normalizedDeps[i],c=l[o];c&&a(c)}t.evaluated=!0;var f=t.execute.call(e,function(e){for(var r=0,n=t.deps.length;n>r;r++)if(t.deps[r]==e)return s(t.normalizedDeps[r]);throw new TypeError("Module "+e+" not declared as a dependency.")},r,n);f&&(n.exports=f)}}function c(t,r){var n=l[t];if(!n.evaluated&&n.declarative){r.push(t);for(var i=0,u=n.normalizedDeps.length;u>i;i++){var o=n.normalizedDeps[i];-1==d.call(r,o)&&(l[o]?c(o,r):f(o))}n.evaluated||(n.evaluated=!0,n.module.execute.call(e))}}function f(e){if(m[e])return m[e];var t=l[e];if(!t)throw"Module "+e+" not present.";i(e),c(e,[]),l[e]=void 0;var r=t.declarative?t.module.exports:{"default":t.module.exports,__useDefault:!0};return m[e]=r}var l={},d=Array.prototype.indexOf||function(e){for(var t=0,r=this.length;r>t;t++)if(this[t]===e)return t;return-1},p={},m={};return function(t,n){var i;"undefined"!=typeof i&&i.register?(n(i),i["import"](t)):(n(i={register:r,get:f,set:function(e,t){m[e]=t},newModule:function(e){return e},global:e}),i.set("@empty",i.newModule({})),f(t))}}("undefined"!=typeof window?window:global)("src/vizflow",function(e){e.register("src/step",[],function(e){function t(){$Z.sim=$Z.pipe($Z.task)}function r(){$Z.iter++,window.requestAnimationFrame(t)}return e("default",r),{setters:[],execute:function(){"use strict"}}}),e.register("src/item",[],function(e){function t(){for(var e=arguments.length,t=Array(e),r=0;e>r;r++)t[r]=arguments[r];return 0==t.length?$Z._item:($Z._item=t[0],$Z)}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/pipe",[],function(e){function t(e){for(var t=Promise.resolve(),r=0;r<e.length;r++)t=t.then(e[r]);return t}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/done",[],function(e){function t(){return 0==$Z._item.length||$Z.iter>$Z.maxIter?!0:!1}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/exit",[],function(e){function t(){return!1}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/run",[],function(e){function t(){$Z.sim=$Z.pipe($Z.task)}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/update",[],function(e){function t(){var e=this,t=[],r=[];if(void 0!==e.transition){for(var n=0;n<e.transition.length;n++){var i=e.transition[n],u=0;void 0===i.startTime?i.startTime=Date.now():u=Date.now()-i.startTime;var o=i.duration-u;if(0==u)i.startValue=e[i.varName];else if(o>0){var s=1-o/i.duration;e[i.varName]=i.interpFunc(s)}else e[i.varName]=i.endValue,t.push(n),void 0!==i.child&&r.push(i.child)}for(var a=t.length-1;a>=0;a--)e.transition.splice(t[a],1);for(var c=0;c<r.length;c++)e.transition.push(r[c])}}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/transition",[],function(e){var t;return{setters:[],execute:function(){"use strict";t={linear_interp:function(e){return(1-e)*this.startValue+e*this.endValue},color_interp:function(e){var t=this.startValue,r=this.endValue;t=t.slice(1),r=r.slice(1),3===t.length&&(t=t.replace(/([0-9a-f])/gi,"$1$1")),3===r.length&&(r=r.replace(/([0-9a-f])/gi,"$1$1"));for(var n="#",i=0;3>i;i++){var u=parseInt(t.slice(2*i,2*(i+1)),16),o=parseInt(r.slice(2*i,2*(i+1)),16),s=Math.round((1-e)*u+e*o);s=s.toString(16).toUpperCase(),1===s.length&&(s+=s),n+=s}return n},linear_transition_func:function(e,t){return function(r){return{varName:e,duration:t,endValue:r,interpFunc:$Z.transition.linear_interp}}},color_transition_func:function(e,t){return function(r){return{varName:e,duration:t,endValue:r,interpFunc:$Z.transition.color_interp}}}},e("default",t)}}}),e.register("src/acquire_input",[],function(e){function t(){var e=this;return new Promise(function(t){t(e.name)})}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/update_items",[],function(e){function t(){return Promise.all($Z.item().map(function(e){return e.update?e.update():$Z.update.call(e)}))}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/detect_actions",[],function(e){function t(){var e=this;return new Promise(function(t){t(e.name)})}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/perform_actions",[],function(e){function t(){return Promise.resolve()}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/render_image",[],function(e){function t(){return Promise.all($Z.item().map(function(e){return e.render()}))}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/step_or_exit",[],function(e){function t(){return $Z.done()?($Z.exit(),Promise.resolve(!0)):($Z.step(),Promise.resolve(!1))}return e("default",t),{setters:[],execute:function(){"use strict"}}}),e.register("src/vizflow",["src/step","src/item","src/pipe","src/done","src/exit","src/run","src/update","src/transition","src/acquire_input","src/update_items","src/detect_actions","src/perform_actions","src/render_image","src/step_or_exit"],function(e){var t,r,n,i,u,o,s,a,c,f,l,d,p,m,v,g,x,h,_;return{setters:[function(e){t=e["default"]},function(e){r=e["default"]},function(e){n=e["default"]},function(e){i=e["default"]},function(e){u=e["default"]},function(e){o=e["default"]},function(e){s=e["default"]},function(e){a=e["default"]},function(e){c=e["default"]},function(e){f=e["default"]},function(e){l=e["default"]},function(e){d=e["default"]},function(e){p=e["default"]},function(e){m=e["default"]}],execute:function(){"use strict";v=[],g=0,x=!1,h=1/0,_=[c,f,l,d,p,m],window.$Z={verbose:x,iter:g,maxIter:h,transition:a,_item:v,item:r,update:s,pipe:n,step:t,done:i,exit:u,task:_,run:o},e("default",{})}}})});
//# sourceMappingURL=build.js.map

build.js.map

{"version":3,"file":"build.js","sources":["src/step.js","src/item.js","src/pipe.js","src/done.js","src/exit.js","src/run.js","src/update.js","src/transition.js","src/acquire_input.js","src/update_items.js","src/detect_actions.js","src/perform_actions.js","src/render_image.js","src/step_or_exit.js","src/vizflow.js"],"names":["run","$Z","sim","pipe","task","step","iter","window","requestAnimationFrame","item","args","Array","_len","_key","arguments","length","_item","prom","Promise","resolve","i","then","done","maxIter","exit","update","el","this","removeList","children","undefined","transition","kt","trans","elapsedTime","startTime","Date","now","remainingTime","duration","startValue","varName","normalizedTime","interpFunc","endValue","push","child","kr","splice","kc","linear_interp","t","color_interp","color1","color2","slice","replace","color","split1","parseInt","split2","split","Math","round","toString","toUpperCase","linear_transition_func","color_transition_func","acquire_input","_this","name","update_items","all","map","d","call","detect_actions","perform_actions","render_image","render","step_or_exit","verbose","_srcStep","_srcItem","_srcPipe","_srcDone","_srcExit","_srcRun","_srcUpdate","_srcTransition","_srcAcquire_input","_srcUpdate_items","_srcDetect_actions","_srcPerform_actions","_srcRender_image","_srcStep_or_exit"],"mappings":"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"}

index.html

<!doctype html5>
<html>
  <head>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <script type="text/javascript" src="build.js"></script>
    <script type="text/javascript" src="three_circles.js"></script>
    <script>
      three_circles() ;
    </script>
  </body>
</html>

three_circles.js

// three colored circles with SVG rendering, a simple demo of vizflow's transition features

function three_circles() {
  var width  = 40 ;
  var height = 20 ;
  var svgns  = "http://www.w3.org/2000/svg" ;
  var svg    = document.createElementNS(svgns, 'svg') ;

  svg.setAttribute( 'viewBox', '0 0 ' + 2 * width + ' ' + 2 * height) ;
  document.body.appendChild(svg) ;

  var g = document.createElementNS(svgns, 'g') ;
  g.setAttribute('transform', 'translate(' + width + ',' + height + ')' ) ;

  svg.appendChild(g) ;

  function render() {
    this.viz.setAttribute( 'cx',   this.x      ) ;
    this.viz.setAttribute( 'cy',   this.y      ) ;
    this.viz.setAttribute( 'fill', this.color  ) ;
    this.viz.setAttribute( 'r',    this.radius ) ;
  }

  function random_color() {

    var r = Math.round( 255 * Math.random() ).toString( 16 ) ;
    var g = Math.round( 255 * Math.random() ).toString( 16 ) ;
    var b = Math.round( 255 * Math.random() ).toString( 16 ) ;

    // make sure they are the right length
    if ( r.length === 1 ) r += r ;
    if ( g.length === 1 ) g += g ;
    if ( b.length === 1 ) b += b ;

    return '#' + r + g + b ;
  }

  var dur          = 500 ; // transition duration in milliseconds

  var x_transition = $Z.transition.linear_transition_func ( 'x',      dur ) ; // function accepting an x end-value and returning a transition object
  var y_transition = $Z.transition.linear_transition_func ( 'y',      dur ) ; // function accepting a y end-value and returning a transition object
  var r_transition = $Z.transition.linear_transition_func ( 'radius', dur ) ; // function accepting a y end-value and returning a transition object
  var c_transition = $Z.transition.color_transition_func  ( 'color',  dur ) ; // function accepting a color end-value and returning a transition object

  var red   = '#993333' ;
  var green = '#339933' ;
  var blue  = '#333399' ;

  var data = [ // array of object literals defining the three circles
    { x: -10, y:   0, radius: 2, color: red,   color0: red   },
    { x:  10, y:   0, radius: 2, color: green, color0: green },
    { x:   0, y: -10, radius: 2, color: blue,  color0: blue  }
  ] ;

  data.forEach(function (d) {

    d.render       = render ; // function that tells the visulization engine how to render the items for each frame of the visualization

    d.viz          = document.createElementNS(svgns, 'circle') ;
    d.viz['__d__'] = d     ; // bind the data to the viz element for efficient access
    d.viz.onclick  = click ;

    d.viz.setAttribute( 'cx',   d.x      ) ;
    d.viz.setAttribute( 'cy',   d.y      ) ;
    d.viz.setAttribute( 'r',    d.radius ) ;
    d.viz.setAttribute( 'fill', d.color  ) ;

    g.appendChild(d.viz) ;

  }) ;

  function click() {
    
    var tx   = x_transition ( width  * (Math.random() - 0.5) ) ; // x transition object
    var ty   = y_transition ( height * (Math.random() - 0.5) ) ; // y transition object
    var tr   = r_transition ( 1 + (4 * Math.random())        ) ; // radius transition object
    var tc   = c_transition ( random_color()                 ) ; // transient color transition object
    var tc2  = c_transition ( this.__d__.color0              ) ; // final color transition object (return back to starting color)

    tc.child = tc2 ; // ** example of the vizflow transition-chaining syntax

    this.__d__.transition = [tx, ty, tr, tc] ; // set the transitions for this item, also cancels all existing transitions for this item (side-effect)

  } 

  $Z.item(data) ; // load the user data into the visualization engine to initialize the time  equals zero (t = 0) state
  $Z.run()      ; // run the interactive visualization (infinite loop by default)

}

thumbnail.png