Skip to content

Instantly share code, notes, and snippets.

@dannyko

dannyko/README.md

Last active September 17, 2015 09:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dannyko/ca8cc0fc1df5d7282cb5 to your computer and use it in GitHub Desktop.
Save dannyko/ca8cc0fc1df5d7282cb5 to your computer and use it in GitHub Desktop.
Download ZIP
vizflow demo
Raw
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.

Raw
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
Raw
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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"}
Raw
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>
Raw
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)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment