vkuchinov

Step Progress Bar based on data with animated transitions. setInterval is just for demonstration, use updateProgressBar(element) instead.

vkuchinov

A simplified version of http://bl.ocks.org/pbogden/7487564 made by pbogden. You can assign every button 'click' event to different functions:

var data = [{label: "BUTTON.A", x: 100, y: 60, function: function(){ fnA(); } }, {label: "BUTTON.B", x: 100, y: 120, function: function(){ fnB(); } } ];

vkuchinov

InputBox object based on deeply tweaked SVG button by pbogden. Has minor warning "orm submission canceled because the form is not connected", so if anyone has any suggestion how to fix it — you're more than welcome.

Just leave your comments here.

vkuchinov

border: no
height: 960

vkuchinov

border: no
height: 960

vkuchinov

Based on http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6 made by Curtis Bratton [brattonc]

You should keep SVG structure and hierarchy:

1. <svg id={name} ... />
2. area to be animated

vkuchinov

Based on https://bl.ocks.org/abrahamdu/e1481e86dd4e9d553cc2d7d359b91e68 Please keep in mind that this example is using just a fragment taken from Wikipedia.

vkuchinov

/*
 * @author zz85 / https://github.com/zz85
 * @author mrdoob / http://mrdoob.com
 * Running this will allow you to drag three.js objects around the screen.
 
 * Modified for D3.JS / THREE.JS stack by
 * @author vkuchinov / https://github.com/vkuchinov
 *
 */

vkuchinov

/*
 * @author zz85 / https://github.com/zz85
 * @author mrdoob / http://mrdoob.com
 * Running this will allow you to drag three.js objects around the screen.
 
 * Modified for D3.JS / THREE.JS stack by
 * @author vkuchinov / https://github.com/vkuchinov
 *
 */

vkuchinov

/**
 * @author qiao / https://github.com/qiao
 * @author mrdoob / http://mrdoob.com
 * @author alteredq / http://alteredqualia.com/
 * @author WestLangley / http://github.com/WestLangley
 */

THREE.OrbitControls = function ( object, domElement ) {

	this.object = object;